jqGrid 返回 rowObject 未定义

Question

我正在使用 jqGrid 使用以下代码在我的项目中显示订单，当我尝试使用网格上的刷新按钮进行刷新时，列状态的格式化程序，即函数 dropdownFormatter() 的 rowObject 变量未定义。

因此，当我尝试自动重新加载功能时，下拉菜单不会填充正确的参数。如果我将 jqGrid 属性“loadonce”设置为 false，这个问题就解决了。

但如果“loadonce”属性设置为false，下拉选择根本不会过滤网格。

jQuery("#list").jqGrid({
                url:'http://192.168.0.7:8000/orders_get_open',
                datatype: "json",
                colNames:['Id','Order No','Address', 'Pincode', 'Phone Number', "Pickup Date", "Pickup Time", "Delivery Date", "Delivery Time", "Status", "Delivery Boys", "Actions"],
                colModel:[
                    {name: 'order_id', index: 'order_id', hidden: true},
                    {name: 'order_no', index: 'order_no', width: 130},
                    {name: 'user_address',index: 'user_address', width: 400, search: false},
                    {name: 'pincode',index: 'pincode', width: 110, search: false},
                    {name: 'user_phone_number',index: 'user_phone_number', width: 180, search: false},
                    {name: 'pickup_date', index: 'pickup_date'},
                    {name: 'pickup_time', index: 'pickup_time'},
                    {name: 'delivery_date', index: 'delivery_date', width: 170},
                    {name: 'delivery_time', index: 'delivery_time', width: 170},
                    {
                        name: 'status', index: 'status', formatter: statusFormatter, stype: 'select', searchoptions: { 
                            sopt: ['eq'], value: ':All;ordered:Ordered;received:Received;laundry_entry:Laundry Entry;laundry_exit:Laundry Exit;delivered:Delivered'
                        }
                    },
                    {name: 'delivery_boys', index: 'delivery_boys', formatter: dropdownFormatter, search: false},
                    {name: '', index:'', formatter: actionFormatter, search: false}
                ],
                width: "1300",
                height: "auto",
                cache: false,
                rowNum:10,
                rowList:[10,20,30],
                pager: '#pager',
                loadonce: true,
                sortname: 'id',
                viewrecords: true,
                sortable: true,
                sortname: "order_no",
                sortorder: "asc",
                caption:"Order Details",                    
            }).jqGrid('navGrid','#pager', {
                edit:false,add:false,del:false, search: false, refresh: true
            }).jqGrid('filterToolbar', {
                stringResult: true, searchOnEnter: false, defaultSearch: "cn" 
            });

function dropdownFormatter(cellValue, options, rowObject) {
            console.info(cellValue, options, rowObject);
            console.log(rowObject.delivery_boy_id);

            var control = "<select class='form-control'><option value>Select</option>";
            $.each(cellValue, function (idx, obj){
                if (obj.id == rowObject.delivery_boy_id) {
                    control += "<option value='" + obj.id + "' selected='selected'>" + obj.name + "</option>";
                } else {
                    control += "<option value='" + obj.id + "'>" + obj.name + "</option>";                            
                }
            });
            control += "</select>";
            return control;
        }

样本数据：https://api.myjson.com/bins/22vo1

jsfiddle 代码：http://jsfiddle.net/76588Lev/1/

Answer 1

您的代码包含一些小问题，使用name: ''，这是不允许的，使用隐藏的order_id，您想将其用作数据的ID，但您没有添加@ 987654330@ 属性或未使用jsonReader: { id: "order_id" }。不过，您的主要问题还有另一个根源。 jqGrid 仅在本地读取和保存输入数据的属性（因为loadonce: true），这些属性用作列。您尝试使用delivery_boy_id 属性，在colModel 中未使用。因此，这些值只会在初始加载期间出现在 rowObject 中。

我建议您首先升级到最新的free jqGrid 版本：4.13.0。 Free jqGrid 是 jqGrid 的分支，我在 4.7.1 版更改许可协议后开发（参见 the post）在发布 4.7 后不久发布。产品名称已重命名为 Guriddo jqGrid JS。 Guriddo jqGrid JS 是开源的商业 产品（参见价格here）。我以 jqGrid 4.7 为起点，并实现了许多the wiki 文章中描述的许多新功能以及每个版本的自述文件，已发布。免费的 jqGrid 在与旧版本的 jqGrid（直到 4.7）相同的许可证（MIT 和 GPLv2）下提供。

免费jqGrid的新功能，可能对您有所帮助：

• 您可以通知free jqGrid 读取输入数据的附加 属性并保存在本地。这些属性将在自定义格式化程序、cellattr 和 rowattr 回调以及稍后在本地数据中可用（使用 getLocalRow 方法可用）。例如，您可以删除不需要的隐藏 order_id 列并添加选项 additionalProperties: ["order_id", "delivery_boy_id"]。
• 另外我建议你添加jsonReader: "order_id"和prmNames: { id: "order_id" }选项来通知jqGrid使用输入数据的属性作为rowid的值（id属性的值<tr>网格元素） .
• 将forceClientSorting: true 选项另外添加到loadonce: true。它强制本地在显示第一页数据之前对数据进行排序和过滤。如果您从第三方源或文件加载数据，则该选项非常实用，您无法更改数据的排序顺序。如果使用 forceClientSorting: true 选项，您只需添加 sortname 和 sortorder 它指定数据需要排序的列名或附加属性的名称。
• 我建议您从所有 colModel 项目中删除不需要的 index 属性。
• 我看到您在网格中使用了 Bootstrap 和 Font Awesome。我建议您使用选项iconSet: "fontAwesome" 和guiStyle: "bootstrap" 来获得与免费jqGrid 相同的外观。如果你想改变 jqGrid 元素的一些颜色，你只需要添加一些额外的 CSS 规则。请参阅 4.13.0 版自述文件中的 the demo。

生成的演示将修改为以下内容：http://jsfiddle.net/OlegKi/76588Lev/6/。

我建议您另外考虑将列替换为带有操作按钮的自定义格式化程序到带有自定义按钮的formatter: "actions"。它是免费 jqGrid 的另一种选择。您可以在the answer找到更多详细信息和相应的演示。