zTree使用，带搜索

Posted vlsion

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了zTree使用，带搜索相关的知识，希望对你有一定的参考价值。

/**
 * Created by vlsion on 2017-10-31
 */

var setting = {
    view: {
        addHoverDom: addHoverDom,
        removeHoverDom: removeHoverDom,
        selectedMulti: false
    },
    edit: {
        enable: true,
        editNameSelectAll: true,
        showRemoveBtn: true,
        showRenameBtn: false
    },
    data: {
        simpleData: {
            enable: true
        }
    },
    async: {
        enable: true,
//        url:"/back/org/getNodes",
        autoParam:["id=parentId"]
    },
    callback: {
        beforeDrag: beforeDrag,
        beforeEditName: beforeEditName,
        beforeRemove: beforeRemove,
        beforeRename: beforeRename,
        onRemove: onRemove,
        onRename: onRename,
        beforeClick: beforeClick,
        onClick: onClick,
        beforeAsync: beforeAsync,
        onAsyncError: onAsyncError,
        onAsyncSuccess: onAsyncSuccess,
        beforeCollapse: beforeCollapse,
        beforeExpand: beforeExpand,
        onCollapse: onCollapse,
        onExpand: onExpand
    }
};
var zNodes = JSON.parse($("#nodes").val());
var log, className = "dark";
function beforeDrag(treeId, treeNodes) {
    return false;
}

function setRemoveBtn(treeId, treeNode) {
    return treeNode.level !==0;
}
function setRenameBtn(treeId, treeNode) {
    return true;
}
function beforeEditName(treeId, treeNode) {
    className = (className === "dark" ? "":"dark");
    showLog("[ "+getTime()+" beforeEditName ]     " + treeNode.name);
    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
    zTree.selectNode(treeNode);
    return confirm("进入节点 -- " + treeNode.name + " 的编辑状态吗？");
}
function beforeRemove(treeId, treeNode) {
    className = (className === "dark" ? "":"dark");
    showLog("[ "+getTime()+" beforeRemove ]     " + treeNode.name);
    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
    zTree.selectNode(treeNode);
    console.log("sss");
    return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");

}
function onRemove(e, treeId, treeNode) {
    showLog("[ "+getTime()+" onRemove ]     " + treeNode.name);
    var param = {"id":treeNode.id};
    getJson("/org-structure/org/deleteOrganization",param,function(data){
        layer.msg(data.msg,{icon: 6,time:1000});
        navbarSumbit("/org-structure/org/index");
    });
}
function beforeRename(treeId, treeNode, newName) {
    className = (className === "dark" ? "":"dark");
    showLog("[ "+getTime()+" beforeRename ]     " + treeNode.name);
    if (newName.length == 0) {
        alert("节点名称不能为空.");
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        setTimeout(function(){zTree.editName(treeNode)}, 10);
        return false;
    }
    return true;
}
function onRename(e, treeId, treeNode) {
    showLog("[ "+getTime()+" onRename ]     " + treeNode.name);
}
function showLog(str) {
    if (!log) log = $("#log");
    log.append("<li class=‘"+className+"‘>"+str+"</li>");
    if(log.children("li").length > 8) {
        log.get(0).removeChild(log.children("li")[0]);
    }
}
function getTime() {
    var now= new Date(),
        h=now.getHours(),
        m=now.getMinutes(),
        s=now.getSeconds(),
        ms=now.getMilliseconds();
    return (h+":"+m+":"+s+ " " +ms);
}

var newCount = 1;
function addHoverDom(treeId, treeNode) {
   var parentLevel = 0;
    var sObj = $("#" + treeNode.tId + "_span");
    if (treeNode.editNameFlag || $("#addBtn_"+treeNode.id).length>0) return;
    var addStr = "<span class=‘button add‘ id=‘addBtn_" + treeNode.id
        + "‘ title=‘add node‘ onfocus=‘this.blur();‘></span>";
    sObj.after(addStr);
    var btn = $("#addBtn_"+treeNode.id);
    if (btn) btn.bind("click", function(){
       var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.addNodes(treeNode, {id:"", pId:treeNode.id, name:"new node" + (newCount++),"level":Number(parentLevel)+treeNode.level});
        return false;
    });
};
function removeHoverDom(treeId, treeNode) {
    $("#addBtn_"+treeNode.id).unbind().remove();
};
function selectAll() {
    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
    zTree.setting.edit.editNameSelectAll =  $("#selectAll").attr("checked");
}

function beforeClick(treeId, treeNode, clickFlag) {
    className = (className === "dark" ? "":"dark");
    showLog("[ "+getTime()+" beforeClick ]&nbsp;&nbsp;" + treeNode.name );
    return (treeNode.click != false);
}
function onClick(event, treeId, treeNode, clickFlag) {
    showLog("[ "+getTime()+" onClick ]&nbsp;&nbsp;clickFlag = " + clickFlag + " (" + (clickFlag===1 ? "普通选中": (clickFlag===0 ? "<b>取消选中</b>" : "<b>追加选中</b>")) + ")");
    if (treeNode.pId == null) {
        treeNode.pId = 0;
    }
    var parentLevel = 0;
    var param = {"id":treeNode.id,"parentId":treeNode.pId,"level":Number(parentLevel)+treeNode.level,"name":treeNode.name};
    console.log(param);
    console.log("tId="+treeNode.tId);
    if(treeNode.pId > 0){
       var id = treeNode.id;
       var code = treeNode.orgCode;
       var name = treeNode.name;
       var parentId = treeNode.pId;
        var shortName = treeNode.shortName;
       var level = Number(parentLevel)+treeNode.level;
       var nodeData = new NodeData(name,parentId,level,code,id,shortName);
       var html = template("template_org_node_detail",nodeData);
        $("#rightDiv").html(html);
    }
}
function NodeData(name,parentId,level,code,id,shortName){
   this.name = name;
   this.parentId = parentId;
   this.level = level;
   this.code = code;
   this.id =id;
   this.shortName = shortName;
}

