标签:数据初始化 inf jdbc springmvc lin put void tree fast
最近在写毕设,用到了ztree,来记录一下。
首先后台先构造一个ZNodes实体类
public class ZNodes implements java.io.Serializable{ private String id; private String pId; private String name; private Boolean open; private Boolean checked; private boolean doCheck; public String getId() { return id; } public void setId(String id) { this.id = id; } public String getpId() { return pId; } public void setpId(String pId) { this.pId = pId; } public String getName() { return name; } public void setName(String name) { this.name = name; } public Boolean getOpen() { return open; } public void setOpen(Boolean open) { this.open = open; } public Boolean getChecked() { return checked; } public void setChecked(boolean checked) { this.checked = checked; } public Boolean getDoCheck() { return doCheck; } public void setDoCheck(boolean doCheck) { this.doCheck = doCheck; } }
然后是dao层,我用的框架是spring springmvc hibernate:
/** * 树形获取诗人 * @return */ @SuppressWarnings("unchecked") public List<ZNodes> getPoetByTree(){ String sql="select id,dynasty_id ,name from Poet"; return jdbcTemplate.query(sql, zNodesDataMapper); } private RowMapper<ZNodes> zNodesDataMapper = new RowMapper<ZNodes>() { @Override public ZNodes mapRow(ResultSet rs, int index) throws SQLException { // TODO Auto-generated method stub ZNodes zNodes=new ZNodes(); zNodes.setId(rs.getString("id")); zNodes.setName(rs.getString("name")); zNodes.setpId(rs.getString("dynasty_id")); return zNodes; } };
service层就不贴了,controller是这样子的
List<ZNodes> poetTree=poetService.getPoetByTree();
model.put("zNodes", JSONArray.fromObject(zNodes));
后台代码就到此为止了。
接下来是前台
引入js和css文件
<link rel="stylesheet" href="<%=basePath %>zTree/css/zTreeStyle/metro.css" type="text/css"> <script type="text/javascript" src="<%=basePath %>assets/js/jquery.min.js"></script> <script type="text/javascript" src="<%=basePath %>zTree/js/jquery.ztree.core.js"></script> <script type="text/javascript" src="<%=basePath %>zTree/js/jquery.ztree.excheck.js"></script>
因为我这里修改了ztree的样式,所以引入的是另外的css,网上找的
然后是html元素
<input type="text" class="form-control" id="name" value="${data.poet.name }" onclick="AutoMatch()"> <div id="menuContent" class="menuContent" show="false" style="display: none; position: absolute;z-index: 999999; left: 114.156px;top: 115px; width: 209px;"> <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 110px;"> </ul> </div>
然后是js
//点击某个节点 然后将该节点的名称赋值值文本框 function zTreeOnClick(e, treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); //获得选中的节点 var nodes=zTree.getCheckedNodes(true); //根据id排序 v = nodes[0].name; postId = nodes[0].id; zTree.checkNode(nodes, true, false); //将选中节点的名称显示在文本框内 // if (v.length > 0) v = v.substring(0, v.length - 1); var name = $("#name"); name.attr("value", v); $(‘#poetId‘).val(postId); $(‘#dynastyId‘).val(nodes[0].getParentNode.id); //隐藏zTree hideMenu(); return false; } //ztree参数 var setting = { check: { enable: true, chkStyle: "radio", radioType: "all", chkboxType: { "Y":"s","N":"s"} }, data: { simpleData: { enable: true } }, callback :{ // onClick : zTreeOnClick, onCheck:zTreeOnClick, beforeCheck : function(treeId, treeNode) { if (treeNode.isParent) { alert("请选择子节点!") return false; } } } }; //ztree数据初始化 var zNodes =${zNodes}; //显示树 function showMenu() { $("#menuContent").fadeIn("fast"); $(‘#menuContent‘).attr(‘show‘,‘true‘); // var cityObj = $("#name"); // var cityOffset = $("#name").offset(); // $("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast"); } //隐藏树 function hideMenu() { $("#menuContent").fadeOut("fast"); $(‘#menuContent‘).attr(‘show‘,‘false‘); // $("body").unbind("mousedown", onBodyDown); } //还原zTree的初始数据 function InitialZtree() { $.fn.zTree.init($("#treeDemo"), setting, zNodes); // setting.check.radioType = "all"; zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo"); var node = zTree_Menu.getNodeByParam("id",$(‘#dynastyId‘).val() ); var node1 = zTree_Menu.getNodeByParam("id",$(‘#poetId‘).val() ); // zTree_Menu.selectNode(node1,true);//指定选中ID的节点 zTree_Menu.checkNode(node1, true, false); zTree_Menu.expandNode(node, true, false);//指定选中ID节点展开 } ///根据文本框的关键词输入情况自动匹配树内节点 进行模糊查找 function AutoMatch() { InitialZtree(); if($(‘#menuContent‘).attr(‘show‘)==‘false‘){ showMenu(); }else{ // $(‘#menuContent‘).css(‘display‘,‘none‘); hideMenu(); } }
最后的效果:
ztree java 前后台代码(input与ztree结合)
标签:数据初始化 inf jdbc springmvc lin put void tree fast
原文地址:https://www.cnblogs.com/LolitaChen/p/8835664.html