项目中要求对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 onclick="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]);
}
}
}