1 jquery中有一个组件是结合tree和datagrid的。那就是treegrid。
如:<table id="treeGrid_test"></table>
初始化:$("#treeGrid_test").treegrid({
width:400,
height:300,
title:"treegrid测试",
idField:"id",//这是每个节点的主键
treeField:"name",//这是每个节点需要显示的内容(name)
animate:true,
columns:[[
{field:"name",title:"姓名",width:200},
{field:"id",title:"斧子节点的id名",width:180}]]
});
2 treegrid如果需要设置父子节点。那数据中子节点必须存在一个属性:_parentId。该属性表示这个节点的父节点是谁。如json数据:
{"total":4,"rows":
[{"id":1,"name":"aaa"},
{"id":2,"name":"bbba","_parentId":1},
{"id":3,"name":"cccb","_parentId":1},
{"id":4,"name":"dddc"}]
}
3 treegrid的初始化工作有两种方式:url和loadData。url的值为json格式的文件。而loadData为treegrid的method。参数为对象(满足total和rows存在的)
如:$("#treeGrid_test").treegrid({
width:400,
height:300,
title:"treegrid测试",
url:"./treegrid_test.json",
idField:"id",
treeField:"name",
animate:true,
columns:[[
{field:"name",title:"姓名",width:200},
{field:"id",title:"斧子节点的id名",width:180}]]
});
var obj_treegrid={"total":4,"rows":
[{"id":1,"name":"aaa"},
{"id":2,"name":"bbb","_parentId":1},
{"id":3,"name":"ccc","_parentId":1},
{"id":4,"name":"ddd"}]
};
$("#treeGrid_test").treegrid("loadData",obj_treegrid);
如:<table id="treeGrid_test"></table>
初始化:$("#treeGrid_test").treegrid({
width:400,
height:300,
title:"treegrid测试",
idField:"id",//这是每个节点的主键
treeField:"name",//这是每个节点需要显示的内容(name)
animate:true,
columns:[[
{field:"name",title:"姓名",width:200},
{field:"id",title:"斧子节点的id名",width:180}]]
});
2 treegrid如果需要设置父子节点。那数据中子节点必须存在一个属性:_parentId。该属性表示这个节点的父节点是谁。如json数据:
{"total":4,"rows":
[{"id":1,"name":"aaa"},
{"id":2,"name":"bbba","_parentId":1},
{"id":3,"name":"cccb","_parentId":1},
{"id":4,"name":"dddc"}]
}
3 treegrid的初始化工作有两种方式:url和loadData。url的值为json格式的文件。而loadData为treegrid的method。参数为对象(满足total和rows存在的)
如:$("#treeGrid_test").treegrid({
width:400,
height:300,
title:"treegrid测试",
url:"./treegrid_test.json",
idField:"id",
treeField:"name",
animate:true,
columns:[[
{field:"name",title:"姓名",width:200},
{field:"id",title:"斧子节点的id名",width:180}]]
});
var obj_treegrid={"total":4,"rows":
[{"id":1,"name":"aaa"},
{"id":2,"name":"bbb","_parentId":1},
{"id":3,"name":"ccc","_parentId":1},
{"id":4,"name":"ddd"}]
};
$("#treeGrid_test").treegrid("loadData",obj_treegrid);