对列进行排序后丢失某些列中的数据答案

【问题标题】：Losing data in some columns after sorting a column对列进行排序后丢失某些列中的数据
【发布时间】：2014-11-01 04:19:09
【问题描述】：

我有一个在 jqGrid（4.6.0 版）中填充 JSON 对象的网页。 JSON 对象是从 java 控制器返回的。我如何初始化网格以及如何填充 JSON 对象如下所示。

问题是，每当单击列标题时，我都会丢失以下列中的数据：组织、部门和标题。 “丢失数据”是指这些列中的数据由于某种原因而消失。这些列恰好是一个嵌套的 JSON 对象。我在这里想念什么？谢谢。

这是从服务器返回的 JSON 字符串。

[
    {"id":51,"displayName":"John Doe",
     "currentExperience": {"id":26,"orgName":"compnay A","deptName":"MIS","title":"senior software engineer"}},
    {"id":52,"displayName":"Jane Doe",
     "currentExperience": {"id":29,"orgName":"compnay B","deptName":"MIS","title":"software engineer"}}
]

        function initializeGrid($grid, $pager, caption)
        {
            $grid.jqGrid({
                datatype: "local",
                colNames: ["VipId", "ExpId", "Name", "organization", "department", "title"],
                colModel: [
                    { name: "id", hidden: true },
                    { name: "currentExperience.id", hidden: true },
                    { name: "displayName", width: 100, sortable:true },
                    { name: "currentExperience.orgName", width: 100, sortable:true },
                    { name: "currentExperience.deptName", width: 100, sortable:true },
                    { name: "currentExperience.title", width: 100, sortable:true }
                ],
                pager: $pager,
                rowNum: 10,
                rowList: [10, 20, 30],
                sortname: "id",
                sortorder: "asc",
                viewrecords: true,
                gridview: true,
                autoencode: true,
                caption: caption,
                multiselect: true,
                width: 450,
                hidegrid: false
            });
        }

        function wireClickEventForSearchVipsButton($form)
        {
            $(document).on("click", "#btnSearchVips", function(event){
                event.preventDefault();

                var dataMap = composeSearchVipParameters($form);

                <c:url var="link" value="/protected/vips/lookup" />
                $.ajax({
                    url: '${link}',
                    type: 'GET',
                    dataType: 'json',
                    accepts: {
                        text: "application/json"
                    },
                    data: dataMap,
                    error: function() {
                        alert('an error occurred');
                    },
                    success: function(response) {
                        // this is how I populate response from the server
                        if (response) {
                            $grid = $('#gridAvailableVips');
                            if ($grid) {
                                $grid.jqGrid("clearGridData");
                                for(var i=0;i<=response.length;i++) {
                                    $grid.jqGrid('addRowData',i+1,response[i]);
                                }
                            }
                        }
                        else {

                        }
                    }
                }); // end of $.ajax() 
            }); // end of $(document).on()
        }

【问题讨论】：

包含. 的name 的用法不好。 addRowData 的用法是下一个问题。应该使用data 参数创建网格并使用setGridParam 使用新数据重置它，并触发reloadGrid 以应用新的data 参数。

标签： javascript sorting jqgrid

【解决方案1】：

谢谢，奥列格。使用以下方法后问题就消失了。

    function initializeGrid($grid, $pager, caption, json)
    {
        $grid.jqGrid({
            datastr: json,
            datatype: "jsonstring",
            colNames: ["VipId", "ExpId", "Name", "organization", "department", "title"],
            colModel: [
                { name: "id", hidden: true },
                { name: "currentExperience.id", hidden: true },
                { name: "displayName", width: 100, sortable:true },
                { name: "currentExperience.orgName", width: 100, sortable:true },
                { name: "currentExperience.deptName", width: 100, sortable:true },
                { name: "currentExperience.title", width: 100, sortable:true }
            ],
            pager: $pager,
            rowNum: 10,
            rowList: [10, 20, 30],
            sortname: "id",
            sortorder: "asc",
            viewrecords: true,
            gridview: true,
            autoencode: true,
            caption: caption,
            multiselect: true,
            width: 450,
            hidegrid: false
        });
    }

    function wireClickEventForSearchVipsButton($form)
    {
        $(document).on("click", "#btnSearchVips", function(event){
            event.preventDefault();

            var dataMap = composeSearchVipParameters($form);

            <c:url var="link" value="/protected/vips/lookup" />
            $.ajax({
                url: '${link}',
                type: 'GET',
                dataType: 'json',
                accepts: {
                    text: "application/json"
                },
                data: dataMap,
                error: function() {
                    alert('an error occurred');
                },
                success: function(response) {
                    // this is how I populate response from the server
                    if (response) {
                        $grid = $('#gridAvailableVips');
                        if ($grid) {
                            $grid.jqGrid('GridUnload');
                            initializeGrid($('#gridAvailableVips'), $pagerAvailableVips, 'Available Vips', response);
                        }
                    }
                    else {

                    }
                }
            }); // end of $.ajax() 
        }); // end of $(document).on()
    }

【讨论】：