ssm中zTreede 简单使用本人将bootstrap和zTree一起使用 最重要的将js和css导入 <!--zTree --> <link rel="stylesheet" href="css/demo.css" type="text/css"> <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css"> **<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>** //要在前面引用,不然会有很多错 <script type="text/javascript" src="js/jquery.ztree.core.min.js"></script> <script type="text/javascript" src="js/jquery.ztree.excheck.min.js"></script> <script type="text/javascript" src="js/jquery.ztree.exedit.min.js"></script> <!-- 导航栏 --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/zzsc.css"> <link rel="stylesheet" href="css/hoverifyBootnav.css"> <script src="js/bootstrap.min.js"></script> <script src="js/jquery.easing.min.js"></script> <script type="text/javascript" src="js/hoverifyBootnav.js"></script> <script type="text/javascript" src="js/init.js"></script> <style type="text/css">.separator { margin-bottom: 20px;}</style> 1,后台数据为json的//可以参考 List<HashMap<String,Object>> children = new ArrayList<HashMap<String,Object>>(); 1.1具体实现 @ResponseBody//ssm中异步传值 @RequestMapping("getJson")//前台数据请求地址 public List<HashMap<String,Object>> getJson( String name, HttpServletRequest requst, HttpServletResponse res,String id,String level,String otherParam,String url) throws IOException{ List<HashMap<String,Object>> children = new ArrayList<HashMap<String,Object>>(); for(int i = 0; i < 5; i++){ HashMap<String,Object> hm = new HashMap<String,Object>(); //最外层,父节点 hm.put("name", "张"+i); //name属性,显示节点名称 hm.put("id",id+i);//id属性 ,数据传递 hm.put("pId", id); hm.put("url", "aa.jsp"); children.add(hm); } return children;//返回到页面时就是简单json数据 } 2.前台页面ajax版 <script type="text/javascript"> var setting = { isSimpleData : true, //数据是否采用简单 Array 格式,默认false treeNodeKey : "id", //在isSimpleData格式下,当前节点id属性 treeNodeParentKey : "pId", //在isSimpleData格式下,当前节点的父节点id属性 showLine : true, //是否显示节点间的连线 checkable : true //每个节点上是否显示 CheckBox }; var zTree; var treeNodes; $(function(){ $.ajax({ async : false, cache:false, type: 'POST', dataType : "json", url: "<%=basePath%>getJson.htm",//请求的action路径 error: function () {//请求失败处理函数 alert('请求失败'); }, success:function(data){ //请求成功后处理函数。 alert(data); treeNodes = data; //把后台封装好的简单Json格式赋给treeNodes } }); //zTree = $("#tree").ztree(setting, treeNodes); $("#sel").click(function() { $.fn.zTree.init($("#treeDemo"),setting,treeNodes); }); }); </script> 2.1、body里面 <div class="row" align="center"> <div class="separator col-xs-12 col-sm-6"> <ul class="nav nav-tabs" data-hbn data-hbn-options='{ "duration_effect_on" : 700, "duration_effect_off" : 1000}'> <li role="presentation" class="active"><a href="#">首页</a></li> <li role="presentation"><a id="sel" >查询</a></li> <li role="presentation"><a >增加</a></li> <li role="presentation"><a >修改</a></li> <li role="presentation"><a >删除</a></li> </ul> </div> </div> <div> <ul id="treeDemo" class="tree"></ul> </div> 3、zTree版前端页面 <script type="text/javascript"> $(function(){ var setting = { async : { enable : true, url : "getConZtree.htm", autoParam : [ "id", "name=n", "level=lv" ], otherParam : { "otherParam" : "zTreeAsyncTest" }, dataFilter : filter }, edit : { enable : true }, data : { simpleData : { enable : true } }, }; function filter(treeId, parentNode, childNodes) { if (!childNodes) return null; for (var i = 0, l = childNodes.length; i < l; i++) { childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.'); } return childNodes; } function removeHoverDom(treeId, treeNode) { $("#addBtn_" + treeNode.id).unbind().remove(); } ; $("#sel").click(function() { $.fn.zTree.init($("#treeDemo"), setting); }); }); </script> 3.1、body中内容 <div class="row" align="center"> <div class="separator col-xs-12 col-sm-6"> <ul class="nav nav-tabs" data-hbn data-hbn-options='{ "duration_effect_on" : 700, "duration_effect_off" : 1000}'> <li role="presentation" class="active"><a href="#">首页</a></li> <li role="presentation"><a id="sel" >查询</a></li> <li role="presentation"><a >增加</a></li> <li role="presentation"><a >修改</a></li> <li role="presentation"><a >删除</a></li> </ul> </div> </div> <div> <ul id="treeDemo" class="ztree"></ul> </div>
zTree的简单使用
最新推荐文章于 2022-05-07 09:25:59 发布