我正在使用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/

最佳答案

您的代码包含使用name: ''的一些小问题,这是不允许的,使用隐藏的order_id,您想将其用作数据的ID,但是没有添加key: true属性或未使用jsonReader: { id: "order_id" }。但是,您的主要问题还有另一个来源。 jqGrid仅读取并保存本地(由于loadonce: true)(用作列)的输入数据的属性。您尝试使用delivery_boy_id属性,而在colModel中未使用。因此,这些值仅在初始加载期间位于rowObject中。

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

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


您可以通知免费的jqGrid读取输入数据的其他属性,并将其保存在本地。这些属性将在自定义格式程序,cellattrrowattr回调以及以后的本地数据中可用(使用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选项,则只需添加sortnamesortorder,即可指定列名或需要对数据进行排序的其他属性的名称。
我建议您从所有index项目中删除不需要的colModel属性。
我看到您在网格中使用了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中找到更多详细信息和相应的演示。

07-24 09:43
查看更多