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文档有详细案例