首页 > 代码库 > easy ui treegrid使用

easy ui treegrid使用

2024-07-02 21:38:29   225人阅读

返回数据格式：
{"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>




来自为知笔记(Wiz)


联系
我们