ztree前台实例

  1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2 <%
  3     response.setHeader("Pragma", "No-cache");
  4     response.setHeader("Cache-Control", "no-cache");
  5     response.setDateHeader("Expires", 0);
  6 %>
  7 <html>
  8     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  9     <jsp:include page="/webui/common.jsp"></jsp:include>
 10 <head>
 11 <title>日志管理</title>
 12 <jsp:include page="/webui/common.jsp"></jsp:include>
 13 <script type="text/javascript" Language="JavaScript">
 14     //设置ztree的配置,组装信息.
 15     var setting = {
 16             async: {
 17                 //设置 zTree 是否开启异步加载模式(flase表示关闭)
 18                 enable: true,
 19                 //Ajax获取数据的URL地址
 20                 url: getUrl
 21             },
 22             check: {
 23                 //true显示复选框或单选框
 24                 enable: true,
 25                 //显示checkbox类型
 26                 chkStyle:"checkbox" ,
 27                 //Y 属性定义 checkbox 被勾选后的情况；Y 属性定义 checkbox 被勾选后的情况;N 属性定义 checkbox 取消勾选后的情况;"p" 表示操作会影响父级节点；"s" 表示操作会影响子级节点。
 28                 chkboxType:{ "Y": "s", "N": "s" }
 29             },
 30             data: {
 31                 //确定是否多次从数据库中取出数据默认flase
 32                 simpleData: {
 33                     enable: true
 34                 }
 35             },
 36             view: {
 37                 //zTree 节点展开、折叠时的动画速度默认值："fast"
 38                 expandSpeed: ""
 39             },
 40             callback: {
 41                 //于捕获父节点展开之前的事件回调函数，并且根据返回值确定是否允许展开操作
 42                 beforeExpand: beforeExpand,
 43                 //用于捕获异步加载正常结束的事件回调函数
 44                 onAsyncSuccess: onAsyncSuccess,
 45                 //用于捕获异步加载出现异常错误的事件回调函数
 46                 onAsyncError: onAsyncError,
 47                 //用于捕获勾选或取消勾选之前的事件回调函数,并且根据返回值确定是否允许勾选或取消勾选 
 48                 beforeCheck: zTreeBeforeCheck,
 49                 //用于捕获 checkbox/radio 被勾选 或 取消勾选的事件回调函数
 50                 onCheck: onCheck
 51             }
 52         };
 53         //Ajax获取数据的URL地址
 54         function getUrl(treeId, treeNode) {
 55             var param ="id="+treeNode.id;
 56             return "treeNodeAsync.html?" + param;
 57         }
 58         //用于捕获父节点展开之前的事件回调函数，并且根据返回值确定是否允许展开操作
 59         function beforeExpand(treeId, treeNode) {
 60             if (!treeNode.isAjaxing) {
 61                 treeNode.times = 1;
 62                 ajaxGetNodes(treeNode, "refresh");
 63                 return true;
 64             } else {
 65                 alert("zTree 正在下载数据中，请稍后展开节点。。。");
 66                 return false;
 67             }
 68         }
 69         //用于捕获异步加载正常结束的事件回调函数
 70         function onAsyncSuccess(event, treeId, treeNode, msg) {
 71             if (!msg || msg.length == 0) {
 72                 return;
 73             }
 74             var zTree = $.fn.zTree.getZTreeObj("regionTree");
 75                 treeNode.icon = "";
 76                 zTree.updateNode(treeNode);
 77                 //需要被选中的节点数据(选中,非勾选)
 78                 zTree.selectNode(treeNode.children[0]);
 79         }
 80         //用于捕获异步加载出现异常错误的事件回调函数
 81         function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
 82             var zTree = $.fn.zTree.getZTreeObj("treeDemo");
 83             alert("异步获取数据出现异常。");
 84             treeNode.icon = "";
 85             zTree.updateNode(treeNode);
 86         }
 87         function ajaxGetNodes(treeNode, reloadType) {
 88             var zTree = $.fn.zTree.getZTreeObj("regionTree");
 89             if (reloadType == "refresh") {
 90                 treeNode.icon = "../css/zTreeStyle/img/loading.gif";
 91                 //更改ztree的图标
 92                 zTree.updateNode(treeNode);
 93             }
 94             //强制异步加载父节点的子节点
 95             zTree.reAsyncChildNodes(treeNode, reloadType, true);
 96         }
 97         //用于捕获勾选或取消勾选之前的事件回调函数,并且根据返回值确定是否允许勾选或取消勾选 
 98         function zTreeBeforeCheck(treeId,treeNode) {
 99            return true;
100         }
101          //用于捕获 checkbox/radio 被勾选 或 取消勾选的事件回调函数,获取选中复选框的值
102         function onCheck(e, treeId, treeNode) {
103             var zTree= $.fn.zTree.getZTreeObj("regionTree");
104             var nodes=zTree.getCheckedNodes(true);
105             var areaNo="";
106             for(var i=0;i<nodes.length;i++){
107                 areaNo+="'"+nodes[i].id+"',";
108             }
109             areaNo=areaNo.substr(0,areaNo.length-1);
110             alert(areaNo);
111             //document.getElementById("areacode").value=areaNo;
112         } 
113         //ztree初始化
114         $(document).ready(function(){
115             $.ajax({
116             contentType: "text/json",
117             type: "POST",
118             url: "creatTreeNode.html",
119             dataType: 'json',
120             success: function (result) {
121                 $.fn.zTree.init($("#regionTree"), setting, result);
122             }
123          });
124         });
125 </script>
126     </head>
127     <body>
128         <div class="region-tree">
129         <ul id="regionTree" class="ztree"></ul>
130     </div>
131     </body>
132 </html>
posted on 2013-09-18 13:54 小码农_ZXB 阅读(368) 评论(0) 编辑收藏举报