Tree的增删改查（右键弹出菜单）

Tree的增删改查（右键弹出菜单）

不多说，直接上源码：

1、树的代码

<ul id="t1"></ul>

2、右键菜单代码

<div id="mm" class="easyui-menu" style="width:150px;">
        <div data-options="iconCls:'icon-add'" onclick="append()">添 加</div>
        <div data-options="iconCls:'icon-edit'" onclick="editor()">修 改</div>
        <div data-options="iconCls:'icon-remove'" onclick="removetree()">删 除</div>
        <div class="menu-sep"></div> 
        <div  data-options="iconCls:'icon-undo'" onclick="exit()">退出</div>
    </div>

3、添加和编辑的弹出框

<div id="info" class="easyui-dialog" style="width:400px;height: 180px;" closed=true>
        <form id="myform" method="post">
            <input type="hidden" name="id" value="">
            <table style="margin: auto;" cellspacing="10">
                <tr>
                    <td>名称</td>
                    <td><input class="easyui-textbox" name="name" value="" data-options="required:true"></td>
                </tr>
                <tr>
                    <td>备注：</td>
                    <td><input class="easyui-textbox" name="mark" value=""></td>
                </tr>
            </table>
            <div style="text-align: center; bottom: 15px; margin-top: 20px;">
                <a id="savebtn" class="easyui-linkbutton"
                    data-options="iconCls:'icon-save'" style="width: 20%;">保存</a> <a
                    id="cancelbtn" class="easyui-linkbutton"
                    data-options="iconCls:'icon-cancel'" style="width: 20%;">取消</a>
            </div>
        </form>
    </div>

4、js部分

var flag;//判断是添加还是修改的标记
    $(function(){
        $('#t1').tree({
            //发送异步ajax请求，还会携带id的参数
            url:'',//后台地址
            dnd:true,
            onDrop:function(target ,source, point){
                var tar=$('#t1').tree('getNode' , target);
                $.ajax({
                    type:'post',
                    url:'',
                    data:{
                        targetId:tar.id,
                        sourceId:source.id,
                        point:point
                    },
                    dataType:'json',
                    cache:false,
                    success:function(result){
                        if(result=='1'){
                            $.messager.show({
                                title:'提示信息',
                                msg:'操作成功！'
                            });
                        }else{
                            $.messager.show({ 
                                title : 'Error',
                                msg : result.msg
                            });
                        }
                    }
                });
            },
            //右键弹出菜单功能
            onContextMenu:function(e,node){
                //禁止浏览器的窗口打开
                e.preventDefault();
                //右键选中节点
                $(this).tree('select',node.target);
                $('#mm').menu('show',{
                    left:e.pageX,
                    top:e.pageY
                });
            }
        });
        //保存按钮
        $('#savebtn').click(function(){
            if(flag=='add'){
                //1做前台更新
                //（1）获取所选中的节点，也就是父节点
                var node=$('#t1').tree('getSelected'); 
                //2后台同步更新
                $.ajax({
                    type:'post',
                    url:'',
                    cache:false,
                    data:{
                        parentId:node.id,
                        name:$('#myform').find('input[name=name]').val(),
                        url:$('#myform').find('input[name=mark]').val()
                    },
                    dataType:'json',
                    success:function(result){
                        if(result=='1'){
                            //重新加载
                            var parent=$('#t1').tree('getParent',node.target);
                            $('#t1').tree('reload',parent.target);

                            $.messager.show({
                                title:'提示信息',
                                msg:'添加成功！'
                            });
                        }else{
                            $.messager.show({ 
                                title : 'Error',
                                msg : result.msg
                            });
                        }
                    }
                });
                //3关闭dialog
                $('#info').dialog('close');
                $('#myform').form('clear');
            }else{
                $.ajax({
                    type:'post',
                    url:'',
                    cache:false,
                    data:{
                        id:$('#myform').find('input[name=id]').val(),
                        name:$('#myform').find('input[name=name]').val(),
                        url:$('#myform').find('input[name=mark]').val()//注意此时为备注字段
                    },
                    dataType:'json',
                    success:function(result){
                        if(result=='1'){
                            //刷新节点，刷新选中节点的父亲
                            var node=$('#t1').tree('getSelected');
                            var parent=$('#t1').tree('getParent',node.target);
                            $('#t1').tree('reload',parent.target);
                            //提示信息
                            $.messager.show({
                                title:'提示信息',
                                msg:'修改成功！'
                            });
                        }else{
                            $.messager.show({ 
                                title : 'Error',
                                msg : result.msg
                            });
                        }
                    }
                });
            }
            //3关闭dialog
            $('#info').dialog('close');
            $('#myform').form('clear');

        });
        //取消按钮
        $('#cancelbtn').click(function(){
            $('#info').dialog('close');
            $('#myform').form('clear');
        });
    });

然后是点击菜单时调用的方法：

function append(){
        flag='add';//添加标记
$('#info').dialog('open').dialog('setTitle','增加');
        $('#myform').form('clear');
    }

    function editor(){
        flag='edit';
        //清空表单数据
        $('#myform').form('clear');
        //清空表单数据库，重新填充选中的节点里的id，name，url属性
        var node=$('#t1').tree('getSelected');
        $('#myform').form('load',{
            id:node.id,
            name:node.text,
            mark:node.attributes.url
        });
        //打开dialog
    $('#info').dialog('open').dialog('setTitle','修改');
    }

    function removetree(){
        //前台删除
        var node=$('#t1').tree('getSelected');
        $('#t1').tree('remove',node.target);
        //后台删除
    $.post('',{id:node.id},function(result){
            //给出提示信息
            if(result=='1'){
                $.messager.show({
                    title:'提示信息',
                    msg:'删除成功！'
                });
            }else{
                $.messager.show({ // show error message
                    title : 'Error',
                    msg : result.msg
                });
            }
        });
    }
    //退出菜单
    function exit(){
        $('#mm').menu('hide');
    }

运行结果如下：