jqgrid下treegrid排序问题

我不是女神ヾ 2022-06-15 12:39 188阅读 0赞

# 问题描述 #

**项目中用到的jqgrid的treegrid 从后台返回的数据必须是排好序的数据**，**不然 点击父节点 其直接的子节点 并不是在其 之下**。**这个问题相信用jqgrid的treegrid功能的同学都会遇到过**。

# 处理方案 #

**处理方案，要么在后台排序要么在前台排序呗**。

如果是在后台排序的话，**方式一 在表结构新增一个字段 专门 用于树的排序，方式二 指定表中某个字段排序 （注意是同级的按该字段排序）**。

**方式一比较简单 ，但是有个问题**，就是 这个 排序字段值的问题。比如实际项目中 我们的菜单排序 ，我们每个菜单 有个 menuNum ，如果为顶级菜单 那么 该菜单的 orderNum = menuNum，如果为子级菜单 那么 他的orderNum = 父级orderNum+本级的menuNum（注意是字符串拼接）。这样我们在 查树表格数据的时候就直接使用 order by orderNum 就可以得到 正确的顺序了，这样就保证了 子节点 一定是在相应的父节点之后。**但是我们更改了菜单的 menuNum 其对应的orderNum也得跟着改，其所有的子节点 都要改，这样就太麻烦了。楼主之前就是这样做的但是觉得不太科学**。

**那就用第二种方式，同级的按某个字段排序并且放到 相应的父级结点之后 通过代码来排序实现**。可以使用java代码实现，也可以通过JavaScript代码实现。**本人采用JavaScript在前台实现，主要是js对象添加属性很方便我们在java中就得用map的数据结构**。

在jqgrid的源码更改，在ajax返回数据后，对返回的treegrid数据进行排序。

![70][]

效果图：

![70 1][]

![70 2][]

# 修改代码段 #

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_field
    						if(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.

[70]: /images/20220615/4d8b6a4060294c42a08b3a3050fae276.png
[70 1]: /images/20220615/36bc3ddfc82943b8a843554e6d647001.png
[70 2]: /images/20220615/3101c101b61142738ced0192eb9e77a0.png