jqGrid 返回 rowObject undefined

Question

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

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

但是如果 "loadonce" 属性设置为 false，下拉菜单 select 根本不会过滤网格。

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 属性或未使用 jsonReader: { id: "order_id" }。不过，您的主要问题还有另一个来源。 jqGrid 只在本地读取和保存（因为 loadonce: true）输入数据的属性，这些属性用作列。您尝试使用 delivery_boy_id 属性，未在 colModel 中使用。因此，这些值将仅在初始加载期间处于 rowObject 中。

我建议您升级到最新的 free jqGrid version: 4.13.0 first of all. Free jqGrid is the fork of jqGrid, which I develop after changing the license agreement in version 4.7.1 (see the post) publishes short after publishing 4.7. The name of the product was renamed to Guriddo jqGrid JS. Guriddo jqGrid JS is the commertial product (see the prices here) with the open source. I used jqGrid 4.7 as the starting point and have implemented a lot of new features described in many 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 的值（[=25 的值=] <tr> 个网格元素的属性）。
向 loadonce: true 添加 forceClientSorting: 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 的另一种选择。您可以在 .

中找到更多详细信息和相应的演示

jqGrid 返回 rowObject undefined

jqGrid returning rowObject undefined

javascript

jquery

jqgrid