Question

我正在使用带有asp.net-mvc后端的jqgrid treeview，我看到GUI允许你点击其他列进行排序，但我找不到任何关于如何实现它的文档或示例。

当我点击列标题时，我的“正在加载...”通知会显示，但我的服务器端操作都没有被调用。

我使用了httpwatch，我没有看到任何试图点击服务器的电话。

jqgrid treeview是否支持排序（这只是对树中的顶层进行排序）？

这是我的代码：

$("#treegrid").jqGrid({
    url: '/MyController/GetData' + GetQuery(),
    datatype: 'json',
    footerrow: true,
    userDataOnFooter: true,
    mtype: 'GET',
    rowNum: 2000,
    colNames: ["ID", "Description", "Total 1"],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 1,
        hidden: true,
        key: true
    }, {
        name: 'desc',
        width: 240,
        index: 'desc',
        hidden: false,
        sortable: true
    },
            {
                name: 'total1',
                sorttype: 'int',
                index: 'total1',
                unformat: originalValueUnFormatter,
                formatter: bookMapFormatter,
                align: "right",
                width: 60,
                hidden: false,
                sortable: true
            }],
    treeGridModel: 'adjacency',
    height: 'auto',
    loadComplete: function (data) {


    },
    pager: "#ptreegrid",
    treeGrid: true,
    ExpandColumn: 'desc',
    ExpandColClick: true,
    caption: "My Treegrid"
});


 function bookMapFormatter(cellvalue, options, rowObject) {
     return booksFormatterEx(cellvalue, options, rowObject, "MyAction");
 }

function booksFormatterEx(cellvalue, options, rowObject, actionName) {
    var regularURL = '/MyController/' + actionName + GetQuery() + '&key=' + rowObject[0];
    return "<a target='_blank' href='" + regularURL + "' >" + cellvalue + "</a>";

}

此外，如果它有用，我已经序列化了我的json结果（使用.net JavascriptSerializer类）（这只是顶级视图，因为我在用户向下钻取时返回服务器）

 {"page":1,
 "total":1,
 "records":2,
 "userdata":{"desc":"Total:","total1":"10,753"},
 "rows":[{
 "id":"Group1","cell":["Group1","1 - 1 System(s)",723, 0, null, false, false, true]},
 {"id":"Group2","cell":["Group2","2 - 2 System(s)",2120, 0, null, false, false, true]},
 {"id":"Group3","cell":["Group3","3 - 3 System(s)",2017, 0, null, false, false, true]},
 {"id":"Group4","cell":["Group4","4 - 4 System(s)",1181, 0, null, false, false, true]},
 {"id":"Group5","cell":["Group5","5 - 5 System(s)",4712, 0, null, false, false, true]}]}

Answer 1

树形网格具有SortTree方法，该方法将用于对网格本地进行排序。不会对服务器进行任何调用。如果用户单击列标题，将调用相同的方法。

为了更好地理解，我请关注jqGrid代码中的one line：

if( ts.p.loadonce || ts.p.treeGrid) {ts.p.datatype = "local";}

将在使用datatype: 'json'或datatype: 'json'时执行。因此，在首次加载Treegrid后，datatype将更改为datatype: 'local'。

依赖于其他jqGrid数据（loaded:true或loaded:false），树节点的扩展将在本地，或者请求将发送到服务器。无论如何，数据的排序将始终在本地实现。

唯一重要的是进行正确的排序：对于根节点，应该在数据（不是parent: "null"）中使用parent: null或parent: ""（请参阅here详情）。

更新：除了parent: "null"或parent: null（您在JSON数据中没有）的问题之外，您还遇到了在JSON中使用HTML的问题来自服务器的响应。您发布的JSON数据等效于以下内容：

{
    "page": 1,
    "total": 1,
    "records": 2,
    "userdata": {
        "desc": "Total:",
        "bookmapBooks": "10,753"
    },
    "rows": [
        {"id": "Group1", "cell": ["Group1", "<b>COMMODITIES</b> - 19  System(s)",         "<b>723</b>"]},
        {"id": "Group2", "cell": ["Group2", "<b>CREDIT</b> - 30 System(s)",               "<b>2,120</b>"]},
        {"id": "Group3", "cell": ["Group3", "<b>EQUITIES</b> - 23 System(s)",             "<b>2,017</b>"]},
        {"id": "Group4", "cell": ["Group4", "<b>MORTGAGE PRODUCTS</b> - 33 System(s)",    "<b>1,181</b>"]},
        {"id": "Group5", "cell": ["Group5", "<b>RATES AND CURRENCIES</b> - 40 System(s)", "<b>4,712</b>"]}
    ]
}

如前所述，在第一次数据加载后，网格的datatype将更改为'local'。内部data参数将使用JSON输入中的格式填充JSON数据。因此，对于列'total1'，您会得到"723"或"4,712"等数据，这些数据对应 sorttype: 'int'。因此，为"0", "null"添加level: 0, parent: null将无法完全解决网格排序问题。字符串"4,712"无法转换为int，因此无法排序为整数。

还有一个小小的评论。您可能希望使用"userdata":{"desc":"Total:","total1":"10,753"}代替"userdata":{"desc":"Total:","bookmapBooks":"10,753"}。

关于使用 sorttype作为功能，您可以解决问题并更改the original grid

到the sortable grid

您可以使用以下格式的sorttype：

sorttype: function (val) {
    var strValue = $(val).text().replace(",",""); // replace thousandsSeparator
    return parseInt(strValue, 10);
}

Answer 2

从内存中说，每次单击先前在列模型中进行排序的列标题时，都会对您在配置中指定的URL（也是）进行请求。请求中的四个参数是页面，行，sidx 和 sord 。

使用参数中的这些值，您可以获得足够的信息以确保按照所需的顺序（包括分页）返回数据。

在jqgrid treeview中进行排序工作

2 个答案: