(礼拜四log)zTree插件扩展

╰半橙微兮° 2022-08-21 11:41 178阅读 0赞

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

单选框：

<%@ 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选择控制"%>
    <%@ 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>
                <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">
                
            </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>
                <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>