最近需要在一个添加页面做一个树形结构遍历出另一张表三列可以勾选添加,在网上看到好多菜单栏的树形结构做的都是把所有菜单放在一列,然后用pid指定父子关系。后来请教了我大神,说三列算个啥 !三个表都可以~大神就是大神,下面是带参考后我的代码(还有些增删改查的代码,不摘了,一块放上去吧):
代码前先上效果图:外层到里层分别是:地区-工号-子工号
jsp代码:
<%-- Created by IntelliJ IDEA. User: Administrator Date: 2018/6/7 Time: 11:14 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ include file="/js/comom.jsp" %> <!--_meta 作为公共模版分离出去--> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> <LINK rel="Bookmark" href="/favicon.ico" > <LINK rel="Shortcut Icon" href="/favicon.ico" /> <link rel="stylesheet" type="text/css" href="<%=path%>/static/zTree_v3/css/zTreeStyle/zTreeStyle.css" /> <link rel="stylesheet" type="text/css" href="<%=path%>/static/h-ui/css/H-ui.min.css" /> <link rel="stylesheet" type="text/css" href="<%=path%>/static/h-ui.admin/css/H-ui.admin.css" /> <link rel="stylesheet" type="text/css" href="<%=path%>/lib/Hui-iconfont/1.0.7/iconfont.css" /> <link rel="stylesheet" type="text/css" href="<%=path%>/lib/icheck/icheck.css" /> <link rel="stylesheet" type="text/css" href="<%=path%>/static/h-ui.admin/skin/default/skin.css" id="skin" /> <link rel="stylesheet" type="text/css" href="<%=path%>/static/h-ui.admin/css/style.css" /> <![endif]--> <!--/meta 作为公共模版分离出去--> <title>添加自定义分组 - H-ui.admin v2.3</title> <meta name="keywords" content="H-ui.admin v2.3,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载"> <meta name="description" content="H-ui.admin v2.3,是一款由国人开发的轻量级扁平化网站后台模板,完全免费开源的网站后台管理系统模版,适合中小型CMS后台系统。"> </head> <body> <form class="form form-horizontal" id="form-customGroup-add" action="${pageContext.request.contextPath}/add.do" method="post"> <div class="row cl"> <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>自定义分组名称</label> <div class="formControls col-xs-4 col-sm-4"> <input type="text" class="input-text" value="" placeholder="" id="customgroupname" name="customgroupname" value=""> </div> </div> <div class="row cl"> <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>选择区域名称:</label> <div class="formControls col-xs-4 col-sm-4"> <ul id="destinationTree" class="ztree"></ul> </div> </div> <div class="row cl"> <div class="col-xs-3 col-sm-5 col-xs-offset-4 col-sm-offset-3"> <input class="btn btn-primary radius" οnclick="getLevelNodes()" type="button" value=" 提交 "> </div> </div> </form> <script type="text/javascript" src="<%=path%>/lib/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="<%=path%>/lib/layer/2.1/layer.js"></script> <script type="text/javascript" src="<%=path%>/lib/icheck/jquery.icheck.min.js"></script> <script type="text/javascript" src="<%=path%>/lib/jquery.validation/1.14.0/jquery.validate.min.js"></script> <script type="text/javascript" src="<%=path%>/lib/jquery.validation/1.14.0/validate-methods.js"></script> <script type="text/javascript" src="<%=path%>/lib/jquery.validation/1.14.0/messages_zh.min.js"></script> <script type="text/javascript" src="<%=path%>/static/h-ui/js/H-ui.js"></script> <script type="text/javascript" src="<%=path%>/static/h-ui.admin/js/H-ui.admin.js"></script> <script type="text/javascript" src="<%=path%>/static/zTree_v3/js/jquery.ztree.core.min.js"></script> <script type="text/javascript" src="<%=path%>/static/zTree_v3/js/jquery.ztree.excheck.min.js"></script> <!--/_footer /作为公共模版分离出去--> <!--请在下方写此页面业务相关的脚本--> <script type="text/javascript"> $(function(){ $('.skin-minimal input').iCheck({ checkboxClass: 'icheckbox-blue', radioClass: 'iradio-blue', increaseArea: '20%' }); $("#form-customGroup-add").validate({ rules:{ customgroupname:{ required:true, minlength:2, maxlength:16 }, } }); }); var destinationObject = { destinationTree: null, setting: { view: { dblClickExpand: true, showLine: true, selectedMulti: false }, data: { simpleData: { enable:true } }, check: { enable: true } }, destinationNodes: [] }; $("document").ready(function(){ var i = 1; <c:forEach items="${destinationList}" var="destination"> var obj = new Object(); //id、name、pId是必须属性 obj.id = i; obj.name = "${destination.name}"; var pId = i; i ++; destinationObject.destinationNodes.push(obj); <c:forEach items="${destination.jobNums}" var="jobNum"> obj = new Object(); //id、name、pId是必须属性 obj.id = i; obj.name = "${jobNum.name}"; obj.pId = pId; var pId2 = i; i ++; destinationObject.destinationNodes.push(obj); <c:forEach items="${jobNum.childNums}" var="childNum"> obj = new Object(); //id、name、pId是必须属性 obj.id = i; obj.name = "${childNum.name}"; obj.pId = pId2; i ++; destinationObject.destinationNodes.push(obj); </c:forEach> </c:forEach> </c:forEach> destinationObject.destinationTree = $.fn.zTree.init( $("#destinationTree"), destinationObject.setting, destinationObject.destinationNodes); }); function getLevelNodes(){ var $dataString = ""; var nodes = destinationObject.destinationTree.getCheckedNodes(true); var destination = new Array(); for (var i in nodes){ if (nodes[i].level == 1 || nodes[i].level == 2){ destination.push(nodes[i].name); //destination[i]=nodes[i].name; } } var customgroupname=document.getElementById("customgroupname").value; $dataString += "destination="+destination; // var form = document.getElementById('form-customGroup-add'); var form = $("#form-customGroup-add"); form.attr("action","${pageContext.request.contextPath}/add.do?"+$dataString); form.submit(); //alert($dataString); //var data = { 'destination':JSON.stringify(destination)} /* $.post("/add.do",$dataString, function (result) { });*/ }; /*var $data = "&id=" + nodeId; checkedNodes = destinationObject.destinationTree.getCheckedNodes(true); var childNums = new Array(); for (var i in checkedNodes){ if (checkedNodes[i].type == "childNum"){ jobNumid.push(checkedNodes[i].name + "(" +checkedNodes[i].id + ")"); } } $data += "&childNums" + childNums; $.post("add.action",$data,function () { $("button[name$= '"+nodeId+"']").parent("td").parent("tr").children("td:eq(2)").text(arrayToString(childNums,",")); })*/ </script> <!--/请在上方写此页面业务相关的脚本--> </body> </html>
为了更全一点把list的jsp也放这了:
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ include file="/js/comom.jsp" %>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" type="text/css" href="<%=path%>/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="<%=path%>/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="<%=path%>/lib/Hui-iconfont/1.0.7/iconfont.css" />
<link rel="stylesheet" type="text/css" href="<%=path%>/lib/icheck/icheck.css" />
<link rel="stylesheet" type="text/css" href="<%=path%>/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="<%=path%>/static/h-ui.admin/css/style.css" />
<title>分组管理</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont"></i> 首页 <span class="c-gray en">></span> 消息中心 <span class="c-gray en">></span> 分组管理<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont"></i></a></nav>
<div class="page-container">
<div class="text-c">
<form action="<%=path%>/customGroup.do" method="post">
<input type="text" class="input-text" style="width:250px" placeholder="输入分组名称" id="1" name="customGroupName">
<button type="submit" class="btn btn-success radius" id="2" name=""><i class="Hui-iconfont"></i> 搜索</button>
</form>
</div>
<form action="" id="customGroup" name="customGroup">
<div class="cl pd-5 bg-1 bk-gray mt-20">
<span class="l">
<input type="button" value="批量删除" οnclick="datadel()" class="btn btn-danger radius">
<input type="button" value="添加自定义分组" οnclick="customGroup_add()" class="btn btn-primary radius">
</span>
</div>
<div class="mt-20">
<table class="table table-border table-bordered table-hover table-bg table-sort">
<thead>
<tr class="text-c">
<th width="25"><input type="checkbox" name="" value=""></th>
<th width="50" class="hidden-xs">序号</th>
<th width="100">ID</th>
<th width="100">自定义分组名称</th>
<th width="100">工号id</th>
<th width="120">操作</th>
</tr>
</thead>
<tbody>
<!-- 下面要进行对这个表格的数据的循环遍历 -->
<c:forEach items="${customGroup}" var="customGroup" varStatus="statu">
<tr class="text-c">
<td><input type="checkbox" value="${customGroup.id}" name="deleteID"></td>
<td>${statu.index + 1}</td>
<td>${customGroup.id}</td>
<td>${customGroup.customgroupname}</td>
<td>${customGroup.jobnumid}</td>
<td class="td-manage">
<a title="编辑" href="javascript:;" οnclick="customGroup_edit('${customGroup.id}')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont"></i></a>
<a title="删除" href="javascript:;" οnclick="customGroup_del('${customGroup.id}')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont"></i></a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</form>
</div>
<script type="text/javascript" src="<%=path%>/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="<%=path%>/lib/layer/2.1/layer.js"></script>
<script type="text/javascript" src="<%=path%>/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="<%=path%>/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="<%=path%>/static/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="<%=path%>/static/h-ui.admin/js/H-ui.admin.js"></script>
<script type="text/javascript" src="<%=path%>/static/js/jquery.form.js"></script>
<script type="text/javascript">
$(function(){
$('.table-sort').dataTable({
"aaSorting": [[ 1, "desc" ]],//默认第几个排序
"bStateSave": true,//状态保存
"aoColumnDefs": [
//{"bVisible": false, "aTargets": [ 3 ]}, //控制列的隐藏显示
//{"orderable":false,"aTargets":[0,6,6]}// 制定列不参与排序
]
});
$('.table-sort tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
});
});
/*添加*/
function customGroup_add(){
window.location.href="<%=path%>/showAdd.do";
}
/*编辑*/
function customGroup_edit(id){
window.location.href="<%=path%>/showEdit.do?id="+id;
}
/*删除*/
function customGroup_del(id){
layer.confirm('确认要删除吗?',function(){
window.location.href="<%=path%>/deleteCustomGroup.do?id="+id;
layer.msg('已删除!',{icon:1,time:1000});
});
}
/*批量删除*/
function datadel(){
document.customGroup.action="<%=path%>/deleteData.do";
document.customGroup.submit();
}
</script>
</body>
</html>
controller:
package com.ccdt.hht.controller; import com.ccdt.hht.model.*; import com.ccdt.hht.service.HhtCustomGroupService; import com.google.gson.Gson; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.servlet.ModelAndView; import java.util.List; /** * @Author: * @Date:2018/6/6 18:56 */ @Controller public class HhtCustomGroupController { @Autowired private HhtCustomGroupService hhtCustomGroupService; private HhtGroupJobNum hhtGroupJobNum; private Gson gson = new Gson(); @RequestMapping("/customGroup") public ModelAndView getAll(HhtCustomGroup hhtCustomGroup) { ModelAndView modelAndView = new ModelAndView(); List<HhtCustomGroup> list = hhtCustomGroupService.getAll(hhtCustomGroup); modelAndView.addObject("customGroup", list); modelAndView.setViewName("customGroup"); return modelAndView; } //展示添加页面 @RequestMapping("/showAdd") public ModelAndView showAdd() { List<Distination> destinationList = hhtCustomGroupService.getDestination(); for(Distination distination: destinationList) { List<JobNum> jobNumList = hhtCustomGroupService.getJobNum(distination.getName()); distination.setJobNums(jobNumList); for(JobNum jobNum: jobNumList) { jobNum.setChildNums(hhtCustomGroupService.getChildNum(distination.getName(), jobNum.getName())); } } ModelAndView modelAndView = new ModelAndView(); modelAndView.addObject("destinationList",destinationList); modelAndView.addObject("number",1); modelAndView.setViewName("customGroup-add"); return modelAndView; } public String listToString(String[] list, String separator) { return org.apache.commons.lang.StringUtils.join(list,separator); } @RequestMapping(value = "/add", method = RequestMethod.POST) public String add(Model model, HhtCustomGroup hhtCustomGroup,String[] destination ) { try { String test=listToString(destination,";"); hhtCustomGroup.setJobnumid(test); // System.out.print(destination); int result = hhtCustomGroupService.addCustomGroup(hhtCustomGroup); /*if (result > 0) { //将提示信息存入域中,用以前台显示 model.addAttribute("msg", "恭喜您,添加成功!"); } else { model.addAttribute("msg", "服务器异常,添加失败!"); }*/ } catch (Exception e) { e.printStackTrace(); } return "forward:customGroup.do"; } //批量删除 @RequestMapping("/deleteData") public String deleteData(Integer [] deleteID){ if(null!=deleteID&&deleteID.length!=0){ for (int i = 0; i < deleteID.length; i++) { try { //删除自定义分组 hhtCustomGroupService.deleteCustomGroup(deleteID[i]); } catch (Exception e) { // TODO: handle exception } } } return "forward:customGroup.do"; } //删除单个 @RequestMapping("/deleteCustomGroup") public String deleteJobNum(Integer id){ try { if(null!=id&&!("".equals(id))){ hhtCustomGroupService.deleteCustomGroup(id); } } catch (Exception e) { e.printStackTrace(); } return "forward:customGroup.do"; } //展示更新页面 @RequestMapping(value = "showEdit", method = RequestMethod.GET) public ModelAndView showEdit(Integer id) { ModelAndView modelAndView=new ModelAndView(); HhtCustomGroup hhtCustomGroup = null; try { if(null!=id&&!("".equals(id))){ //查询单个 hhtCustomGroup = hhtCustomGroupService.selectCustomGroup(id); modelAndView.addObject("hhtCustomGroup", hhtCustomGroup); modelAndView.setViewName("customGroup-edit"); } } catch (Exception e) { e.printStackTrace(); } return modelAndView; } //更新用户 @RequestMapping(value="/edit",method=RequestMethod.POST) public String edit(Model model, HhtCustomGroup hhtCustomGroup){ try { int result = hhtCustomGroupService.editCustomGroup(hhtCustomGroup); if(result>0){ //将提示信息存入域中,用以前台显示 model.addAttribute("msg","恭喜您,更新成功!"); }else{ model.addAttribute("msg","服务器异常,更新失败!"); } } catch (Exception e) { e.printStackTrace(); } return "forward:customGroup.do"; } /*public String getChildData(String ppid,String pid,String type){ ModelAndView modelAndView = new ModelAndView(); if("1".equals(type)){//查工号 List<HhtGroupJobNum> jobNumList = hhtCustomGroupService.getJobNum(pid); return gson.toJson(jobNumList); }else{//查子工号 List<HhtGroupJobNum> childNumList = hhtCustomGroupService.getChildNum(ppid,pid); return gson.toJson(childNumList); } }*/ }
service:
package com.ccdt.hht.service.impl; import com.ccdt.hht.dao.HhtCustomGroupMapper; import com.ccdt.hht.dao.HhtGroupJobNumMapper; import com.ccdt.hht.model.*; import com.ccdt.hht.service.HhtCustomGroupService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.List; /** * @Author: * @Date:2018/6/6 18:56 */ @Service public class HhtCustomGroupServiceImpl implements HhtCustomGroupService{ @Autowired private HhtCustomGroupMapper hhtCustomGroupMapper; @Autowired private HhtGroupJobNumMapper hhtGroupJobNumMapper; @Override public int editCustomGroup(HhtCustomGroup hhtCustomGroup) { int result = hhtCustomGroupMapper.updateByPrimaryKey(hhtCustomGroup); return result; } @Override public HhtCustomGroup selectCustomGroup(Integer id) { HhtCustomGroup hhtCustomGroup; hhtCustomGroup = hhtCustomGroupMapper.selectByPrimaryKey(id); return hhtCustomGroup; } @Override public void deleteCustomGroup(Integer id) { hhtCustomGroupMapper.deleteByPrimaryKey(id); } @Override public List<HhtCustomGroup> getAll(HhtCustomGroup hhtCustomGroup) { List<HhtCustomGroup> list = null; try { list=hhtCustomGroupMapper.selectByExample(null); } catch (Exception e) { e.printStackTrace(); } return list; } @Override public int addCustomGroup(HhtCustomGroup hhtCustomGroup) { int result = hhtCustomGroupMapper.insertSelective(hhtCustomGroup); return result; } @Override public List<Distination> getDestination() { return hhtGroupJobNumMapper.getDestination(); } @Override public List<JobNum> getJobNum(String destination) { return hhtGroupJobNumMapper.getJobNum(destination); } @Override public List<ChildNum> getChildNum(String destination, String jobnumber) { return hhtGroupJobNumMapper.getChildNum(destination,jobnumber); } }
model:
package com.ccdt.hht.model; public class HhtCustomGroup { private Integer id; private String customgroupname; private String jobnumid; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getCustomgroupname() { return customgroupname; } public void setCustomgroupname(String customgroupname) { this.customgroupname = customgroupname == null ? null : customgroupname.trim(); } public String getJobnumid() { return jobnumid; } public void setJobnumid(String jobnumid) { this.jobnumid = jobnumid == null ? null : jobnumid.trim(); } }
三层树又定义了三个类
如地区这样:
package com.ccdt.hht.model; import java.util.List; /** * @Author: * @Date:2018/6/8 19:25 */ public class Distination { private String name; private List<JobNum> jobNums; public String getName() { return name; } public void setName(String name) { this.name = name; } public List<JobNum> getJobNums() { return jobNums; } public void setJobNums(List<JobNum> jobNums) { this.jobNums = jobNums; } }
对了 还有mapper.xml除了mybaties自动生成的还有自己写的分别查询3层数的sql:
<select id="getDestination" resultType="com.ccdt.hht.model.Distination"> select distinct destination name from hht_group; </select> <select id="getJobNum" resultType="com.ccdt.hht.model.JobNum" parameterType="java.lang.String"> select distinct jobnumber as name from hht_group where destination = #{destination,jdbcType=VARCHAR}; </select> <select id="getChildNum" resultType="com.ccdt.hht.model.ChildNum" parameterType="java.lang.String"> select distinct childnumber as name from hht_group where destination = #{destination,jdbcType=VARCHAR} and jobnumber = #{jobnumber,jdbcType=VARCHAR}; </select>
大概就是这个样子了。
其实这是自己第一次写博客,嘿嘿~ 总结供自己以后再看,要是有幸遇到看官,还请多多指点.