项目中要求对oracle数据库查询的数据进行树形排列,每个节点初始化时就应该勾选上,参考前辈的页面,使用ztree实现布局,
首先将两个表的关联数据查询出来,这里我们已经有了两个相似的表,所以sql使用了union all这个操作符,注意union all是将查询出来的结果集的所有数据显示出来,而union 是默认去重的,示例:
SELECT column_name(s) FROM table_name1 UNION ALL SELECT column_name(s) FROM table_name2注意点:union 操作符可以合并两个及两个以上的表,但是其中的查询语句必须拥有相同数量的列,列也必须有相似的数据类型,同时,列的顺序必须相同,而且查询出的结果集中的列名总是等于第一个select的列名。
查询出的结果集数据用一个自定义List容器存储,这里我查询出两个list,一个是没有勾选状态下的数据,一个是初始化查询已经存在于数据库中的数据(用于初始化勾选复选框),示例:
alllist = datashareMng.SelectMetaTableByAll(mapBean, domainidt);
// 页面返回 tws username 通过username 查找web表
messageidlist = datashareMng.SelectwebByname(username);
前台页面代码(使用了freeworker):
<div style="width:500px;margin:0 auto">
<@p.form id="submitForm" action="${base}/admin/pacdataprocess/CenterStatNew_TwsUserConfigupdate" >
<input type="hidden" name="username" value = "${username!}"/>
<input type="hidden" name="ip" value = "${ip!}"/>
<table class='MzTreeViewRow' style="background:#EEEEEE;border-top:1px solid #CCCCCC;magrin:auto">
<tr>
<th class='MzTreeViewCell0'>${domainname}</th>
</tr>
</table>
<div id="tree" style="margin:auto"></div>
<script language="javascript" type="text/javascript">
/* 注释部分是显示树形菜单的第二列,开启显示两行竖列
var MzTreeViewTH="<table class='MzTreeViewRow'><tr><td class='MzTreeViewCell0'>";
var MzTreeViewTD="\"</td><td class='MzTreeViewCell1'>\"+ sid +\"</td></tr></table>\""; */
var MzTreeViewTH="<table class='MzTreeViewRow'><tr><td class='MzTreeViewCell0'></td></tr></table>";
window.tree = new MzTreeView("tree");
tree.icons["root"] = "root.png";
tree.setIconPath("${base}/common_res/img/MzTree/"); //可用相对路径
var domianid = "${domainidt!}";
domianid = "0_"+domianid;
tree.N[domianid]="T:接口目录;C:L(010,1)";//domainid 是动态的可以写死
<#list alllist as menu> //查询出的所有数据的集合
tree.N["${menu.PRENTID?default('')}_${menu.ID?default('')}"] = "ctrl:ids;checked:${isadd?string};T:${menu.NAME?default('')};"//ID 和 NAME 是查询出的结果集的列名
</#list>
tree.setURL("#");
tree.wordLine = false;
//tree.setTarget("main");
document.getElementById("tree").innerHTML=tree.toString();
tree.expandAll();
//-->
</script>
<@p.td><@p.button οnclick="update(username='${username}');" value="保存"/> <@p.reset value="重置" /></@p.td>
</@p.form>
</div>
js部分代码:
//初始化勾选
function setChecked(){
var mk=new Array();
<#if messageidlist??&&messageidlist?size gt 0>//messageidlist为查询出的要勾选数据的集合
<#list messageidlist as mkid>
mk.push('${mkid.messageid}');
</#list>
</#if>
if(mk.length>0){
var checkObj=document.getElementsByName('ids');
for(var i=0,il=checkObj.length;i<il;i++){
var __checkObj=checkObj[i];
for(var m=0,ml=mk.length;m<ml;m++){
var value=__checkObj.value;
if(mk[m]==value){
__checkObj.checked=true;//true为勾选状态
}
}
}
}
}
返回勾选的数据,只需要对传回来的ids数组进行遍历获取,在action中赋予ids[ ]的get set 方法便可以获取。
返回获取的勾选数据,示例:
// 获取传递的username
// 获取ids
if (username != null) {
// datashareMng.deluserconfig(username);(删除接口)
messageidlist = datashareMng.SelectwebByname(username);
if (messageidlist.size() != 0) {
datashareMng.deluserweb(username);
if (ids != null) {
for (int x = 0; x < ids.length; x++) {
datashareMng.insertuserweb(username, ids[x]);
}
} else {
logger.debug("节点为空!");
ip = ip;
username = username;
this.TwsUserConfig();
return "TwsUserConfig";
}
} else {
for (int x = 0; x < ids.length; x++) {
datashareMng.insertuserweb(username, ids[x]);
}
}
}