基于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" />

//单击选中过后的记录做选中后变色

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>

实现效果

基于zTree实现异步加载和数据回选

猜你喜欢