在jqgrid treeview中进行排序工作 [英] does sorting work in jqgrid treeview
问题描述
我正在将jqgrid treeview与asp.net-mvc后端一起使用，我看到GUI允许您单击其他列进行排序，但是我找不到任何文档或示例来实现它.
I am using jqgrid treeview with an asp.net-mvc backend and i see the GUI lets you click on other columns for sorting but i can't find any documentation or examples on how to implement it.
当我单击列标题时，显示"Loading.."通知，但没有调用服务器端操作.
When I click a column heading, my "Loading . . " notification shows up but none of my server side actions are getting called.
我使用了httpwatch，但没有看到任何试图打入服务器的电话.
I used httpwatch and i don't see any calls trying to hit the server.
jqgrid treeview是否支持排序(这仅是对树的顶层进行排序)?
Does jqgrid treeview support sorting (this would just be sorting the top level in the tree)?
这是我的代码:
$("#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类)(这只是顶层视图，当用户向下钻取时，我将返回服务器)
Also if its helpful, i have serialized my json results (using the .net JavascriptSerializer class) (this is just the top level view as i go back to the server when users drill down)
{"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]}]}
推荐答案
树网格具有 SortTree 方法，该方法将用于对网格本地进行排序.不会调用服务器.如果用户单击列标题，则将调用相同的方法.
Tree grid has SortTree method which will be used to sort grid locally. No call to the server will be done. If the user click on the column header the same method will be called.
为了更好地理解，我将您的注意力放在 jqGrid代码中的一行:
For better understanding I take your attention on one line from the jqGrid code:
if( ts.p.loadonce || ts.p.treeGrid) {ts.p.datatype = "local";}
，将在使用datatype: 'json'或datatype: 'json'的情况下执行.因此，在第一次加载Treegrid之后，datatype将更改为datatype: 'local'.
which will be executed in case of usage datatype: 'json' or datatype: 'json'. So after the first loading of Treegrid the datatype will be changed to datatype: 'local'.
取决于其他jqGrid数据(loaded:true或loaded:false)，树节点的扩展将在本地进行，或者将请求发送到服务器.数据的排序总是以本地方式实现.
Depend on the other jqGrid data (loaded:true or loaded:false) the expanding of the tree node will be locally or the request will be send to the server. In any way the sorting of the data will be always implemented locally.
唯一重要的是要进行正确的排序:对于根节点，应该在数据中使用parent: "null"或parent: null(而不是parent: "")(请参阅
The only thing which if important to have correct sorting: one should use parent: "null" or parent: null in the data (not parent: "") for the root nodes (see here for details).
更新:除了parent: "null"或parent: null(JSON数据中没有)的问题之外，服务器在JSON响应中使用HTML也存在问题.您发布的JSON数据等效于以下内容:
UPDATED: Additionally to the problem with parent: "null" or parent: null (which you not have in the JSON data) you have the problem with the usage of HTML inside of JSON response from the server. The JSON data which you posted are equivalent to the following:
{
"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'，您将具有"<b>723</b>"或"<b>4,712</b>"之类的数据，它们对应不是 sorttype: 'int'.因此，为level: 0, parent: null添加"0", "null"并不能完全解决网格排序的问题.字符串"<b>4,712</b>"无法转换为int，因此不能按整数排序.
As I described before, the datatype of the grid will be changed to the 'local' after the first data load. The internal data parameter will be filled with the JSON data exactly in the format like you has in the JSON input. So for the column 'total1' you would has data like "<b>723</b>" or "<b>4,712</b>" which corresponds not the sorttype: 'int'. So adding "0", "null" for level: 0, parent: null will not full solve the problem of the grid sorting. The string "<b>4,712</b>" can't been converted to int and so can't be sorted as integer.
再说一遍.您可能要使用"userdata":{"desc":"Total:","total1":"10,753"}而不是"userdata":{"desc":"Total:","bookmapBooks":"10,753"}.
One more small remark. You probably want to use "userdata":{"desc":"Total:","total1":"10,753"} instead of "userdata":{"desc":"Total:","bookmapBooks":"10,753"}.
关于使用 sorttype作为功能，您可以解决问题并更改到可排序网格
您可以按以下形式使用sorttype:
You can use the sorttype in the following form:
sorttype: function (val) {
var strValue = $(val).text().replace(",",""); // replace thousandsSeparator
return parseInt(strValue, 10);
}
这篇关于在jqgrid treeview中进行排序工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
