jqGrid 排序和treeGird

在使用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>


<!DOCTYPE html> <html xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My First Grid</title> <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min14ed.css" /> <link rel="stylesheet" type="text/css" media="screen" href="jqgrid/ui.jqgridffe4.css" /> <style> html, body { margin: 0; padding: 0; font-size: 75%; } </style> [removed][removed] [removed][removed] [removed][removed] [removed] $(document).ready(function(){ $.jgrid.defaults.styleUI="Bootstrap"; var topicjson={ "response": [ { "id": "1", "elementName": "Grouping", "url":"/asd/asda", level:"0", parent:"", isLeaf:false, expanded:false, loaded:true }, { "id": "1_1", "elementName": "Simple Grouping", "url":"/asd/12", level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true }, { "id": "1_2", "elementName": "May be some other grouping", "url":"/asd/14342", level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true }, { "id": "2", "elementName": "CustomFormater", level:"0", parent:"", isLeaf:false, expanded:false, loaded:true }, { "id": "2_1", "elementName": "Image Formatter", level:"1", parent:"2", isLeaf:true, expanded:false, loaded:true }, { "id": "2_3", "elementName": "Anchor Formatter", level:"1", parent:"2", isLeaf:true, expanded:false, loaded:true } ] }, grid; grid = jQuery("#jsonmap"); grid.jqGrid({ datastr: topicjson, datatype: "jsonstring", height: "auto", loadui: "disable", colNames: ["id","Items","url"], colModel: [ {name: "id",width:200, hidden:true, key:true}, {name: "elementName", editable:true,width:250, resizable: false}, {name: "url",width:200, editable:true,hidden:false} ], treeGrid: true, treeGridModel: "adjacency", ExpandColumn: "elementName", treeIcons: {leaf:'ui-icon-document-b'}, caption: "jqGrid Demos", autowidth: true, rowNum: 10000, ExpandColClick: true, jsonReader: { repeatitems: false, root: "response" }, onSelectRow: function(id){ } }); }); [removed] </head> <body> <table id="jsonmap" ></table> </body> </html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值