(礼拜四log)zTree插件扩展

辛辛苦苦的码了一个礼拜的成果。。。

单选框：

<%@ tag language="java" pageEncoding="UTF-8"%>
<%@ include file="/views/include/taglib.jsp"%>

<%@ attribute name="id" type="java.lang.String" required="true" description="hidden input DOM ID"%>
<%@ attribute name="name" type="java.lang.String" required="true" description="input默认显示字段"%>
<%@ attribute name="formName" type="java.lang.String" required="true" description="隐藏域name"%>
<%@ attribute name="defaultName" type="java.lang.String" required="true" description="默认值"%>
<%@ attribute name="style" type="java.lang.String" required="true" description="tree选择控制"%><!-- data-choiseMode 设置是否只有最末尾节点执行动作 分别为：all、rootOnly-->
<%@ attribute name="placeHolder" type="java.lang.String" required="true" description="input为空时显式的提示字段"%>
<%@ attribute name="alertMsg" type="java.lang.String" required="true" description="弹出框提示文字"%>
<%@ attribute name="url" type="java.lang.String" required="true" description="异步加载地址"%>

<div class="dropdown myMenu" data-default="${defaultName}">
    <div class="input-group" data-first="1">
        <input type="text" readonly="readonly" class="form-control validate_spical required" name="${id}_text" id="${id}_text" value="${name}" placeholder="${placeHolder}"/>
        <input type="hidden" name="${formName}" id="${id}" value="${defaultName}"/>
        <span class="input-group-addon">
            <i class="fa fa-angle-down"></i>
        </span>
    </div>
    <div class="dropdown-menu">
        <div class="treeMenu">
            <ul id="${id}_tree" class="ztree ztree-basic" style="min-height:0"></ul>
        </div>
        <div class="menuButtonBar">
            <a class="dropdown-cfm" data-choiseMode="${style}">确定</a><!-- data-choiseMode 设置是否只有最末尾节点执行动作 分别为：all、rootOnly-->
            <a class="dropdown-cnl">清除</a>
        </div>
    </div>
</div>

