两张表用UNION关键字组合，用zTree显示树
2017-09-25 18:01
295 查看
zTree他一般是针对一张树形表的，而现在我们要将两张表的信息合并为一张树形表，传入zTree的只是三个字段，分别是id,name,pId.
CREATE TABLE `com_position` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT, `d_id` int(20) DEFAULT NULL, `position_name` varchar(20) CHARACTER SET utf8 DEFAULT NULL, `rank_num` int(11) DEFAULT NULL, `file_num` int(11) DEFAULT NULL, PRIMARY KEY (`id`), KEY `fk_department` (`d_id`), CONSTRAINT `fk_department` FOREIGN KEY (`d_id`) REFERENCES `department` (`id`) ON DELETE CASCADE ON UPDATE CASCADE ) ENGINE=InnoDB AUTO_INCREMENT=104 DEFAULT CHARSET=gb2312;
CREATE TABLE `department` ( `id` int(11) NOT NULL AUTO_INCREMENT, `department_name` varchar(20) DEFAULT NULL, `parent_did` int(20) DEFAULT NULL COMMENT '上级部门id', PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=39 DEFAULT CHARSET=gb2312;
新建两张表
职位表的d_id是部门表的id.
<select id="selectHeadquarters" resultType="com.jointem.hrm.entity.Department1"> select d.department_name name ,d.parent_did pId, '1' isParent,d.id id from department as d union select d2.position_name name ,d2.d_id pId ,'0' isParent, d2.id id from com_position as d2,department as d </select>
刚开始我是没有建立那个临时的isParent字段的，我是将两个表连起来，职位表ID等于部门表MAX(id)+职位表的id,可是这样查询出来的职位表始终就只能返回一个值，可能是使用了MAX()函数的原因。如果不用isParent此树就不可以多层扩展，就像我的SQL语句就只能扩展三层。职位管理这部分不是我写的，我如果在是数据库里面新增isParent字段就会导致其他成员负责模块改动非常大。好的我，我GET到新技能了。
根据需求，只要是部门就是父节点，职位就是子节点。我们就让弄一个临时的字段'1',isParent 这样就生成了一个已赋值的临时字段。当他为1代表是父节点，为0代表子节点。好的现在的问题就是怎么去除部门ID与职位id重复的问题了。让他为负数可以吗，写在MYBATIES里面，数据库不支持。既然持久层不支持就在业务逻辑上面写。经过对ENTITY文件夹里面的Department1进行进行调试，测试一下查询的拿值顺序，在实体的要比较的两个字段的SET方法打两个断点，那个先进来，就可以看顺序了。一般是根据SQL语句的顺序来拿值的。
package com.jointem.hrm.entity;
/**
* @Author :zhanglu
* @Description:
* @Date :Created in 10:21 2017/9/22
* @Modified By:
*/
public class Department1 {
private int id;
private String name;
private int pId;
private int isParent;
public int getIsParent() {
return isParent;
}
public void setIsParent(int isParent) {
this.isParent = isParent;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getpId() {
return pId;
}
public void setpId(int pId) {
this.pId = pId;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id=id;
// if(isParent == 1){
// this.id = id;
// }else{
// this.id = id-100000000;
// }
}
}好的，确认了isParent是先拿到值，我就可以在ID的SET方法获取他了。在
public void setId(int id) {
if(isParent == 1){
this.id = id;
}else{
this.id = id-100000000;
}
}这样就可以将传到前端的的职位ID变为负数了，这是减去一个常量，如果在传值到后台就只要加回来就可以了。
全端要做的事是获取后端传过来的List<Department1>,赋值给NodesJSON数组。对于ZTree我们要求父节点为不可以选择到输入框里面
function getTree(){
$.post("/hrm/users/assignjob",function (data) {
alert(JSON.stringify(data.data));
zNode=data.data;
for(var i=0;i<zNode.length;i++){
if(zNode[i].isParent == 1){
zNode[i].open=true;
zNode[i].nocheck=true;
}
}
$.fn.zTree.init($("#treeDemo"), setting, zNode);
})
}这样就可以了<%@ page contentType="text/html; charset=utf-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>人力资源管理系统</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css ">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/demo.css" type="text/css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath}/Js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/Js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/Js/jquery.ztree.excheck.js"></script>
<%--<script type="text/javascript" src="${pageContext.request.contextPath}/Js/jquery.js"></script>--%>
<%--<script type="text/javascript" src="${pageContext.request.contextPath}/Js/typem.js"></script>--%>
<script type="text/javascript">
window.onload=function(){
var talentSex=$("#talentSex").val();
$("input[name='sex']").each(function(index, element) {
if($(this).val()==talentSex){
$(this).prop("checked",true);
}
});
document.getElementById("username").onblur=function(){
var name = $("#username").val();
var filter = /^[0-9A-Za-z.@-_]{6,16}$/;
var a="1";
$.ajax({
type : 'POST',
url : '${pageContext.request.contextPath}/users/verifyName?name='+name,
contentType: "application/json; charset=utf-8",
//data : {"name":name},
dataType : 'json',
success : function(data) {
if(data.code =="000001"){
console.info(data.msg)
a=data.msg;
if (filter.test(name))
{
document.getElementById("msg").innerHTML=a+'，格式正确';
}
else{
document.getElementById("msg").innerHTML='应为数字 字符 . @ - _ 字符组成 6到16个字符';
return ;
}
// document.getElementById("msg").innerHTML=data.msg;
}else if(data.code =="000002"){
a=data.msg;
//document.getElementById("msg").innerHTML=data.msg;
}
}
});
}
}
</script>
<script type="text/javascript">
function formsubmit(){
var name = $("#username").val();
var rel_name = $("#name").val();
var password = $("#password").val();
var birthday = $("#birthday").val();//获取值
var content=$("#content").val();
if (name == null || "" ==name) {
alert("用户名不能为空");
return false;
}
if (rel_name == null || "" ==rel_name) {
alert("姓名不能为空");
return;
}
if($("#msg").text() == "用户名不可用" ){
return;
}
if (password == null || "" ==password) {
alert("密码不能为空");
return;
}
if (birthday == null || "" ==birthday) {
alert("出生日期不能为空");
return;
}
var citySel=$('#citySel').val();
var data1 =$('#userForm').serialize();
console.info(JSON.stringify($('#userForm').serialize()));
$.ajax({
type : 'POST',
url : '${pageContext.request.contextPath}/users/addUser?'+data1+"&birthday="+birthday,
contentType: "application/json; charset=utf-8",
data :data1,
dataType : 'json',
error : function(data) {
alert("请求失败，网络异常")
console.log(data);
},
success : function(data) {
if(data.code =="000000") {
alert(data.msg);
$.ajax({
type : 'POST',
url : '${pageContext.request.contextPath}/users/toManage?'+data1,
contentType: "application/json; charset=utf-8",
data : null,
dataType : 'json',
});
}else{
alert(data.msg);
}
}
});
}
</script>
<script type="text/javascript">
<!--
var zNode;
var setting = {
check: {
enable: true,
chkboxType: {"Y":"", "N":""}
},
view: {
dblClickExpand: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeClick: beforeClick,
onCheck: onCheck
}
};
function getTree(){
$.post("/hrm/users/assignjob",function (data) {
alert(JSON.stringify(data.data));
zNode=data.data;
for(var i=0;i<zNode.length;i++){
if(zNode[i].isParent == 1){
zNode[i].open=true;
zNode[i].nocheck=true;
}
}
$.fn.zTree.init($("#treeDemo"), setting, zNode);
})
}
function beforeClick(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.checkNode(treeNode, !treeNode.checked, null, true);
return false;
}
function onCheck(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getCheckedNodes(true),
v = "";
vs = "";
va="";
for (var i=0, l=nodes.length; i<l; i++) {
v += nodes[i].name + ",";
vs += nodes[i].id+",";
va +=nodes[i].pId+",";
}
if (v.length > 0 ) v = v.substring(0, v.length-1);
var cityObj = $("#citySel");
cityObj.attr("value", v);
if (vs.length > 0 ) v = vs.substring(0, v.length-1);
var cityObj2 = $("#assignId2");
cityObj2.attr("value", vs);
if (va.length > 0 ) v = va.substring(0, v.length-1);
var cityObj3= $("#assignId3");
cityObj3.attr("value", va);
}
function showMenu() {
var cityObj = $("#citySel");
var cityOffset = $("#citySel").offset();
$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
$("body").bind("mousedown", onBodyDown);
}
function hideMenu() {
$("#menuContent").fadeOut("fast");
$("body").unbind("mousedown", onBodyDown);
}
function onBodyDown(event) {
if (!(event.target.id == "menuBtn" || event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
hideMenu();
}
}
$(document).ready(function(){
getTree();
});
//-->
</script>
<style type="text/css">
<!--
.atten {font-size:12px;font-weight:normal;color:#F00;}
-->
</style>
</head>
<body class="ContentBody">
<form id="userForm" >
<div class="MainDiv">
<table width="99%" border="0" cellpadding="0" cellspacing="0" class="CContent">
<tr>
<th class="tablestyle_title" >人员信息录入</th>
</tr>
<tr>
<td class="CPanel">
<table width="90%" border="0" cellpadding="0" cellspacing="0" style="width:80%" align="center">
<tr>
<td align="left">
<%--<input type="submit"value="保存" class="button"/> --%>
</td>
</tr>
<TR>
<TD width="100%">
<fieldset style="height:100%;">
<legend>人员信息</legend>
<table width="100%" border="0" cellpadding="2" cellspacing="1" style="width:100%">
<tr>
<td nowrap align="right" width="9%">用户名：</td>
<td width="36%">
<input name="username" type="text" class="input" id="username"/>
<span class="red">*</span> <span id="msg"></span></td>
<td nowrap align="right" width="9%">真实姓名：</td>
<td width="36%">
<input nam
b790
e="name" type="text" class="input" value="${name}" id="name"/>
<span class="red">*</span> </td>
</tr>
<tr>
<td width="12%"><div align="right">登陆密码：</div></td>
<td width="43%">
<input name="password" type="password" class="input" id="password" />
<span class="red">*</span></td>
<td><div align="right"><label for="birthday">出生日期：</label></div></td>
<td>
<input name="birthday" TYPE="date"value="<fmt:formatDate value="${birthday }"
pattern="yyyy-MM-dd"/>" class="input" id="birthday"/>
<span class="red">*</span></td>
<%--<input name="birthday" id="birth
day" type="text" />--%>
</td>
</tr>
<tr>
<td width="12%"><div align="right">部门及职位：</div></td>
<td width="43%">
<input id="citySel" type="text" readonly style="width:120px;" onclick="showMenu();" />
<a id="menuBtn" href="#" onclick="showMenu(); return false;">select</a>
<span class="red">*</span></td>
<td nowrap align="right" width="9%">性别：</td>
<td>
<input id="talentSex" type="hidden" value="${sex}" />
<input name="sex" type="radio" value="1" > 男
<input name="sex" type="radio" value="0" checked>女</td>
</tr>
<tr>
<%--<td nowrap align="right">是否管理员：</td>--%>
<%--<td>--%>
<%--<input type="checkbox">--%>
<%--<input type="hidden" name="isadmin" id="isadmin"></td>--%>
<td> </td>
<td> </td>
</tr>
<tr>
<td nowrap align="right">人员简介：</td>
<td colspan="3">
<textarea name="content" cols="100" rows="6" class="input" id="content"></textarea></td>
</tr>
</table>
<br />
</fieldset>
</TD>
</TR>
</TABLE>
</td>
</tr>
<TR>
<TD colspan="2" align="center" height="50px">
<%--<button onclick="submit()">保存</button>--%>
<input name="提交" type="button" class="button" value="保存" onclick="formsubmit()">
<input name="重置" type="reset" class="button" value="重置"/>
<input id="assignId2" type="hidden" value="" >
<input id="assignId3" type="hidden" value="" >
</TD>
</TR>
</TABLE>
</div>
<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
<ul id="treeDemo" class="ztree" style="margin-top:0; width:180px; height: 300px;"></ul>
</div>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- union关键字
- Android搜索TextView显示关键字标红（忽略大小写）
- Cocos2dx-lua plist文件组合显示卡牌
- 从写JTextPane组件 实现关键字高亮显示
- Daily-C-Study(3)：C语言union关键字
- zTree的调用设使用（跨两个系统，两类技术实现的项目案例SpringMVC+Spring+MyBatis和Struts2+Spring+ibatis框架组合）
- 一个窗口显示两张图
- 搜索关键字显示高亮
- Silverlight关键字返红显示
- ios中 搜索关键字在结果中高亮显示
- ztree实现权限横向显示功能
- 实现首页显示热门关键字，排序并控制显示数量--Show sorted Popular Search Terms
- 【有人@我】Android中高亮变色显示文本中的关键字
- 站内搜索 高亮显示关键字（兼容火狐 谷歌 ie）
- eclipse 关键字高亮显示
- Developer Express控件组合中的gridcontrol控件,如何自动显示每一列的序号?
- 水晶报表公式组合,推试显示报表
- Objective-C(三、类与继承,基类,self、super关键字,多态,组合)——iOS开发基础
- js代码实现查找关键字高亮显示
- 组合逻辑六三编码器实现数码管显示对应数字