基于zTree实现异步加载和数据回选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../../../css/tree/tree.css" />
<link rel="stylesheet" href="../../../css/ztree/zTreeStyle.css" />
</head>
<body style="padding-top: 8px; padding-left: 10px;">
<div id="EditDiv" style="padding-top: 5px; padding-bottom: 5px">
</div>
<div class="centerdiv" style="width:95%;">
<div style="width:78%;">
<table id="list_table" style="width: 95%;">
<tr>
<th width="20px">
编号
</th>
<th width="50px">
分组名称
</th>
<th width="50px">
类型编号
</th>
<th width="50px">
类型名称
</th>
<th width="50px">
是否**
</th>
<th style="display:none;" width="50px">
人员
</th>
<th width="15px"></th>
</tr>
<tr id="template" onClick="showTree(this)" title="单击查看接收人">
<td ncLabel="true" name="id" ></td>
<td ncLabel="true" name="tname"></td>
<td ncLabel="true" name="typeno"></td>
<td ncLabel="true" name="ttname"></td>
<td ncLabel="true" name="isenable"></td>
<td style="display:none;" ncLabel="true" name="users"></td>
<td>
<img src="../../../images/modify.gif"
imgType="button" hideValue="" onclick="loadInfo(this)"
style="cursor: hand"/>
</td>
</tr>
</table>
<div id="page" style="width:100%;float:left"></div>
</div>
<div id="tree" style="text-align:center;width:20%;height:95%;border: 1px grey solid;position: absolute;top:10px;right:5%;">
<div id="msg" style="position: absolute;left:15%;top:100px;">
<i>温馨提示:单击行记录查看短信分组接收人...</i>
</div>
<div id="userTree">
<ul id="browser" class="ztree">
</ul>
</div>
</div>
</div>
<input type=hidden id="userId" name="userId" class="inputtxt" />
<input type=hidden id="etype" name="etype" class="inputtxt" />
<input type=hidden id="users" name="userName" class="inputtxt" />
<br />
</body>
<script type="text/javascript">
$("#msg").hide();
if(tr!=null){
tr.removeAttribute("bgcolor");
}
tr=obj;
tr.setAttribute("bgcolor","#87CEEB");
//获取选择的行记录 用户信息 下标为5
var users=JSON.parse(obj.getElementsByTagName("td")[5].innerText);
var path="/Smecs_Web";
var userId="";
var userName="";
var etype="";
//遍历返回的信息 进行数据拆分
for(var i=0;i<users.length;i++){
if(i==users.length-1){
userId+=users[i].userId;
userName+=users[i].userName;
etype+=users[i].etype;
}else{
userId+=users[i].userId+",";
userName+=users[i].userName+",";
etype+=users[i].etype+",";
}
}
//获取用户名集合
$("#users").val(userName);
//获取用户ID集合
$("#userId").val(userId);
//获取新增时 对应的父级ID
$("#etype").val(etype);
var userIds=$("#userId").val().split(",");
var users=$("#users").val().split(",");
var etypes=$("#etype").val().split(",");
var array=[];
var etypeObj={};
//数据组装
for(var i=0;i<users.length;i++){
var arrobj={};
arrobj.name=users[i];
arrobj.value=userIds[i];
arrobj.etype=etypes[i];
array[i]=arrobj;
}
//数据组装 格式为{"4":[{"name":"test","value":"test1","etype":"4"}],"5":[{"name":"test2","value":"test2","etype":"5"}]};
var etypeObj=arrayGrouping(etypeObj,array,"etype");
//是否展开
var expand=false;
var zTreeObj;
var obj1 = [ {
requestType : "GET",
url : path+"/Flow/departments",
parameter : [ "sortNo", "name", "id" ]
}, {
requestType : "GET",
url : path+"/Flow/staffs",
parameter : ["depNo", "msgStaffs", "phoneNo", "userName", "userId"]
}];
var num = 0;
var parameter = obj1[0].parameter;
//先查询部门
$.get(path+"/Flow/departments",function(res) {
var data = [];
res = JSON.parse(res);
for ( var i = 0; i < res.data.msgDepartments.length; i++) {
data[i] = {
id : res.data.msgDepartments[i][parameter[2]],
name : res.data.msgDepartments[i][parameter[1]],
children : [],
isParent : true
};
}
if (data.length == 0) {
alert("该部门下无相关数据");
return false;
}
var obj = obj1[1];
//子级
setting = {
view : {
selectedMulti : true
},
check: {
enable: true
},
async : {
enable : true,
type : obj1[1].requestType,
url : obj1[1].url,
autoParam : [ 'id='+ obj1[1].parameter[0] ],
dataFilter : ajaxDataFilter
},
callback : {
onAsyncSuccess: onExpand
}
},
zTreeNodes = [{
"name" : "人员信息",
open : true,
children : data
}];
function onExpand(event,treeId,treeNode,msg) {
//遍历展开后的节点进行选中
function getNodeChecked(treeNode){
for(var q in etypeObj){
for (var h =0;h<etypeObj[q].length;h++){
zTreeObj.checkNode(treeNode.children[g], true, true,true );
}
}
}
}
}
if(treeNode){
if(treeNode.level==0&&!expand)return;
//使用递归进行逐级异步请求并展开
function expandChildNode(treeNode){
if(treeNode.children!=undefined){
if (treeNode.children.length!=0){
getNodeChecked(treeNode);
for(var child=0; child<treeNode.children.length;child++){
for(var q in etypeObj){
for (var h =0;h<etypeObj[q].length;h++){
var id=etypeObj[q][h].value.substring(0,treeNode.children[child].level*3);
if(id==treeNode.children[child].id){
zTreeObj.expandNode(treeNode.children[child], true, false, false,true,false);
}
}
}
}
}
}
}
expandChildNode(treeNode);
expand=true;
}
}
function ajaxDataFilter(treeId, parentNode,responseData) {
if (responseData) {
if (responseData.status.success == null) {
alert(responseData.status.errorMsg);
return false
}
var data1 = [];
for ( var i = 0; i < responseData.data[obj.parameter[1]].length; i++) {
data1[i] = {
id : responseData.data[obj.parameter[1]][i][obj.parameter[4]],
phoneNo : responseData.data[obj.parameter[1]][i][obj.parameter[2]],
name : responseData.data[obj.parameter[1]][i][obj.parameter[3]],
etype : responseData.data[obj.parameter[1]][i][obj.parameter[4]],
isParent : true,
children : []
};
/* if (obj.parameter[0] == "typeid")
data1[i].isParent = false; */
if (obj.parameter[0] == "depNo") {
data1[i].isParent = false;
data1[i].etype = parentNode.id;
}
}
}
responseData = data1;
return data1;
}
//加载树形
zTreeObj =$.fn.zTree.init($("#browser"), setting, zTreeNodes);
//回选
function getCaheData() {
var array=[];
var ind=0;
for(var k in etypeObj){
var node = zTreeObj.getNodeByParam("id", k, null);
array.push(node);
}
for(ind=0;ind<array.length;ind++){
if(array[ind]){
expand=true;
zTreeObj.expandNode(array[ind], true, true, false,true,false);
}
}
}
getCaheData();
});
}
//数据分组
function arrayGrouping(obj,array,para){
for (var i = 0; i < array.length; i++) {
if (obj[array[i][para]]) {
obj[array[i][para]].push(array[i])
}
else {
obj[array[i][para]] = [array[i]]
}
}
return obj;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../../../css/tree/tree.css" />
<link rel="stylesheet" href="../../../css/ztree/zTreeStyle.css" />
<script type="text/javascript" src="../../../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../../../js/ztree/zTrees.js"></script>
<script type="text/javascript" src="../../../js/check.js"></script>
<script type="text/javascript" src="../../flow_page/js/checkBox.js"></script></head>
<body style="padding-top: 8px; padding-left: 10px;">
<div id="EditDiv" style="padding-top: 5px; padding-bottom: 5px">
</div>
<div class="centerdiv" style="width:95%;">
<div style="width:78%;">
<table id="list_table" style="width: 95%;">
<tr>
<th width="20px">
编号
</th>
<th width="50px">
分组名称
</th>
<th width="50px">
类型编号
</th>
<th width="50px">
类型名称
</th>
<th width="50px">
是否**
</th>
<th style="display:none;" width="50px">
人员
</th>
<th width="15px"></th>
</tr>
<tr id="template" onClick="showTree(this)" title="单击查看接收人">
<td ncLabel="true" name="id" ></td>
<td ncLabel="true" name="tname"></td>
<td ncLabel="true" name="typeno"></td>
<td ncLabel="true" name="ttname"></td>
<td ncLabel="true" name="isenable"></td>
<td style="display:none;" ncLabel="true" name="users"></td>
<td>
<img src="../../../images/modify.gif"
imgType="button" hideValue="" onclick="loadInfo(this)"
style="cursor: hand"/>
</td>
</tr>
</table>
<div id="page" style="width:100%;float:left"></div>
</div>
<div id="tree" style="text-align:center;width:20%;height:95%;border: 1px grey solid;position: absolute;top:10px;right:5%;">
<div id="msg" style="position: absolute;left:15%;top:100px;">
<i>温馨提示:单击行记录查看短信分组接收人...</i>
</div>
<div id="userTree">
<ul id="browser" class="ztree">
</ul>
</div>
</div>
</div>
<input type=hidden id="userId" name="userId" class="inputtxt" />
<input type=hidden id="etype" name="etype" class="inputtxt" />
<input type=hidden id="users" name="userName" class="inputtxt" />
<br />
</body>
<script type="text/javascript">
//单击选中过后的记录 做选中后变色
var tr=null;
//obj选中的行记录
//树形回填
//obj 单击行选中的记录
function showTree(obj){
//隐藏提示消息$("#msg").hide();
if(tr!=null){
tr.removeAttribute("bgcolor");
}
tr=obj;
tr.setAttribute("bgcolor","#87CEEB");
//获取选择的行记录 用户信息 下标为5
var users=JSON.parse(obj.getElementsByTagName("td")[5].innerText);
var path="/Smecs_Web";
var userId="";
var userName="";
var etype="";
//遍历返回的信息 进行数据拆分
for(var i=0;i<users.length;i++){
if(i==users.length-1){
userId+=users[i].userId;
userName+=users[i].userName;
etype+=users[i].etype;
}else{
userId+=users[i].userId+",";
userName+=users[i].userName+",";
etype+=users[i].etype+",";
}
}
//获取用户名集合
$("#users").val(userName);
//获取用户ID集合
$("#userId").val(userId);
//获取新增时 对应的父级ID
$("#etype").val(etype);
var userIds=$("#userId").val().split(",");
var users=$("#users").val().split(",");
var etypes=$("#etype").val().split(",");
var array=[];
var etypeObj={};
//数据组装
for(var i=0;i<users.length;i++){
var arrobj={};
arrobj.name=users[i];
arrobj.value=userIds[i];
arrobj.etype=etypes[i];
array[i]=arrobj;
}
//数据组装 格式为{"4":[{"name":"test","value":"test1","etype":"4"}],"5":[{"name":"test2","value":"test2","etype":"5"}]};
var etypeObj=arrayGrouping(etypeObj,array,"etype");
//是否展开
var expand=false;
var zTreeObj;
var obj1 = [ {
requestType : "GET",
url : path+"/Flow/departments",
parameter : [ "sortNo", "name", "id" ]
}, {
requestType : "GET",
url : path+"/Flow/staffs",
parameter : ["depNo", "msgStaffs", "phoneNo", "userName", "userId"]
}];
var num = 0;
var parameter = obj1[0].parameter;
//先查询部门
$.get(path+"/Flow/departments",function(res) {
var data = [];
res = JSON.parse(res);
for ( var i = 0; i < res.data.msgDepartments.length; i++) {
data[i] = {
id : res.data.msgDepartments[i][parameter[2]],
name : res.data.msgDepartments[i][parameter[1]],
children : [],
isParent : true
};
}
if (data.length == 0) {
alert("该部门下无相关数据");
return false;
}
var obj = obj1[1];
//子级
setting = {
view : {
selectedMulti : true
},
check: {
enable: true
},
async : {
enable : true,
type : obj1[1].requestType,
url : obj1[1].url,
autoParam : [ 'id='+ obj1[1].parameter[0] ],
dataFilter : ajaxDataFilter
},
callback : {
onAsyncSuccess: onExpand
}
},
zTreeNodes = [{
"name" : "人员信息",
open : true,
children : data
}];
function onExpand(event,treeId,treeNode,msg) {
//遍历展开后的节点进行选中
function getNodeChecked(treeNode){
for(var q in etypeObj){
for (var h =0;h<etypeObj[q].length;h++){
for(var g =0;g<treeNode.children.length;g++){
if(treeNode.children[g].id==etypeObj[q][h].value&&treeNode.children[g].etype==etypeObj[q][h].etype){zTreeObj.checkNode(treeNode.children[g], true, true,true );
}
}
}
}
}
if(treeNode){
if(treeNode.level==0&&!expand)return;
//使用递归进行逐级异步请求并展开
function expandChildNode(treeNode){
if(treeNode.children!=undefined){
if (treeNode.children.length!=0){
getNodeChecked(treeNode);
for(var child=0; child<treeNode.children.length;child++){
for(var q in etypeObj){
for (var h =0;h<etypeObj[q].length;h++){
var id=etypeObj[q][h].value.substring(0,treeNode.children[child].level*3);
if(id==treeNode.children[child].id){
zTreeObj.expandNode(treeNode.children[child], true, false, false,true,false);
}
}
}
}
}
}
}
expandChildNode(treeNode);
expand=true;
}
}
function ajaxDataFilter(treeId, parentNode,responseData) {
if (responseData) {
if (responseData.status.success == null) {
alert(responseData.status.errorMsg);
return false
}
var data1 = [];
for ( var i = 0; i < responseData.data[obj.parameter[1]].length; i++) {
data1[i] = {
id : responseData.data[obj.parameter[1]][i][obj.parameter[4]],
phoneNo : responseData.data[obj.parameter[1]][i][obj.parameter[2]],
name : responseData.data[obj.parameter[1]][i][obj.parameter[3]],
etype : responseData.data[obj.parameter[1]][i][obj.parameter[4]],
isParent : true,
children : []
};
/* if (obj.parameter[0] == "typeid")
data1[i].isParent = false; */
if (obj.parameter[0] == "depNo") {
data1[i].isParent = false;
data1[i].etype = parentNode.id;
}
}
}
responseData = data1;
return data1;
}
//加载树形
zTreeObj =$.fn.zTree.init($("#browser"), setting, zTreeNodes);
//回选
function getCaheData() {
var array=[];
var ind=0;
for(var k in etypeObj){
var node = zTreeObj.getNodeByParam("id", k, null);
array.push(node);
}
for(ind=0;ind<array.length;ind++){
if(array[ind]){
expand=true;
zTreeObj.expandNode(array[ind], true, true, false,true,false);
}
}
}
getCaheData();
});
}
//数据分组
function arrayGrouping(obj,array,para){
for (var i = 0; i < array.length; i++) {
if (obj[array[i][para]]) {
obj[array[i][para]].push(array[i])
}
else {
obj[array[i][para]] = [array[i]]
}
}
return obj;
}
</script>
</html>
实现效果