function updateNode(e) {
   var m=$("#lan").val();
    var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
        type = e.data.type,
        name = $("#name").val(),
        nodes = zTree.getSelectedNodes();
    if(name==null||name==""){
       $.common.tips.init($(‘#nodeForm‘).find(‘input[type="text"]‘));
       var namep=$("#name");
       if($("#lan").val()=="zh_cn"){
          $.common.tips.showMsg(namep,"组织机构名不能为空！");
       }else{
          $.common.tips.showMsg(namep,"organization name can not be null！");
       }
       return false;
    }
    if (nodes.length == 0) {
        alert("请先选择一个节点");
    }
    for (var i=0, l=nodes.length; i<l; i++) {
        zTree.setting.view.fontCss = {};
        if (type == "rename") {
            console.log(name);
            nodes[i].name = name;
        }
        zTree.updateNode(nodes[i]);
    }
}

function updateNodeId(Id) {
    var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
        nodes = zTree.getSelectedNodes();
    if (nodes.length == 0) {
        alert("请先选择一个节点");
    }
    for (var i=0, l=nodes.length; i<l; i++) {
        zTree.setting.view.fontCss = {};
            nodes[i].id = Id;
        zTree.updateNode(nodes[i]);
    }
}

function beforeAsync(treeId, treeNode) {
    className = (className === "dark" ? "":"dark");
    alert("[ "+getTime()+" beforeAsync ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root") );
    return true;
}
function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
    alert("[ "+getTime()+" onAsyncError ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root") );
}
function onAsyncSuccess(event, treeId, treeNode, msg) {
    alert("[ "+getTime()+" onAsyncSuccess ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root") );
}

function beforeCollapse(treeId, treeNode) {
    className = (className === "dark" ? "":"dark");
    //alert("[ "+getTime()+" beforeCollapse ]&nbsp;&nbsp;&nbsp;&nbsp;" + treeNode.name );
    return (treeNode.collapse !== false);
}
function onCollapse(event, treeId, treeNode) {
    //alert("[ "+getTime()+" onCollapse ]&nbsp;&nbsp;&nbsp;&nbsp;" + treeNode.name);
}
function beforeExpand(treeId, treeNode) {
    className = (className === "dark" ? "":"dark");
    //alert("[ "+getTime()+" beforeExpand ]&nbsp;&nbsp;&nbsp;&nbsp;" + treeNode.name );
    return (treeNode.expand !== false);
}
function onExpand(event, treeId, treeNode) {
    //alert("[ "+getTime()+" onExpand ]&nbsp;&nbsp;&nbsp;&nbsp;" + treeNode.name);
}
//还原zTree的初始数据
function InitialZtree() {
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
}
///根据文本框的关键词输入情况自动匹配树内节点 进行模糊查找
var nodeList;
function AutoMatch(txtObj) {
    if (txtObj.value.length > 0) {
        InitialZtree();
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        var allNode = zTree.transformToArray(zTree.getNodes());
        zTree.hideNodes(allNode);
        nodeList = zTree.getNodesByParamFuzzy("name", txtObj.value);
        nodeList = zTree.transformToArray(nodeList);
        for(var n in nodeList){
            findParent(zTree,nodeList[n]);
        }
        zTree.showNodes(nodeList);
        if (value == "") {
            zTree.expandAll(false);
        }

        //将找到的nodelist节点更新至Ztree内
        $.fn.zTree.init($("#treeDemo"), setting, nodeList);
    } else {
        InitialZtree();
    }
}
$(document).ready(function(){
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    $("#selectAll").bind("click", selectAll);
});
function findParent(treeObj,node){
    treeObj.expandNode(node,true,false,false);
    var pNode = node.getParentNode();
    if(pNode != null){
        nodeList.push(pNode);
        findParent(treeObj,pNode);
    }
}


<span class="Hui-article-box">


   <div class="Hui-article">
   <div style="padding-bottom: 5px"><span style="font-size: 15px">搜索：</span><input id="citySel" class="input-text" type="text" value=""
                                          onkeyup="AutoMatch(this)"
                                          style="width: 225px;height: 25px"/>
      </div>
   <article class="cl pd-20">
   <div style="margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;width:250px;height:362px;overflow-y:scroll;overflow-x:auto;position:relative;float:left;margin-right:-200px;">
      <ul id="treeDemo" class="ztree"></ul>
   </div>
   <input type="hidden" id="nodes" value=‘${nodeVos}‘>
   <div style="float:right;width:80%;margin-top: 10px;" id="rightDiv">
   </div>
   </article>
</div>
</section>
<script type="text/javascript">
</script>
<style type="text/css">
   .ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
</style>
<script type="text/javascript" src="/lib/zTree/v3/js/template.js"></script>
[#include "template_org_node_detail.html"]
<script type="text/javascript" src="/lib/zTree/v3/js/initOrgzTree.js"></script>
<script type="text/javascript" src="/lib/zTree/v3/js/jquery.ztree.exhide-3.5.js"></script>

以上是关于zTree使用，带搜索的主要内容，如果未能解决你的问题，请参考以下文章

ztree树的使用

ztree添加节点问题

ztree树的使用 ----------从后台获取的菜单数据

ztree实现带复选框的树

Swift - 使用UISearchController实现带搜索栏的表格

使用 Lucene 进行带时间戳的地理空间搜索