問題描述

項目中用到的jqgrid的treegrid 從后臺返回的數據必須是排好序的數據，不然 點擊父節點 其直接的子節點 并不是在其 之下。這個問題相信用jqgrid的treegrid功能的同學都會遇到過。

處理方案

處理方案，要么在后臺排序要么在前臺排序唄。

如果是在后臺排序的話，方式一 在表結構新增一個字段 專門 用于樹的排序，方式二 指定表中某個字段排序 （注意是同級的按該字段排序）。

方式一比較簡單 ，但是有個問題，就是 這個 排序字段值的問題。比如實際項目中 我們的菜單排序 ，我們每個菜單 有個 menuNum ，如果為頂級菜單 那么 該菜單的 orderNum = menuNum，如果為子級菜單 那么 他的orderNum = 父級orderNum+本級的menuNum（注意是字符串拼接）。這樣我們在 查樹表格數據的時候就直接使用 order by orderNum 就可以得到 正確的順序了，這樣就保證了 子節點 一定是在相應的父節點之后。但是我們更改了菜單的 menuNum 其對應的orderNum也得跟著改，其所有的子節點 都要改，這樣就太麻煩了。樓主之前就是這樣做的但是覺得不太科學。

那就用第二種方式，同級的按某個字段排序并且放到 相應的父級結點之后 通過代碼來排序實現。可以使用java代碼實現，也可以通過JavaScript代碼實現。本人采用JavaScript在前臺實現，主要是js對象添加屬性很方便我們在java中就得用map的數據結構。

在jqgrid的源碼更改，在ajax返回數據后，對返回的treegrid數據進行排序。

效果圖：

修改代碼段

switch(dt){case "json":case "jsonp":case "xml":case "script":$.ajax($.extend({url:ts.p.url,type:ts.p.mtype,dataType: dt ,data: ajaxData,success:function(data,st, xhr) {/*** 父子級關系正確即可按照指定字段排序。* 樹表格前臺排序，樹表格一定要有主鍵 沒有默認為 id 。就不需要后臺排序了。* 一定要指定排序字段 同級按排序字段排序（在treeReader選項中添加sort_field屬性），不指定 按照主鍵排序。* 參考 menu_list.jsp*///treegrid 排序同級的按 ts.p.treeReader.sort_fieldif(ts.p.treeGrid){var idFiled = ts.p.keyName||"id",parentField=ts.p.treeReader.parent_id_field||"parentId",sortField = ts.p.treeReader.sort_field||idFiled;var i, l, treeData = [], tmpMap = {};for (i = 0, l = data.length; i < l; i++) {tmpMap[data[i][idFiled]] = data[i];//唯一 id 對應 rowobj}for (i = 0, l = data.length; i < l; i++) {//rowobj的父元素 找得到且不為自己if (tmpMap[data[i][parentField]] && data[i][idFiled] != data[i][parentField]) {//父元素 下掛children屬性裝 子元素 if (!tmpMap[data[i][parentField]]['children'])//初始化屬性tmpMap[data[i][parentField]]['children'] = [];tmpMap[data[i][parentField]]['children'].push(data[i]);} else {//找不到父元素 就為根元素 treeData.push(data[i]);}}function compareF(v1,v2){//按字符串排序if(v1['children']){v1['children'].sort(compareF);}if(v2['children']){v2['children'].sort(compareF);}if(v1[sortField]>v2[sortField]){return 1;}else if(v1[sortField]<v2[sortField]){return -1;}else{return 0;}}treeData.sort(compareF);//先排序function iteratorArray(resultArray,dataArray){dataArray.forEach(function(item,index,array){resultArray.push(item);if(item.children){iteratorArray(resultArray,item.children);}});}data = [];iteratorArray(data,treeData);}

添加if那段代碼就行了，并在treeReader中添加sort_field屬性指定排序字段就可以了。

上面代碼我們用了遞歸排序遞歸組織數據，會擔心性能問題，通過打印時間日志發現160多個菜單多級的不到1s.

總結

以上是生活随笔為你收集整理的jqgrid下treegrid排序问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。