2015年11月25日 JavaScript Coding 浏览(218)

ztree 构建菜单树新增、删除、更新节点源码分享

很多功能模块需要使用到Tree树结构。例如云码网使用的类目、菜单的维护,均采用了树结构来进行加载、增删改的维护。


云码网经过多番筛选,发现ztree是功能最全,最好用的树插件之一。


效果图如下:

QQ图片20151125160208.png


功能源码如下:

var zTree,treeMenu;
var setting = {
        async: {
            enable: true,
            url:$('#baseUrl').val() + "/menu/tree.do",
            autoParam:["id", "name"]
            //otherParam:{"otherParam":"zTreeAsyncTest"},
            //dataFilter: filter
        },
        callback:{
            onRightClick:OnRightClick
        }
    };
function OnRightClick(event, treeId, treeNode) {
    zTree.selectNode(treeNode);
    showRMenu(event.clientX, event.clientY);
}

function showRMenu(x, y) {
    if($('.treeMenu').length == 0){
        var menuHtml = 
            "<div class=\"treeMenu\">\n" +
            "<ul>\n" + 
            "<li onclick=\"addTreeNode()\" ><a href=\"javascript:void(0);\" >新增</a></li>\n" + 
            "<li onclick=\"removeTreeNode()\" class=\"del-menu\"><a href=\"javascript:void(0);\">删除</a></li>\n" + 
            "<li onclick=\"updateTreeNode()\" class=\"upt-menu\"><a href=\"javascript:void(0);\">修改</a></li>\n" + 
            "<li onclick=\"hideRMenu()\"><a href=\"javascript:void(0);\">取消</a></li>\n" + 
            "</ul>\n" + 
            "</div>";
        $('body').append(menuHtml);
        treeMenu = $(".treeMenu");
    }
    var selectNode = zTree.getSelectedNodes()[0];
    if (selectNode && selectNode.id == 0) {
        $('.del-menu,.upt-menu').hide();
    } else {
        $('.del-menu,.upt-menu').show();
    }
    $('.treeMenu').css({
        'position':'absolute',
        'z-index' : 99,
        'left':x,
        'top':y,
    }).show();

    $("body").bind("mousedown", onBodyMouseDown);
}

function hideRMenu() {
    if (treeMenu) treeMenu.hide();
    $("body").unbind("mousedown", onBodyMouseDown);
}

function onBodyMouseDown(event){
    if (!(event.target.id == "treeMenu" || $(event.target).parents(".treeMenu").length>0)) {
        treeMenu.hide();
    }
}

function updateTreeNode() {
    hideRMenu();
    var selectNode = zTree.getSelectedNodes()[0];
    var updateHtml = 
        "<div id=\"updateTreeNode\" class=\"m20\">\n" +
        "    <table>\n" + 
        "      <tr><td>菜单名称</td><td><input type=\"text\" class=\"input\" name=\"name\" id=\"updateNodeName\" value=\""+selectNode.name+"\"/></td></tr>\n" + 
        "      <tr><td>菜单URL</td><td><input type=\"text\" class=\"input\" name=\"url\" id=\"updateNodeUrl\" value=\""+selectNode.url+"\"/></td></tr>\n" + 
        "      <tr><td>菜单图标</td><td><input type=\"text\" class=\"input\" name=\"icon\" id=\"updateIcon\" value=\""+selectNode.icon+"\"/></td></tr>\n" + 
        "      <tr><td>菜单排序</td><td><input type=\"text\" class=\"input\" name=\"orderNo\" id=\"updateNodeOrderNo\" value=\""+selectNode.orderNo+"\" onkeyup=\"(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)\"/></td></tr>\n" + 
        "    </table>\n" + 
        "</div>";

    ymPrompt.win({
        title:'菜单修改',
        message:updateHtml,
        width:300,
        height:180,
        btn:[['修改','yes'],['取消','cancel']],
        handler:function(btn){
            var param = {};
            param['title'] = $('#updateNodeName').val();
            param['url'] = $('#updateNodeUrl').val();
            param['orderNo'] = $('#updateNodeOrderNo').val();
            param['icon'] = $('#updateIcon').val();
            param['id'] = selectNode.id;
            if (btn == 'yes') {
                $.post($('#baseUrl').val() + "/menu/update.do",param,function(result){
                    if (result.code == 0) {
                        selectNode.name = param['title'];
                        selectNode.url = param['url'];
                        selectNode.orderNo = param['orderNo'];
                        selectNode.icon = param['icon'];
                        zTree.updateNode(selectNode);
                    } else {
                        alert('更新菜单异常!');
                    }
              },'json');
            }
        }});
}

