javascript - 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，但您没有添加 key: true属性(property)或未使用jsonReader: { id: "order_id" } 。然而你的主要问题有另一个根源。 jqGrid 仅在本地读取和保存输入数据的属性(因为 loadonce: true )，这些属性用作列。您尝试使用 delivery_boy_id属性，在 colModel 中未使用 。因此这些值将在 rowObject 中仅在初始加载期间。

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

免费 jqGrid 的新功能可能对您有帮助，如下:

• 您可以通知免费 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它指定需要对数据进行排序的列名称或附加属性的名称。
• 我建议您删除不需要的 index所有属性 colModel项目。
• 我发现您在网格中使用了 Bootstrap 和 Font Awesome。我建议您使用选项 iconSet: "fontAwesome"和guiStyle: "bootstrap"具有与免费 jqGrid 相同的外观。如果你想改变 jqGrid 元素的一些颜色，你只需要添加一些额外的 CSS 规则。请参阅the demo来自4.13.0版本的自述文件。

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

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