easyUI的可编辑树

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>用户管理</title>    <link rel="stylesheet" type="text/css" href="css/treeMenu.css" />    <link rel="stylesheet" type="text/css" href="css/easyui.css">    <script src="js/jquery-1.11.3.js"></script>    <script type="text/javascript" src="js/jquery.min.js"></script>    <script type="text/javascript" src="js/jquery.easyui.min.js"></script><style>        /*1级*/        .easyui-tree > li > div {            width: 100%;            height: 36px;            background-color: rgba(14,156,245,0.4);            border-bottom: 1px #1D3442 solid;           font-size:0.875em ;           color:#fff;           font-family:"Microsoft YaHei";                    }        @media \0screen\,\screen\9 {            .easyui-tree > li > div {                position: static;                background-color: #0E9CF5;                *zoom: 1;                filter: alpha(opacity=40);            }        }        /*2*/        .easyui-tree > li ul li .tree-node {            width: 100%;            height: 36px;            background-color: rgba(14,156,245,0.2);            border-bottom: 1px #1D3442 solid;             font-size:0.875em ;           color:#fff;            font-family:"Microsoft YaHei";        }        @media \0screen\,\screen\9 {            .easyui-tree > li ul li .tree-node {                position: static;                background-color: #0E9CF5;                *zoom: 1;                filter: alpha(opacity=20);            }        }        /*3*/        .easyui-tree > li ul li > ul li .tree-node {            width: 100%;            height: 36px;             background:url('') ;            background-color: rgba(14,156,245,0.1);            border-bottom: 1px #1D3442 solid;             font-size:0.875em ;           color:#fff;            font-family:"Microsoft YaHei";        }        @media \0screen\,\screen\9 {            .easyui-tree > li ul li > ul li .tree-node {                position: static;                background-color: #0E9CF5;                *zoom: 1;                filter: alpha(opacity=20);            }        }        /*1级的下拉按钮*/          .easyui-tree > li > div span:first-child{                 background:url('img/seldown.png') no-repeat 90% 50%;                 float:right;                 margin-right:20px;                 margin-top:11px;          }          /*2级的下拉按钮*/           .easyui-tree > li ul li .tree-node span:nth-child(2){                background:url('img/seldown.png') no-repeat 90% 50%;                 float:right;                 margin-right:20px;                 margin-top:11px;           }           .zhankai{                background:url('img/zhankai.png') no-repeat 90% 50%;                 float:right;                 margin-right:20px;                 margin-top:11px;           }                     /*移动变色*/           .tree-node-hover{               background-color:rgba(254,138,35,0.4) !important ;           }             @media \0screen\,\screen\9 {            .tree-node-hover {                position: static;                background-color: #fe8a23 !important;                *zoom: 1;                filter: alpha(opacity=40);            }        }    </style>index.html  <!--设置-->    <div id="monitoring">        <div id="leftArea">            <div id="btn">                <button class="btnitem" id="add">新建</button>                <button class="btnitem" id="edit">修改</button>                <button class="btnitem" id="remove">删除</button>            </div>            <div class="affixbox ">                <div class="easyui-tree" style="padding:5px">                    <ul id="tt" class="easyui-tree" data-options="url: 'tree_data.json',method: 'get',animate: true,onClick: function(node){$(this).tree('beginEdit',node.target);}"></ul>                </div>            </div>        </div>        <iframe id="rightArea" src="permission.html"></iframe>    </div>

 <script src="js/treeMenu.js"></script>
    <script>
        $('#tt').tree({
            url: 'tree_data.json'
        });
        $('#tt').tree({
            url: 'tree_data.json',
            loadFilter: function (data) {
                if (data.d) {
                    return data.d;
                } else {
                    return data;
                }
            }
        });
        $('  .easyui-tree > li > div span:first-child').click(function () {
            $(this).attr('style','background:url("img/zhankai.png") no-repeat 90% 50%');
        })

    </script>

tree_data.json

    [{        "id":1,      "text": "guangxun",              "children":[{    "text":"yanfa",    "state":"open",    "attributes":{    "url":"/demo/book/abc",    "price":100    },    "children":[{    "text":"lingdao",    "checked":true    }]        },{    "text":"xiaoshou",    "state":"open",    "attributes":{    "url":"/demo/book/abc",    "price":100    },    "children":[{    "text":"lingdao",    "checked":true    }]        }]    },{        "text":"yunke",        "state":"closed",        "children":[{    "text":"Java"        },{    "text":"C#"        }]    }]

easyUI文档有详细案例