function addTreeNode() {
    hideRMenu();
    var addHtml = 
        "<div id=\"addTreeNode\" class=\"m20\">\n" +
        "    <table>\n" + 
        "      <tr><td>菜单名称</td><td><input type=\"text\" class=\"input\" name=\"name\" id=\"addNodeName\"/></td></tr>\n" + 
        "      <tr><td>菜单URL</td><td><input type=\"text\" class=\"input\" name=\"url\" id=\"addNodeUrl\"/></td></tr>\n" + 
        "      <tr><td>菜单图标</td><td><input type=\"text\" class=\"input\" name=\"icon\" id=\"addIcon\"/></td></tr>\n" + 
        "      <tr><td>菜单排序</td><td><input type=\"text\" class=\"input\" name=\"orderNo\" value=\"0\" id=\"addNodeOrderNo\" onkeyup=\"(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)\"/></td></tr>\n" + 
        "    </table>\n" + 
        "</div>";

    ymPrompt.win({
        title:'新增菜单',
        message:addHtml,
        width:300,
        height:180,
        btn:[['保存','yes'],['取消','cancel']],
        handler:function(btn){
            var param = {};
            param['title'] = $('#addNodeName').val();
            param['url'] = $('#addNodeUrl').val();
            param['orderNo'] = $('#addNodeOrderNo').val();
            param['icon'] = $('#addIcon').val();
            var selectNode = zTree.getSelectedNodes()[0];
            param['pid'] = selectNode.id;
            if (btn == 'yes') {
                $.post($('#baseUrl').val() + "/menu/add.do",param,function(result){
                    if (result.code == 0) {
                        var node = {};
                        node['id'] = result.data;
                        node['name'] = param['title'];
                        node['url'] = param['url'];
                        node['orderNo'] = param['orderNo'];
                        node['icon'] = param['icon'];
                        zTree.addNodes(selectNode, node);
                    } else {
                        alert('保存菜单异常!');
                    }
              },'json');
            }
        }});
}

function removeTreeNode() {
    hideRMenu();
    var nodes = zTree.getSelectedNodes();
    var param = {};
    param ['id'] = nodes[0].id;
    if (nodes && nodes.length>0) {
        if (nodes[0].isParent) {
            var msg = "正在删除的是父节点菜单【"+nodes[0].name+"】,如果删除将连同子菜单一起删掉。\n\n请确认!";
            ymPrompt.confirmInfo({title:'警告',message:msg,handler:function(v){
                if (v == 'ok') {
                    $.post($('#baseUrl').val() + "/menu/delete.do",param,function(result){
                        if (result.code == 0) {
                            zTree.removeNode(nodes[0]);
                        } else {
                            alert('删除菜单异常!');
                        }
                  },'json');
                }}
            });
        } else {
            ymPrompt.confirmInfo({title:'提醒',message:'确认删除菜单:'+nodes[0].name+'?',handler:function(v){
                if (v == 'ok') {
                    $.post($('#baseUrl').val() + "/menu/delete.do",param,function(result){
                        if (result.code == 0) {
                            zTree.removeNode(nodes[0]);
                        } else {
                            alert('删除菜单异常!');
                        }
                  },'json');
                }
            }});
        }
    }
}

function checkTreeNode(checked) {
    var nodes = zTree.getSelectedNodes();
    if (nodes && nodes.length>0) {
        zTree.checkNode(nodes[0], checked, true);
    }
    hideRMenu();
}

function resetTree() {
    hideRMenu();
    $.fn.zTree.init($("#menuTree"), setting);
}

$(function() {
    $.fn.zTree.init($("#menuTree"),setting);
    zTree = $.fn.zTree.getZTreeObj("menuTree");
});


用户头像