ztree 简单使用

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
   <meta name="decorator" content="default"/>
        <link href="${ctxStatic}/jquery-ztree/3.5.12/css/zTreeStyle/zTreeStyle.min.css" rel="stylesheet" type="text/css"/>
    <script src="${ctxStatic}/jquery-ztree/3.5.12/js/jquery.ztree.all-3.5.min.js" type="text/javascript"></script>
   <script type="text/javascript">
       $(document).ready(function(){
            $("#channelId").val("${channelId}");

           var setting = {check:{enable:true,nocheckInherit:true},view:{selectedMulti:false},
                   data:{simpleData:{enable:true}},callback:{beforeClick:function(id, node){
                       tree.checkNode(node, !node.checked, true, true);
                       return false;
                   }}};
           //以下treeNodes为示例
           var treeNodes = [
                  {"id":1, "pId":0, "name":"test1"},
                   {"id":11, "pId":1, "name":"test11"},
                   {"id":12, "pId":1, "name":"test12"},
                   {"id":111, "pId":11, "name":"test111"},
                   ......
           ];
           // 用户-菜单
           /*var treeNodes=[
                   <c:forEach items="${areaAll}" var="administrtiveDivisions">{id:"${administrtiveDivisions.id}",
                       pId:"${not empty administrtiveDivisions.parent.id?administrtiveDivisions.parent.id:0}",
                       name:"${not empty administrtiveDivisions.parent.id?administrtiveDivisions.name:'列表'}"},
                    </c:forEach>]; **/
           // 初始化树结构
           var tree = $.fn.zTree.init($("#menuTree"), setting, treeNodes);
           // 不选择父节点（选择任意节点不连带父节点或子节点）

tree.setting.check.chkboxType = { "Y" : "", "N" : "" };

// 不选择父节点(选择某一节点连带父节点或子节点)
// tree.setting.check.chkboxType = { "Y" : "ps", "N" : "s" };

           // 默认选择节点
       /* <c:forEach items="${areaChannel}" var="area">
           var node = tree.getNodeByParam("id", 1);
           try{tree.checkNode(node, true, false);}catch(e){}
            </c:forEach> */

           // 默认选择一个节点
            var node = tree.getNodeByParam("id", "${area.areaCode}");
           try{tree.checkNode(node, true, false);}catch(e){}
           // 默认展开全部节点
           tree.expandAll(true);

       });
       function savearea(){
           var zTreeOjb = $.fn.zTree.getZTreeObj("menuTree"); //ztree的Id zTreeId

          //获取复选框/单选框选中的节点：
           var checkedNodes = zTreeOjb.getCheckedNodes();
           var ids="";
           for(var i=0; i<checkedNodes.length; i++) {
               ids+=checkedNodes[i].id+",";
           }
           $("#areaIds").val(ids);
           $("#inputForm").submit();
       }
   </script>
</head>
<body>
   <ul class="nav nav-tabs">
       <li class="active"><a href="${ctx}/channelmanage/channel/">频道列表</a></li>
       <li class="active"><a href="">频道区域修改</a></li>
   </ul><br/>
   <form:form id="inputForm" modelAttribute="channel" action="${ctx}/channelmanage/channel/saveArea" method="post" class="form-horizontal">
       <form:hidden path="id"/>
       <div class="control-group">
           <label class="control-label">频道区域:</label>
           <div class="controls">
               <div id="menuTree" class="ztree" style="margin-top:3px;float:left;"></div>
               <input type="hidden" id ="areaIds" name="areaIds" />
               <input type="hidden" id ="channelId" name="channelId" />
           </div>
       </div>
       <div class="form-actions">
           <input id="btnSubmit" class="btn btn-primary" type="button" onclick="savearea()" value="保存"/> 
           <input id="btnCancel" class="btn" type="button" value="返回" onclick="history.go(-1)"/>
       </div>
   </form:form>
</body>
</html>

猜你喜欢