<script type="text/javascript">

    (function($){
        var defaultL = "${defaultName}";
        var treeName = "#"+"${id}"+"_tree";
        var treeNameId = "${id}"+"_tree";
        var zTreeObj;
        var hiddenInputId = "#"+"${id}";

        if(defaultL==""){
            defaultL = "noDefault";
            $(treeName).parents(".dropdown").attr("data-default",defaultL);
        }
        $(".dropdown[data-default="+defaultL+"]").children(".input-group").click(function() {
            if($(this).attr("data-first")=="1"){
                zTreeObj = $.fn.zTree.init($(treeName), setting, zNodes);
                $(this).attr("data-first","0");
            }
            var menu = $(this).siblings(".dropdown-menu");
            if(menu.is(":hidden")){
                menu.show();
            }
        });


        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
        var zNodes = [];
        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting = {
            async:{
                enable:true,
                url:"${url}",
                type:"get"
            },
            view:{
                expandSpeed:""
            },
            callback: {
                onClick: zTreeOnClick,
                onDblClick: zTreeOnDblClick,
                onAsyncSuccess: zTreeOnAsyncSuccess
            }
        };
        // 单击事件回调函数
        // input text中显示的名称
        var choisedItem = "";
        // 保存数据的input id
        var choisedName = "";
        // 需要保存的数据
        var choisedID = "";

        // 加载数据
        function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
            //console.log("zTreeOnAsyncSuccess/" + treeId);
            zNodes = msg;
            var $defaultName = $("#"+treeId).parents(".dropdown");
            if(defaultL!=""){
                var nodes1 = zTreeObj.getNodesByParam("id", defaultL, null);
                if(nodes1.length!=0){
                    choisedItem = nodes1[0].name;
                    choisedID = nodes1[0].id;
                    zTreeObj.selectNode(nodes1[0]);
                    showName(treeName,hiddenInputId,choisedItem,choisedID);
                }
            }
        };
        function zTreeOnClick(event, treeId, treeNode) {
            choisedItem = "";
            choisedID = "";
            var choiseMode = $(treeName).parents(".dropdown-menu").find(".dropdown-cfm").attr("data-choiseMode");
            //console.log(treeObj);
            var nodes = zTreeObj.getSelectedNodes(); // 被选中的节点集合
            if(nodes.length>1){
                alert("对不起，此为单选模式");
                var nodeCancel = nodes.pop();
                zTreeObj.cancelSelectedNode(nodeCancel);
            }
            if(choiseMode=="all"){
                //do nothing
            }else if(choiseMode=="rootOnly"){
                //console.log(nodes.length+"(length1)");
                if(nodes[0].isParent==true){
                    alert("对不起，不能选择父级节点");
                    zTreeObj.cancelSelectedNode(nodes[0]);
                    nodes = [];
                }
            }else{
                alert("模式字段填写错误");
            }
            //console.log(nodes.length+"(length)");
            if(nodes.length>0){
                choisedItem = nodes[0].name;
                choisedID = nodes[0].id;
            }else{
                choisedItem = "";
                choisedID = "";
            }
        };

        function showName(treeName,choisedName,name,id){
            $(treeName).parents(".dropdown-menu").siblings(".input-group").children(".form-control").val(name);
            $(choisedName).val(id);
        }
        // 双击事件
        function zTreeOnDblClick(event, treeId, treeNode) {
            var choiseMode = $(treeName).parents(".dropdown-menu").find(".dropdown-cfm").attr("data-choiseMode");
            hiddenInputId
            if(choiseMode=="all"){
                choisedItem = treeNode.name;
                choisedID = treeNode.id;
                showName(treeName,hiddenInputId,choisedItem,choisedID);
                treeHide($(treeName).parents(".dropdown-menu"));
            }else if(choiseMode=="rootOnly"){
                if(!treeNode.isParent){
                    choisedItem = treeNode.name;
                    choisedID = treeNode.id;
                    showName(treeName,hiddenInputId,choisedItem,choisedID);
                    treeHide($(treeName).parents(".dropdown-menu"));
                }
            }
        };
        // 点击其他位置 隐藏
        $(document).click(function(){
            $(".dropdown-menu").hide();
            var idOld = $(treeName).parents(".dropdown").find("input[type=hidden]").val();
            //console.log(idOld+"idOld");
            if(idOld!=""){
                if(zTreeObj!=null){
                    var nodes0 = zTreeObj.getNodesByParam("id", idOld, null);
                    if(nodes0.length>0){
                        choisedItem = nodes0[0].name;
                        choisedID = nodes0[0].id;
                        zTreeObj.selectNode(nodes0[0],false);
                    }
                }
            }
        });
        $(".dropdown-menu,.dropdown").click(function(event){
            event.stopPropagation();
            $(".dropdown-menu").hide();
            $(this).show();
            $(this).find(".dropdown-menu").show();
        });

        // 确定按键
        var alertMessage = "${alertMsg}";
        $(treeName).parents(".dropdown-menu").find(".dropdown-cfm").click(function(event){
            event.stopPropagation();
            if(choisedItem==""){
                alert(alertMessage);
            }else{
                //console.log(choisedName+"(choisedName)");
                showName(treeName,hiddenInputId,choisedItem,choisedID);
                treeHide($(this).parents(".dropdown-menu"));
            }
        });
        // 取消 
        $(treeName).parents(".dropdown-menu").find(".dropdown-cnl").click(function(event){
            event.stopPropagation();
            choisedItem = "";
            choisedID = "";
            showName(treeName,hiddenInputId,"","");
            zTreeObj.cancelSelectedNode();
            treeHide($(this).parents(".dropdown-menu"));
        });

        function treeHide(hide){
            hide.hide();
        }
    })(jQuery);

</script>

多选框：

<%@ tag language="java" pageEncoding="UTF-8"%>
<%@ include file="/views/include/taglib.jsp"%>

<%@ attribute name="url" type="java.lang.String" required="true" description="异步加载数据地址"%>
<%@ attribute name="id" type="java.lang.String" required="true" description="ztree DOM ID"%>
<%@ attribute name="formName" type="java.lang.String" required="true" description="隐藏域name"%>
<%@ attribute name="name" type="java.lang.String" required="true" description="提示字段"%>
<%@ attribute name="defaultName" type="java.lang.String" required="true" description="默认值"%>
<%@ attribute name="style" type="java.lang.String" required="true" description="tree选择控制"%>
<%@ attribute name="placeHolder" type="java.lang.String" required="true" description="input为空时显式的提示字段"%>
<%@ attribute name="alertMsg" type="java.lang.String" required="true" description="弹出框提示文字"%>

