Question

我使用free-jqgrid有以下代码。它是第一次正确加载（状态为“活动”，合作伙伴？为“是”）。但是当我进行排序或搜索时，值会变得不正确（状态为“已退役”且合作伙伴为“否”）。

为什么格式化程序提供的值不正确？如何解决这个问题？

SCRIPT

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/start/jquery-ui.css" rel="stylesheet" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.6/js/jquery.jqgrid.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.6/css/ui.jqgrid.min.css" rel="stylesheet" />

    <script type="text/javascript">


        function getCurrentPractice ()
        {
            return "Test";
        }

        function getGridCaption() {
            return "<div style='font-size:15px; font-weight:bold; display:inline; padding-left:10px;'><span class='glyphicon glyphicon-check' style='margin-right:3px;font-size:14px;'></span>" + getCurrentPractice() + " " + "</div>" +
            "<div style='float:right; padding-right:20px; padding-bottom:10px; display:inline;>" +
           "<div style='float:right;width:550px;  padding-bottom:20px;'>" +
                "<input type='text' class='form-control' id='filter' placeholder='Search'  style='width:250px; height:30px; float:right; ' />" +
            " </div>" +
            "</div>";
        }

        $(function () {

            var currentPractice = "P";
            var grid = $("#list2");
            grid.jqGrid({
                url: '/Home/GetProviders',
                datatype: "json",
                postData:
                {
                    practiceName: function () { return currentPractice }
                },

                colNames: [
                            'Practice',
                            'ProviderID',
                            'Partner?',
                            'Status'
                ],
                colModel: [
                    { name: 'Practice', hidden: false },
                    { name: 'ProviderID', hidden: false },
                    {
                        name: 'PartnerStatusText',
                        width: 70,
                        formatter: function (cellvalue, options, rowObject) {

                            var isPartner = rowObject.IsPartner;
                            return isPartner == true ? 'Yes' : 'No';
                        }
                    },
                    {
                        name: 'ActiveStatusText',
                        width: 70,
                        formatter: function (cellvalue, options, rowObject) {
                            var isActive = rowObject.IsActive;
                            return isActive == true ? 'Active' : 'Retired';
                        }
                    }
                ],
                ignoreCase: true,
                loadonce: true,
                rowNum: 25,
                rowList: [15, 25, 35, 50],
                pager: '#pager2',
                viewrecords: true,
                sortable: true,
                caption: getGridCaption(),

                beforeSelectRow: function (rowid, e) {
                    //Avoid selection of row
                    return false;
                },
                loadComplete: function () {

                }


            });
            grid.jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false });

            //Filter Toolbar
            $("#advancedSearch").click(function () {
                grid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });
            });


            //Top Search
            $("#filter").on('keyup', function () {
                var searchFiler = $("#filter").val(), f;

                if (searchFiler.length === 0) {
                    grid[0].p.search = false;
                    $.extend(grid[0].p.postData, { filters: "" });
                }
                f = { groupOp: "OR", rules: [] };
                f.rules.push({ field: "Practice", op: "cn", data: searchFiler });
                grid[0].p.search = true;
                $.extend(grid[0].p.postData, { filters: JSON.stringify(f) });
                grid.trigger("reloadGrid", [{ page: 1, current: true }]);
            });


        });
    </script>

</head>

HTML

<div style="float:left; border:1px solid red;">
    <div id="divGrid" style="width: 680px; min-height: 50px; float: left; border: 1px solid silver;">
        <table id="list2"></table>
        <div id="pager2"></div>
    </div>
</div>

服务器代码

[AllowAnonymous]
public JsonResult GetProviders(string practiceName)
{

    //System.Threading.Thread.Sleep(3000);
    List<Provider> providers = new List<Provider>();
    Provider p = new Provider();
    p.Practice = "Test1";
    p.ProviderID = 1;
    p.IsActive = true;
    p.IsPartner = true;
    providers.Add(p);

    Provider p2 = new Provider();
    p2.Practice = "Test2";
    p2.ProviderID = 2;
    p2.IsActive = true;
    p2.IsPartner = true;
    providers.Add(p2);

    return Json(providers, JsonRequestBehavior.AllowGet);
}

更新

感谢Oleg，可以在这里找到工作演示 - Fiddle。它使用JSFiddle的"/echo/json/"服务从服务器获取数据。

它使用sorttype和additionalProperties。这可以在没有additionalProperties的情况下重写 - 当我有机会再次访问时，我需要这样做。

Answer 1

问题似乎很容易。从服务器返回的数据包含属性Practice，ProviderID，IsActive和IsPartner。初始加载期间，rowObject中提供了这些属性。您还可以使用loadonce: true选项。因此，免费的jqGrid将尝试在本地保存一些数据，但是哪一个？ jqGrid默认保存对应列名称的属性：Practice，ProviderID，PartnerStatusText和ActiveStatusText，但jqGrid没有其他属性IsActive的信息并且IsPartner也需要保存。

您可以通过两种替代方式解决问题：

您将列名PartnerStatusText和ActiveStatusText重命名为IsActive和IsPartner。
添加选项additionalProperties: ["IsActive", "IsPartner"]以通知jqGrid读取并保存本地其他属性。

此外，我建议您在自定义格式化程序中使用options.rowData而不是rowObject。您可以跳过3-d参数并使用formatter: function (cellvalue, options) {...}。

最后一句：自定义格式化程序的当前代码非常简单。您需要将一些输入值（true和false）替换为另一个文本。可以使用formatter: "select"来表示案例：

    colModel: [
        { name: "Practice" },
        { name: "ProviderID" },
        {
            name: "IsPartner",
            width: 70,
            formatter: "select",
            formatoptions: { value: "false:No;true:Yes" }
        },
        {
            name: "IsActive",
            width: 70,
            formatter: "select",
            formatoptions: { value: "false:Retired;true:Active" }
        }
    ],

请参阅https://jsfiddle.net/c9fge9yk/1/

格式化程序在排序或搜索后给出错误的结果

1 个答案: