jqGrid返回rowObject undefined

时间:2016-03-04 15:02:24

标签: javascript jquery jqgrid

我正在使用jqGrid在我的项目中使用以下代码显示订单,当我尝试使用网格上的刷新按钮刷新时,列状态的格式化程序,即函数dropdownFormatter()将rowObject变量设置为undefined。

由于这个原因,当我尝试自动重载功能时,下拉列表中没有填充正确的参数。如果我将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/

1 个答案:

答案 0 :(得分:1)

您的代码包含使用name: ''的一些小问题,这是不允许的,隐藏order_id的使用,您希望将其用作数据的ID,但是您要在哪里使用添加了key: true属性或未使用jsonReader: { id: "order_id" }。然而,你的主要问题有另一个起源。 jqGrid仅在本地(因为loadonce: true)读取和保存输入数据的属性,这些属性用作列。您尝试在delivery_boy_id中使用{em>未使用的colModel属性。因此,只有在初始加载期间,这些值才会在rowObject中。

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

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

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

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

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