<div class="dropdown myMenu" >
    <div class="input-group" data-isfirst="1">
        <div class="item_choised_pres">
            <!-- <span class="menu_tip">提示字段</span> -->
        </div>
        <input type="hidden" name="${formName}" id="${id}" value="${defaultName}"/>
        <span class="input-group-addon">
            <i class="fa fa-angle-down"></i>
        </span>
    </div>
    <span class="help-block" style="display:none;color:#A94442">请填写${placeHolder}</span>
    <div class="dropdown-menu">
        <div class="treeMenu">
            <ul id="${id}_tree" class="ztree ztree-basic" style="min-height:0"></ul>
        </div>
        <div class="menuButtonBar">
            <a class="dropdown-cfm">确定</a><!-- data-choiseMode 设置是否只有最末尾节点执行动作 分别为：all、rootOnly-->
            <a class="dropdown-cnl">清除</a>
        </div>
    </div>
</div>

<script type="text/javascript">
    (function($){
        // 树
        var treeName = "#" + "${id}" + "_tree";
        var treeNameId = "${id}" + "_tree";
        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
        var zNodes = [];
        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting = {
            async:{
                enable:true,
                url:"${url}",
                type:"get"
            },
            view:{expandSpeed:""},
            callback: {
                onClick: zTreeOnClick,
                onAsyncSuccess: zTreeOnAsyncSuccess
            }
        };
        var treeObj;
        // 点击出现树
        $(treeName).parents(".myMenu").children(".input-group").click(function() {
            var firstflag = $(this).attr("data-isfirst");
            if(firstflag=="1"){
                treeObj = $.fn.zTree.init($(treeName), setting, zNodes);
                $(this).attr("data-isfirst","0");
            }
            var menu = $(this).siblings(".dropdown-menu");
            if(menu.is(":hidden")){
                //console.log("click");
                menu.show();
            }
        });
        // 预置
        var name="${name}";
        var hiddenInputID = "#" + "${id}";
        (function(){
            if(name!=""){
                var nameArray = name.split(" ");
                var writeTo = "";
                for(var m=0;m<nameArray.length;m++){
                    writeTo = writeTo + "<span class='menu_items'>"+nameArray[m]+"<span class='menu_items_del'>×</span></span>";
                }
                $(treeName).parents(".dropdown").find(".item_choised_pres").html(writeTo);
            }else{
                var writeIn = "<span class='menu_tip'>"+"${placeHolder}"+"</span>";
                $(treeName).parents(".dropdown").find(".item_choised_pres").html(writeIn);
            }
            xclick(0);// treeObj=null
        })()
        // 单击按键
        var choiseMode = "${style}";
        var choisedItem = "";
        var choisedID = "";
        var nodesSelect = [];
        function zTreeOnClick(event, treeId, treeNode) {
            choisedItem = "";
            choisedID = "";
            //console.log(treeObj);
            var selectLength = nodesSelect.length;
            if(selectLength==0){
                if(choiseMode=="rootOnly" && treeNode.isParent == true){
                    alert("对不起，不能选择父级节点");
                    treeObj.cancelSelectedNode(treeNode);
                }
            }else{
                for(var i=0;i<selectLength;i++){
                    if(choiseMode=="all"){
                        if(nodesSelect[i]==treeNode){
                            treeObj.cancelSelectedNode(treeNode);
                        }else{
                            treeObj.selectNode(nodesSelect[i],true);
                        }
                    }else if(choiseMode=="rootOnly"){
                        if(treeNode.isParent == true){
                            alert("对不起，不能选择父级节点");
                            treeObj.cancelSelectedNode(treeNode);
                        }else{
                            if(nodesSelect[i]==treeNode){
                                treeObj.cancelSelectedNode(treeNode);
                            }else{
                                treeObj.selectNode(nodesSelect[i],true);
                            }
                        }
                    }else{
                        alert("模式字段填写错误");
                    }
                }
            }
            nodes = treeObj.getSelectedNodes(); // 被选中的节点集合
            nodesSelect = nodes;
            selectLength = nodesSelect.length;

            if(selectLength>0){
                for(var i=0;i<selectLength;i++){
                    choisedItem = choisedItem + nodesSelect[i].name + " ";
                    choisedID = choisedID + nodesSelect[i].id + " ";
                }
            }else{
                choisedItem = "";
                choisedID = "";
            }
        };
        // 确定按键
        var alertMessage = "${alertMsg}";
        $(treeName).parents(".dropdown-menu").find(".dropdown-cfm").click(function(event){
            event.stopPropagation();
            if(choisedItem==""){
                alert(alertMessage);
            }else{
                showName(choisedItem,choisedID);
                $(this).parents(".dropdown-menu").hide();
            }
        });
        // 清除
        $(treeName).parents(".dropdown-menu").find(".dropdown-cnl").click(function(event){
            event.stopPropagation();
            clearData();
            $(this).parents(".dropdown-menu").hide();
        });

        // 加载数据
        var defaultName = "${defaultName}";
        function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
            zNodes = msg;
            var node0=[];
            nodesSelect = [];
            choisedID = "";
            choisedItem = "";//choiseMode

            if(defaultName==""){
                clearData();
            }else{
                defaultNameArray = defaultName.split(" ");
                var lengthd = defaultNameArray.length;
                for(var k=0;k<lengthd;k++){
                    node0 = treeObj.getNodeByParam("id", defaultNameArray[k], null);
                    if((choiseMode=="rootOnly" && node0.isParent==false) || (choiseMode == "all")){
                        if(node0.name!=delName){
                            nodesSelect.push(node0);
                            treeObj.selectNode(node0,true);
                            choisedID = choisedID + node0.id + " ";
                            choisedItem = choisedItem + node0.name + " ";
                        }
                    }
                }
                showName(choisedItem,choisedID);
            }

        };
        // 点击其他位置 隐藏
        $(document).click(function(){
            $(".dropdown-menu").hide();
            var idOld = $(treeName).parents(".dropdown").find("input[type=hidden]").val();
            console.log(idOld+"idOld");
            if(idOld!=""){
                if(treeObj!=null){
                    choisedItem = "";
                    choisedID = "";
                    nodesSelect = [];
                    var idArray = idOld.split(" ");
                    var id_length = idArray.length;
                    for(var q=0;q<id_length;q++){
                        var node1 = treeObj.getNodeByParam("id", idArray[q], null);
                        if(node1!=null){
                            choisedItem = choisedItem + node1.name + " ";
                            choisedID = choisedID + node1.id + " ";
                            nodesSelect.push(node1);
                            treeObj.selectNode(node1,true);
                        }
                    }

                }
            }
        });
        /* $(".dropdown-menu,.dropdown").click(function(event){
            event.stopPropagation();
            $(".dropdown-menu").hide();
            $(this).show();
            $(this).find(".dropdown-menu").show();
        }); */
        // 写入数据
        function showName(choisedItem,choisedID){
            $(hiddenInputID).val(choisedID);
            if(choisedItem==""){
                clearData();
            }else{
                var items = choisedItem.split(" ");
                var length = items.length-1;
                var writeIn = "";
                for(var j=0;j<length;j++){
                    writeIn = writeIn + "<span class='menu_items'>"+items[j]+"<span class='menu_items_del'>×</span></span>";
                }
                $(treeName).parents(".dropdown").find(".item_choised_pres").html(writeIn);
            }
            xclick(1);
        }
        // 清除数据
        function clearData(){
            choisedItem = "";
            choisedID = "";
            nodesSelect = [];
            $(hiddenInputID).val("");
            var writeIn = "<span class='menu_tip'>"+"${placeHolder}"+"</span>";
            $(treeName).parents(".dropdown").find(".item_choised_pres").html(writeIn);
            treeObj.cancelSelectedNode();
        }
        // x click
        var delName = "";
        function xclick(flagNum){
            $(".menu_items_del").click(function(){
                var name = $(this).parent().text();
                name = name.substring(0,name.length-1);
                if(flagNum==1){
                    var node = treeObj.getNodeByParam("name", name, null);
                    if(node!=null){
                        treeObj.cancelSelectedNode(node);
                        choisedItem = choisedItem.replace(node.name+" ","");
                        choisedID = choisedID.replace(node.id+" ","");
                        $(hiddenInputID).val(choisedID);
                    }
                    var nodex = treeObj.getSelectedNodes(); // 被选中的节点集合
                    nodesSelect = nodex;
                    if(choisedID==""){
                        clearData();
                    }
                }else{
                    delName = name;
                }
                $(this).parent().remove();
            });
        }
    })(jQuery)
</script>