ztree相关demo的总结整理

4.后台拼接如下形式的字符串

  String nodes = "[";
       for(int i=0;i<list.size();i++){
            if (i==list.size()-1) {
                nodes += "{id:\""+list.get(i).get("ID")+"\",pId:\""+(list.get(i).get("PID")==null?0:list.get(i).get("PID"))+"\", name:\""+list.get(i).get("NAME")+"("+list.get(i).get("ID")+")\",open:false}";
            }else{
                nodes += "{id:\""+list.get(i).get("ID")+"\",pId:\""+(list.get(i).get("PID")==null?0:list.get(i).get("PID"))+"\", name:\""+list.get(i).get("NAME")+"("+list.get(i).get("ID")+")\",open:false},";
            }
        }
//查询出已经选中的结点值，只需查询出对应的id即可，以,分隔的方式传到前台
 List<Map<String,Object>> idList = innovationProjectSer.indexByIdList(id);
       String ids = this.listToString(idList, ",").replace("{", "").replace("}", "").replace("ID=","");
//将list集合转换成以某一个字符串分隔的字符串
  public String listToString(List list, String separator) {   
       StringBuilder sb = new StringBuilder();   
       for (int i = 0; i < list.size(); i++) {        
           sb.append(list.get(i)).append(separator);    
         }    
       return sb.toString().substring(0,sb.toString().length()-1);}

5.前台body中的内容

    <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>指标：</label>
            <div class="formControls col-5 sidebar">
                    <div>
                        <input type="text"  id="key"  name="proCodes" class="empty form-control input-text radius" placeholder="请输入指标名称...." onkeyup="callNumber()">
                    </div>
                    <div>
                        <label type="text"  id="resultKey" class="form-control"onclick="changeFocus()" >
                            <div>
                                <a id="clickUp" class="glyphicon glyphicon-menu-up" onclick="clickUp()"></a>
                                <a id="clickDown" class="glyphicon glyphicon-menu-down" onclick="clickDown()"></a>
                            </div>
                            <label id="number"></label>
                        </label>
                    </div>
                <ul id="tree" class="ztree"  style="background: #ffffff none repeat scroll 0 0;width:90%;"></ul>
            </div>
            <div class="col-4"> </div>
        </div>

6.前台获取后台传过来的值

<script>
$(document).ready(function(){
    var setting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };
    setting.check.chkboxType = { "Y" : "ps", "N" : "ps" };
   //获取后台传过来的值  nodes
    var zNodes= ${nodes!};
    $.fn.zTree.init($("#tree"), setting, zNodes);
    document.getElementById("key").value = ""; //清空搜索框中的内容
    //绑定事件
    key = $("#key");
    key.bind("focus", focusKey)
        .bind("blur", blurKey)
        .bind("propertychange", searchNode) //property(属性)change(改变)的时候，触发事件
        .bind("input", searchNode);
    //将已经选中的结点值在ztree显示出来    
    var treeObj=$.fn.zTree.getZTreeObj("tree");  
//${ids!}后台传过来的已经选中的id字符串
    var proCodes="${(ids)!'a'}";  
    if(proCodes!='a'){
       var codes=proCodes.split(",");
       for(var i=0;i<codes.length;i++){
            var node = treeObj.getNodeByParam("id",""+codes[i]+"", null);
            treeObj.selectNode(node);
            treeObj.checkNode(node);
       }
    }

});
var lastValue = "", nodeList =[], fontCss = {};
//键盘释放：当输入框的键盘按键被松开时，把查询到的数据结果显示在标签中
function callNumber(){
    var zTree = $.fn.zTree.getZTreeObj("tree");

    if(nodeList.length){
        //让结果集里边的第一个获取焦点（主要为了设置背景色），再把焦点返回给搜索框
        zTree.selectNode(nodeList[0],false );
        document.getElementById("key").focus();

        clickCount=1; //防止重新输入的搜索信息的时候，没有清空上一次记录

    }else if(nodeList.length == 0){
        zTree.cancelSelectedNode(); //取消焦点
    }

    //如果输入框中没有搜索内容，则清空标签框
    if(document.getElementById("key").value ==""){
        zTree.cancelSelectedNode();
    }
}
function focusKey(e) {
    if (key.hasClass("empty")) {
        key.removeClass("empty");
    }
}
function blurKey(e) {
    if (key.get(0).value === "") {
        key.addClass("empty");
    }
}
//搜索节点
function searchNode(e) {
    var zTree = $.fn.zTree.getZTreeObj("tree");
    var value = $.trim(key.get(0).value);
    var keyType = "name";

    if (key.hasClass("empty")) {
        value = "";
    }
    if (lastValue === value) return;
    lastValue = value;
    if (value === ""){
        updateNodes(false);
        return;
    };
    nodeList = zTree.getNodesByParamFuzzy(keyType, value); //调用ztree的模糊查询功能，得到符合条件的节点
    updateNodes(true); //更新节点
}
//高亮显示被搜索到的节点
function updateNodes(highlight) {
    var zTree = $.fn.zTree.getZTreeObj("tree");
    for( var i=0, l=nodeList.length; i<l; i++) {
        nodeList[i].highlight = highlight; //高亮显示搜索到的节点(highlight是自己设置的一个属性)
        zTree.expandNode(nodeList[i].getParentNode(), true, false, false); //将搜索到的节点的父节点展开
        zTree.updateNode(nodeList[i]); //更新节点数据，主要用于该节点显示属性的更新
    }
}
//设置颜色
function getFontCss(treeId, treeNode) {
    return (!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
}

//点击向上按钮时，将焦点移向上一条数据
function clickUp(){
    var zTree = $.fn.zTree.getZTreeObj("tree");
    //如果焦点已经移动到了最后一条数据上，就返回第一条重新开始，否则继续移动到下一条
    if(nodeList.length==0){
        alert("没有搜索结果！");
        return ;
    }else if(clickCount==1) {
        alert("您已位于第一条记录上！");
        return;
        //让结果集里边的下一个节点获取焦点（主要为了设置背景色），再把焦点返回给搜索框
        //zTree.selectNode(nodeList[clickCount], false)
    }else{
        //让结果集里边的第一个获取焦点（主要为了设置背景色），再把焦点返回给搜索框
        zTree.selectNode(nodeList[clickCount], false);
        clickCount --;
    }
    document.getElementById("key").focus();
}
//点击向上按钮时，将焦点移向下一条数据
function clickDown(){
    var zTree = $.fn.zTree.getZTreeObj("tree");
    //如果焦点已经移动到了最后一条数据上，则提示用户（或者返回第一条重新开始），否则继续移动到下一条
    if(nodeList.length==0){
        alert("没有搜索结果！");
        return ;
    }else if(nodeList.length==clickCount)
    {
        alert("您已位于最后一条记录上！")
        return;
    }else{
        //让结果集里边的第一个获取焦点（主要为了设置背景色），再把焦点返回给搜索框
        zTree.selectNode(nodeList[clickCount], false)
        clickCount ++;
    }
    document.getElementById("key").focus();
}

</script>

6.前台js获取前台勾选的ztree节点值

//获取ztree选中的值之后以表单提交或者异步请求传到后台
 var treeObj=$.fn.zTree.getZTreeObj("tree");
         nodes=treeObj.getCheckedNodes(true);
//value为选中的id值
         var value="";
//name为选中的名称
         var name="";
         for(var i=0;i<nodes.length;i++){
          if(i==nodes.length-1){
                  value+=nodes[i].id + "";
                  name+=nodes[i].name + "";
           }else{
                  value+=nodes[i].id + ",";
                  name+=nodes[i].name + ",";
           }
         }