Easyui Tree对节点进行，添加，修改，删除操作

2017-03-15

EasyUI 树形菜单添加节点展示如何对节点进行一系列的操作

Easyui Tree对节点进行，添加，修改，删除操作

<ul id="tree"></ul>
<div id="nav" class="easyui-menu" style="width:120px;">
    <div id="add"  data-options="iconCls:'icon-add'">添加</div>
    <div  data-options="iconCls:'icon-add'">修改</div>
    <div id="remove" data-options="iconCls:'icon-remove'">移除</div>
</div>

$(function(){
    $('#tree').tree({
        //state状态该节点目录是否展开 默认是展开open/closed
        // id是目录节点
        url:'../json/tree.json',
        method:'POST',
        animate:true,//定义节点在展开收缩是否动画效果
        checkbox:true,//定义在每个节点之前是否显示复选框
        cascadeCheck:false,//定义是否叠选中状态 默认为true
        onlyLeafCheck:true,////叶子结点添加复选框
        lines:true,//是否显示树控件上的虚线
        dnd:false,//是否启用拖拽功能
        //拖拽节点
        onDrop:function(target,source,point){
           var tar = $('#tree').tree('getNode',target);
           $.ajax({
               type:'post',
               url:'',
               data:{
                  targetId:tar.id,
                   sourceId:sourceId.id,
                   point:point
               },
               dataType:'json',
               cache:false,
               success:function(result){
                   $.messager.show({
                       title:'显示成功',
                       msg:'操作成功'
                   })
               }
           })
        },
        //全部展开节点
        onLoadSuccess : function(node,data){
            console.log(node);
            console.log(data);
            if(data){
                $(data).each(function (index, value) {
                    if (this.state == 'closed') {
                        $('#box').tree('expandAll');
                    }
                });
            }
        },
        onClick:function(node){//单击node事件
            console.log(node.text);
        },
        onContextMenu: function(e, node){
            e.preventDefault();
            // 查找节点
            $('#tt').tree('select', node.target);
            // 显示快捷菜单
            $('#nav').menu('show', {
                left: e.pageX,
                top: e.pageY
            });
        },

        //加载失败提示
        onLoadError:function(){
            alert('加载失败')
        }
    });
    //新增
    $('#add').click(function(){
        flag = 'add';
        $('#mydiv').dialog('open')
    });

    //修改
    $('#editor').click(function(){
        flag = 'edit';
        //清空表单 在重新填充节点
        $('#myform').form('clear');
        var node = $('#DirectoryTree').tree('getSelected');
        //console.log(node);
        $('#myform').form('load',{
            id:node.id,
            tetx:node.text,
            url:node.url
        });
        $('#mydiv').dialog('open')
    });
    //删除节点
    $('#remove').click(function(){
        var node  =  $('#DirectoryTree').tree('getSelected');
        $('#DirectoryTree').tree('remove',node.target);
        $.ajax({
            type:'post',
            url:'../json/easyui_tree.json',
            data:{
                id:node.id,
            },
            dataType:'json',
            success:function(data){
                $.messager.show({
                    title:'显示成功',
                    msg:'操作成功'
                })
            }
        })
    });
     //保存按钮
    $('#savebtn').click(function(){
        if(flag=='add'){
          //获取所选中的节点 也是父节点
            var parent = $('#DirectoryTree').tree('getSelected');
            $('#DirectoryTree').tree('append', {
                parent: parent.target,
                data:{
                    text:$('#myform').find('input[name=name]').val(),
                    attributes:{//attributes: 被添加到节点的自定义属性。
                        url:$('#myform').find('input[name=url]').val()
                    }
                }
            });
            //后台同步更新
            $.ajax({
                type:'post',
                url:'../json/easyui_tree.json',
                cache:false,
                data:{
                    parentId:parent.id,
                    mame:$('#myform').find('input[name=name]').val(),
                    url:$('#myform').find('input[name=url]').val()
                },
                dataType:'json',
                success:function(data){
                    $.messager.show({
                           title:'显示成功',
                           msg:'操作成功'
                    })
                }
            });
            $('#mydiv').dialog('close')//关闭
        }else if(flag=='edit'){
            $.ajax({
                type:'post',
                url:'../json/easyui_tree.json',
                cache:false,
                data:{
                    id:$('#myform').find('input[name=id]').val(),
                    mame:$('#myform').find('input[name=name]').val(),
                    url:$('#myform').find('input[name=url]').val()
                },
                dataType:'json',
                success:function(data){
                    //刷新节点 一定是选中节点的父节点
                   var node  =  $('#DirectoryTree').tree('getSelected');
                   //获取父节点
                    var parent =
                    $('#DirectoryTree').tree('getParent',node.target);
                    $('#DirectoryTree').tree('reload',parent.target);
                }
            });
            $('#mydiv').dialog('close')//关闭
        }
    });
    //取消按钮
    $('#cancelbtn').click(function(){
        $('#mydiv').dialog('close')
    });
});