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