zTree多级扩展（一）

引入类库：

<script type="text/javascript" src="<%=path%>/js/jquery-ztree/jquery.ztree.core-3.5.js"></script>
<link rel="stylesheet" type="text/css" href="<%=path%>/js/jquery-ztree/zTreeStyle3.5/zTreeStyle.css" />

 

html代码：

<div style="width: 200px; height: 550px; float: left; overflow-y: auto; background: #b3d0db;">
      <ul id="brandProductValueTree" class="ztree"></ul>
</div>

 

js代码：

$(document).ready(function(){

initBrandProductValueTree();

});
              

function initBrandProductValueTree() {
                $.fn.zTree.init($("#brandProductValueTree"), {
                    async : {
                        enable : true,
                        url : path + "/brandCustomerOrder/brandCustomerOrder_searchBrandProductValueBeanForZtree",//后台返回相应数据
                        autoParam : [ "_tid" ],
                        dataType : "json",
                        dataFilter : function(treeId, parentNode, responseData) {
                            var result = responseData.data;
                            if (parentNode == null) {
                                result.unshift({_tid : 0, name : "产品值树", isParent : true, open : true});
                            }

                            for(var i = 0; i < result.length;i ++){
                                if(result[i]._tpid == 0 || result[i].listFlag) {
                                    result[i].isParent = true;
                                }

                                if(result[i].name) {
                                    result[i]._name = result[i].name;    
                                }else {
                                    if(result[i].listFlag == 1){
                                        result[i]._name = "列表" + result[i].idx;
                                    }else{
                                        result[i]._name = "文章" + result[i].idx;
                                    }
                                }
                            }
                            return result;
                        },
                        otherParam : ["templateId", templateId, "productId", productId]
                    },
                    data : {
                        key : {
                            name : "_name"
                        },
                        simpleData : {
                            enable : true,
                            idKey : "_tid",//本级id
                            pIdKey : "_tpid",//父亲id
                            rootPId : 0//根id
                        }
                    },
                    view : {
                        selectedMulti : false
                    },
                    callback : {
                        beforeCollapse : function(treeId, treeNode) {
                            return treeNode._tid != 0;
                        },
                        onAsyncSuccess : function(event, treeId, treeNode, msg) {
                            ajaxResponseValidate(msg);
                        },
                        onAsyncError : function() {
                            alert("Ajax访问异常");
                        },
                        onClick : function(event, treeId, treeNode, clickFlag) {//点击菜单出现，以下表示相关div的显示和隐藏
                            if(treeNode._tid == 0){
                                $("#brandProductValueRootHint").show();
                                $("#brandProductValueEditDiv").hide();
                                $("#brandProductValueAddDiv").hide();
                            }else {
                                $("#brandProductValueRootHint").hide();
                                if (treeNode._tid < 0 || treeNode.listFlag) {
                                    if (treeNode.listFlag) {
                                        $("#brandProductValueAddDiv").hide();
                                        showBrandProductValueEditDiv(treeNode);
                                    } else {
                                        $("#brandProductValueEditDiv").hide();
                                        showBrandProductValueAddDiv(treeNode);
                                    }
                                } else {
                                    $("#brandProductValueAddDiv").hide();
                                    showBrandProductValueEditDiv(treeNode);
                                }
                            }
                        }
                    }
                });
            }

转载于:https://www.cnblogs.com/queyuexzy/p/4414811.html