easy ui treegrid使用
返回数据格式：
{"total":7,"rows":[
{"id":1,"name":"All Tasks","begin":"3/4/2010","end":"3/20/2010","progress":60,"iconCls":"icon-ok"},
{"id":2,"name":"Designing","begin":"3/4/2010","end":"3/10/2010","progress":100,"_parentId":1,"state":"closed"},
{"id":21,"name":"Database","persons":2,"begin":"3/4/2010","end":"3/6/2010","progress":100,"_parentId":2},
{"id":22,"name":"UML","persons":1,"begin":"3/7/2010","end":"3/8/2010","progress":100,"_parentId":2},
{"id":23,"name":"Export Document","persons":1,"begin":"3/9/2010","end":"3/10/2010","progress":100,"_parentId":2},
{"id":3,"name":"Coding","persons":2,"begin":"3/11/2010","end":"3/18/2010","progress":80},
{"id":4,"name":"Testing","persons":1,"begin":"3/19/2010","end":"3/20/2010","progress":20}
],"footer":[
{"name":"Total Persons:","persons":7,"iconCls":"icon-sum"}
]}
js初始：
$('#tt').treegrid({
url: '/Category/GetAllCategory',
title: '分类列表',
width: 700,
height: 500,
animate: true,
fitColumns: true,
rownumbers: false,
collapsible: true,
idField: 'ID',
treeField: 'CatName',
loadMsg: '正在加载分类信息...',
pagination: true,
singleSelect: false,
pageSize: 20,
pageNumber: 1,
pageList: [10, 20, 30],
//queryParams: queryData, //异步查询的参数
columns: [[
{ field: 'ck', checkbox: true, align: 'left', width: 50 },
{ field: 'ID', title: '编号', width: 50 },
{ field: 'CatName', title: '分类名', width: 150 },
//{ field: 'ParentId', title: '父级编号', width: 80 },
{ field: 'TreePath', title: '树目录', width: 80 },
{ field: 'Level', title: '级别', width: 80 },
{
field: 'IsLeaf', title: '是否是叶子节点', width: 120,
formatter: function (value, row, index) {
if (value == true) {
return "是";
} else {
return "否";
}
}
}
]],
toolbar: [{
id: 'btnAdd',
text: '添加',
iconCls: 'icon-add',
handler: function () {
//添加
$("#showDialog").dialog("setTitle", "添加分类").dialog("open");
$("#showWindow").attr("src", "/Category/Create");
}
},
{
id: 'btnEdit',
text: '修改',
iconCls: 'icon-edit',
handler: function () {
//修改
var rows = $("#tt").datagrid("getSelections");
if (rows.length != 1) {
$.messager.alert("提示", "请选择一条数据");
return;
}
$("#showDialog").dialog("setTitle", "修改角色").dialog("open");
$("#showWindow").attr("src", "/Roles/Edit?ID=" + rows[0].ID);
}
},
{
id: 'btnDel',
text: '删除',
iconCls: 'icon-remove',
handler: function () {
//删除
var rows = $("#tt").datagrid("getSelections");
if (rows.length > 0) {
$.messager.confirm("提示", "确定要删除吗？", function (b) {
if (b) {
var ids = "";
for (var i = 0; i < rows.length; i++) {
ids += rows[i].ID + ",";
}
ids = ids.substring(0, ids.length - 1);
$.post("/Roles/Delete", { ids: ids }, function (data) {
if (data == "ok") {
$("#tt").datagrid('reload');
$("#tt").datagrid("clearSelections");
} else {
$.messager.alert("提示", "删除失败");
}
});
}
});
}
else {
$.messager.alert("提示", "请选择要删除的行");
}
}
}]
});Html：
<table id="tt" style="width: 700px;" title="分类列表">
</table>