easyui-treegrid-例子

<%@page import="com.ata.pageModel.base.SessionInfo"%>
<%@page import="com.ata.util.base.Lan"%><%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
Object lan=session.getAttribute("LAN");
SessionInfo info=(SessionInfo)session.getAttribute("sessionInfo");
%>
<script type="text/javascript" charset="utf-8">
    var treegrid;
    $(function() {
        treegrid = $('#treegrid').treegrid({
                height:450,
                nowrap: false,
                rownumbers: true,
                animate:true,
                collapsible:true,
                idField:'code',
                treeField:'code',
                frozenColumns:[[
                    {title:'角色編碼',field:'code',width:100,
                        formatter:function(value){
                            return '<span style="color:red">'+value+'</span>';
                        }
                    }
                ]],
            columns:[[
                    {field:'name',title:'角色名稱',width:150},
                    {field:'addr',title:'上級角色',width:150,rowspan:2},
                    {field:'col4',title:'角色說明',width:150,rowspan:2}
                ]],
                data:[{
    "id":1,
    "code":"01",
    "name":"name1",
    "addr":"address1",
    "col4":"col4 data",
    "iconCls":"",
    "children":[{
        "id":2,
        "code":"0101",
        "name":"name11",
        "addr":"address11",
        "checked":true
    },{
        "id":3,
        "code":"0102",
        "name":"name12",
        "addr":"address12",
        "state":"closed"
    }]
},{
    "code":"02",
    "name":"Languages abc",
    "addr":"address2",
    "col4":"col4 data",
    "state":"closed",
    "children":[{
        "code":"0201",
        "name":"Java",
        "col4":"col4 data",
        "state":"closed",
        "children":[{
            "code":"02013",
            "name":"jdk1"
        },{
            "code":"02014",
            "name":"jdk2"
        }]
    },{
        "code":"0202",
        "name":"C#",
        "col4":"col4 data"
    }]
}]
            });
        });

    function edit() {
        var node = treegrid.treegrid('getSelected');
        if (node) {
            var p = parent.dj.dialog({
                title : '<%=Lan.lan("修改上下級關係",lan)%>',
                href : '${pageContext.request.contextPath}/relationMan!relationSet.do',
                data : {
                    deptId : node.deptId
                },
                width : 500,
                height : 280,
                buttons : [ {
                    text : '<%=Lan.lan("保存",lan)%>',
                    handler : function() {
                        var f = p.find('form');
                        f.form('submit', {
                            url : '${pageContext.request.contextPath}/dept!edit.do',
                            success : function(d) {
                                var json = $.parseJSON(d);
                                if (json.success) {
                                    //treegrid.treegrid('reload', node.deptId);
                                    treegrid.treegrid('remove', node.deptId);
                                    try{
                                        treegrid.treegrid('expandTo',p.find("#pid").combobox('getValue'));
                                        treegrid.treegrid('append',{
                                            parent: p.find("#pid").combobox('getValue'),  // 節點有一個'id'值,定義是經過'idField'屬性
                                            data: [{
                                                deptId: node.deptId,
                                                deptName: p.find("#deptName").val(),
                                                deptOrder: p.find("#deptOrder").val(),
                                                pid: p.find("#pid").combobox('getValue'),
                                                pname: p.find("#pid").combobox('getText'),
                                                deptDesc:p.find("#deptDesc").val()
                                            }]
                                        });
                                        treegrid.treegrid('reload',p.find("#pid").combobox('getValue'));
                                    }catch(e){
                                    
                                    }
                                    p.dialog('close');
                                //parent.ctrlTree.tree('reload');
                                }
                                parent.dj.messagerShow({
                                    msg : json.msg,
                                    title : '<%=Lan.lan("提示",lan)%>'
                                });
                            }
                        });
                    }
                },{
                    text : '<%=Lan.lan("取消",lan)%>',
                    handler : function() {
                            p.dialog('close');
                        }
                }],            
                onLoad : function() {
                    var f = p.find('form');
                    var pid = f.find('input[name=pid]');
//                    var iconCls = f.find('input[name=iconCls]');
//                    var iconCombo = iconCls.combobox({
//                        data : iconData,
//                        formatter : function(v) {
//                            return dj.fs('<span class="{0}" style="display:inline-block;vertical-align:middle;width:16px;height:16px;"></span>{1}', v.value, v.value);
//                        }
//                    });
                    var ptree = pid.combotree({
                        lines : true,
                        url : '${pageContext.request.contextPath}/dept!doNotNeedSession_treeRecursive.do',
                        onLoadSuccess : function() {
                            parent.$.messager.progress('close');
                        }
                    });
                    f.form('load', node);
                }
            });
        } else {
            parent.dj.messagerAlert('<%=Lan.lan("提示",lan)%>', '<%=Lan.lan("請選中要編輯的記錄！",lan)%>', 'error');
        }
    }
    
    
</script>
        <table id="treegrid"></table>