jqGrid 排序和treeGird

最新推荐文章于 2021-03-01 22:18:19 发布

原创最新推荐文章于 2021-03-01 22:18:19 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jqgrid #html

WEB 专栏收录该内容

16 篇文章

订阅专栏

在使用jqGrid和treeGrid时遇到了排序难题，通过深入源码调试，发现在jquery.jqGrid.full.js的11025行，由于服务端返回的根节点标识为空字符串而非null，导致无法正确获取根节点，从而影响排序。解决方法是确保服务端返回的根节点标识为null。此外，列编辑需设置cellEdit和editable为true才可启用编辑功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这两天被jqGrid和treeGrid折腾的半死，本来很简单的配置，sortable:true，就能解决的排序的问题，但是我怎么配置都是不行，最后直接调试源码才发现

jquery.jqGrid.full.js的11025行有这么一句： rt = $(this).jqGrid("getRootNodes");我跟到这里发现获取的rt为空，然后继续跟getRootNodes方法，在10801行发现这如下这段代码

if(this[parent_id] === null || String(this[parent_id]).toLowerCase() == "null") {
result.push(this);
}

原来是parent要为空才会认为这个是跟节点，因为我是用treeGrid，所以排序是根据根节点排序。而我服务端跟节点返回的空字符串而不是null。真是汗啊~折腾2天了，omg

ps：列编辑：要配置cellEdit:true，然后还要在colModel里面配置editable:true，这样才能编辑

下面我用的demo

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<style>
body{
font-family:微软雅黑;
}
</style>
<link rel="stylesheet" type="text/css" media="screen" href="jqGrid/themes/redmond/jquery-ui-custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqGrid/themes/ui.jqgrid.css" />
<script type="text/javascript" src="jqGrid/js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="jqGrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="jqGrid/js/jquery.cookie.min.js"></script>
<script type="text/javascript" src="jqGrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="jqGrid/js/jquery.jqGrid.extend.js"></script>
<script>
$(document).ready(function(){
var topicjson={
   "response": [
          {
              "id": "1",
              "elementName": "1",
              leave:"0",parent:null, isLeaf:false, expanded:false, loaded:true
          },
          {
              "id": "1_1",
              "elementName": "2",
               leave:"1",parent:null, isLeaf:true, expanded:false, loaded:true
          },
          {
              "id": "1_2",
              "elementName": "3",
              leave:"1",parent:"1", isLeaf:false, expanded:false, loaded:true
          },
		  {
              "id": "1_2_1",
              "elementName": "4",
              leave:"2",parent:"1_2", isLeaf:true, expanded:false, loaded:true
          },
          {
              "id": "2",
              "elementName": "5",
              leave:"1",parent:null, isLeaf:false, expanded:true, loaded:true
          },
          {
              "id": "2_1",
              "elementName": "6",
             leave:"1", parent:"2", isLeaf:true, expanded:false, loaded:true
          },
          {
              "id": "2_2",
              "elementName": "7",
             leave:"1", parent:"2", isLeaf:true, expanded:false, loaded:true
          }
      ]
   },
   grid;
var lastsel;
grid = jQuery("#treegrid2");
grid.jqGrid({
   datastr: topicjson,
   datatype: "jsonstring",
   height: "auto",
   colNames: ["id","Items","url"],
   colModel: [
       {name: "id",width:200,sortable:true,editable:false, hidden:false, key:true},
       {name: "elementName",sortable:true, editable:true,width:250, resizable: false},
       {name: "url",width:1,sortable:true, editable:false,hidden:true}
   ],
   treeGrid: true,
   sortable:true,
   treeGridModel: "adjacency",
   ExpandColumn: "id",
   treeIcons: {plus:'ui-icon-triangle-1-e',minus:'ui-icon-triangle-1-s',leaf:'ui-icon-radio-off'},
   caption: "jqGrid Demos",
   jsonReader: {
       repeatitems: false,
       root: "response"
   },
			   	loadComplete: function(data){//加载完毕事件
			   		if(data){
			   			// 用来保存树每个层级的未级节点
							lastChildIdObj = {};
						$.each(data,function(i,val){
							var $tr = $("#" + val.id);
							$tr.addClass("tree_level_" + val["level"]);
							// 如果不是叶子节点则加粗
							if (val["isLeaf"] === false) {
								$tr.addClass("jqparent bill_item");
							}
							
							// 记录最后的节点
							var parent = $.trim(val["parent"]),
								isLeaf = $.trim(val["isLeaf"]),
								level = $.trim(val["level"]),
								key;
	
							if (level === "2" && isLeaf === "true") {//使用parent作为key，保证遍历后，获得的为每个子节点的最后一个数据
								key = parent;
								lastChildIdObj[key] = val["id"];
							} else if (level === "3") {
								key = parent;
								lastChildIdObj[key] = val["id"];
							}
						});
							$.each(lastChildIdObj, function (key, rowId) {//遍历修改每个子节点样式
								$("#" + rowId).addClass("tree-last");
						});
					}
			   	}
});
});

</script>
<body>
	<table id="treegrid2"></table>
</body>
</html>