1,在后台向前台传递数据时,将数据打包成List<HashMap>,然后用jstl传到前台,后台代码如下:
List list = new ArrayList();
HashMap treeMap;
for (EwTreeVO vo : unitTreeData) {
treeMap = new HashMap();
treeMap.put("id",vo.getId());
treeMap.put("pId",vo.getpId());
treeMap.put("name",vo.getName());
if (StringUtil.isNotNull(idlist)) {
if (idlist.indexOf(vo.getId()) != -1) {
treeMap.put("open", true);
// vo.setOpen(true);
} else {
treeMap.put("open", false);
}
}
list.add(treeMap);
}
// response.addTree("unitTree", unitTreeData);
response.addJSTL("list", (new Gson()).toJson(list));
2,在前台遍历,并组装成树。详细js代码如下:
- 这是形成树的代码
//setting 文件部分,必须要配置
var setting = {
view: {
selectedMulti: false
},
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
},
callback: {
onCheck: onCheck
}
};
/**
* 页面初始化
*/
var zTree;
function zrar_init() {
//先初始化树的所有数据
var zNodes=[];
var list = ${list };
$.each(list, function(index, obj) {
var n = {id:obj.id, pId:obj.pId, name:obj.name,open:obj.open};
zNodes.push(n);
});
$.fn.zTree.init($("#unitTree"), setting, zNodes);
//使已有的节点打上勾
zTree = $.fn.zTree.getZTreeObj("unitTree");
var list=$("form :input[name='idListWithoutSXQ']").val().split(',');
for (var i = 0; i < list.length; i++) {
var node = zTree.getNodeByParam("id",list[i]);
zTree.checkNode(node, true, true);
}
}
- 然后完成勾选事件:
function onCheck(event,treeId, node) {
var table_ = $("#bjdcdxGridID tbody");
var checkNodes = zTree.getCheckedNodes(true)
alert(checkNodes.length)
table_.empty();
$.each(checkNodes, function (index, obj) {
if (obj.children != null && obj.children.length != null && obj.children.length > 0) {
} else {
var tr_ = $(
"<tr>" +
"<td><div class='grid-cell-div' style='width: 36px;'><input name='cjr' type='checkbox' value='" + obj.id + "'></div></td>" +
"<td><div class='grid-cell-div' style='width: 203px;' title='" + obj.id + "'>" + obj.id + "</div></td><td style='display: none;'></td>" +
"<td><div class='grid-cell-div' style='width: 203px;' title='" + obj.name + "'>" + obj.name + "</div></td></tr>"
)
table_.append(tr_);
}
});
}
最后,这是HTML的代码,很简单
<div style="width:39%;float:left;height: auto;" layoutH="1" layoutTo="assign" class="treeContainer">
<ul id="unitTree" checkType="checkbox" class="ztree"></ul>
</div>