jqGrid 排序和treeGird

来源：互联网发布：linux审计日志分析编辑：程序博客网时间：2024/06/03 20:46

这两天被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>

0 0