treegrid scheduling problem under jqgrid

Keywords: Attribute Java Javascript JSON

The data returned from the background by treegrid of jqgrid used in the project must be ordered data, otherwise clicking on the parent node and its direct child node are not below it.

This problem is believed to be encountered by students who use the treegrid function of jqgrid. Processing options can be sorted either in the background or in the foreground. If it is sorted in the background, the first way is to add a new field in the table structure for tree sorting, and the second way is to specify a field sorting in the table (note that it is sorted by the field at the same level). The first method is relatively simple, but there is a problem, that is, the value of the sorted field. For example, in the actual project, our menu sorting, we have a menuNum for each menu, if it is a top-level menu, then the orderNum = menuNum for the menu, if it is a sub-level menu. Then his orderNum = parent orderNum + native menuNum (note string splicing). In this way, we can get the correct order by using order by order Num directly when we look up the data in the tree table, which ensures that the child node must be after the corresponding parent node. But if we change menuNum of menu and its corresponding orderNum, we have to change all of its sub-nodes, which is too troublesome. That's what the landlord did before, but it's not very scientific. In the second way, the same level is sorted by a field and placed at the corresponding parent node, which is sorted by code. It can be implemented using java code or JavaScript code. I use JavaScript to implement in the foreground, mainly because adding attributes to js objects is very convenient for us to use map data structure in java.

After the source code changes in jqgrid, the returned treegrid data is sorted after ajax returns the data.

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) {
						/**
						 * If the parent-child relationship is correct, it can be sorted according to the specified field.
						 * Tree table foreground sorting, tree table must have a primary key without default id. There is no need for background sorting.
						 * Be sure to specify that the sort fields are sorted by the sort fields at the same level (add sort_field attribute to the tree Reader option) and not by the primary key.
						 */
						//treegrid sorted by ts.p.treeReader.sort_field at the same level
						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];//Unique id corresponds to rowobj
							}
							for (i = 0, l = data.length; i < l; i++) {
										//The parent element of rowobj is found and not for itself
										if (tmpMap[data[i][parentField]] && data[i][idFiled] != data[i][parentField]) {
										    //Hang the child attribute under the parent element to install the child element	
											if (!tmpMap[data[i][parentField]]['children'])//Initialization properties
												tmpMap[data[i][parentField]]['children'] = [];
											tmpMap[data[i][parentField]]['children'].push(data[i]);
										} else {
										//If the parent element is not found, it is the root element.	
											treeData.push(data[i]);
										}
							}
							function compareF(v1,v2){//Sort by string
								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);//Sort first
							function iteratorArray(resultArray,dataArray){
								dataArray.forEach(function(item,index,array){
									resultArray.push(item);
									if(item.children){
										iteratorArray(resultArray,item.children);
									}
								});
							}
							data = [];
							iteratorArray(data,treeData);//Reorganization of data
						}



Add the red code, and add sort_field attribute to treeReader to specify the sort field.


   


        
    

Posted by jay7981 on Tue, 25 Jun 2019 14:09:26 -0700