您的位置:首页 > Web前端 > JQuery

jquery easyui tree 异步加载数据

2014-03-12 16:09 309 查看
//遇到的主要问题是,展开两次会重复加载,所以在属性中建立标志位,来看是否已经有了子节点(需要注意的是如果 添加了节点就要重新初始化了,否则如果有节点就不会再去请求了),
第二个困难时,无法刷新数据,附加上了节点,必须折叠再展开才行,代码需要加上
function initTree() {
myUrl = "../../Organization/GetOrganizationTree";
$.post(
myUrl,
{"isPost": 1},
function (data) {

$("#mytree").tree({
data: data,
lines:true,
onClick : function(node) {
$.cookie("level", node.attributes.level);
if (node.attributes.level == 4) {
$.cookie("curNodeId", node.id.substring(0, node.id.indexOf('_')));
$.cookie("curIsEm", node.attributes.isEm);

}
else if (node.attributes.level == 5) {

}
else {
$.cookie("curNodeId", node.id);
}
},
onBeforeExpand: function (node) {
if (node.attributes.level == 4) {

//alert(node.id+" " + node.id.indexOf("_") +" "+ node.id.substring(0, node.id.indexOf("_") - 1));
appendPost(node.id.substring(0, node.id.indexOf('_')),1, node, node.attributes.isEm);
}
else if (node.attributes.level == 5) {
appendPost(node.id, 0, node, node.attributes.isEm);

}
}

});
},
"json");

}

//添加(根据父角色查询岗位)
function appendPost(parentId, isFirst, node, isEm) {
$.post(
"../../PostManage/GetGeneralPostForTree",
{
"parentId": parentId,
"isFirst": isFirst,
"isEm": isEm
},//本层的是节点是 nodePostKind,orgId是上一层的node变量
function (jsonPost) {
//如果当前没有请求道数据
if (node.attributes.hasNode == 0 && jsonPost.postList != "") {

$('#mytree').tree('append', {
parent: node.target,
data: jsonPost.postList
});
node.attributes.hasNode = 1;
//因为附加上之后无法自动刷新,所以先合并再
$("#mytree").tree('collapse', node.target);
$("#mytree").tree('expand', node.target);
}

},
"json"
);

}


       /// <summary>
/// 获取组织结构树(感觉有点慢,后期改成异步加载)
/// </summary>
/// <param name="isPost">是否需要岗位分类信息加载</param>
/// <returns></returns>
public string GetOrganizationTree(int isPost)
{
StringBuilder result = new StringBuilder();
result.Append("[{\"id\":\"0\",\"text\":\"组织结构\",\"attributes\":{\"isKind\":\"-1\",\"level\":\"1\"},\"children\": ");

OrganizationServiceRef.ORGANIZATION_KIND[] orgKind = orgClient.GetOrgKindModelList();

result.Append("[");//肯定有分类这一层
foreach (var kindItem in orgKind)
{
result.Append("{\"id\":\"" + kindItem.PK_ORG_KIND_ID + "\",\"text\":\"" + kindItem.ORG_TYPE_NAME + "\",\"attributes\":{\"isKind\":\"1\",\"level\":\"2\"}");//,\"state\":\"closed\",\"attributes\":[{\"isKind\":\"1\"}]
OrganizationServiceRef.ORGANIZATION[] org = orgClient.GetOrganizationModelList(kindItem.PK_ORG_KIND_ID, "");
if (org.Length > 0)
{
result.Append(",\"children\":[");
foreach (var orgItem in org)
{
result.Append("{\"id\":\"" + orgItem.PK_ORG_ID + "\",\"text\":\"" + orgItem.ORG_FULL_NAME + "\"," +
"\"attributes\":{\"isKind\":\"0\",\"orgShortName\":\"" + orgItem.ORG_NAME + "\",\"orgCode\":\"" + orgItem.ORG_CODE + "\",\"orgIcon\":\"../../" + orgItem.ORG_ICON + "\",\"level\":\"3\"}");
if (isPost==1)//如果有岗位分类信息那么添加子节点
{
result.Append(",\"children\":[{\"id\":\"" + orgItem.PK_ORG_ID + "_1\",\"text\":\"岗位类型1\",\"state\": \"closed\",\"attributes\":{\"hasNode\":\"0\",\"isEm\":\"1\",\"level\":\"4\"}},{\"id\":\"" + orgItem.PK_ORG_ID + "_2\",\"text\":\"岗位类型2\",\"state\": \"closed\",\"attributes\":{\"hasNode\":\"0\",\"isEm\":\"0\",\"level\":\"4\"}}]");

}
result.Append( " },");
}
result.Remove(result.Length-1,1);
result.Append("]");
}
else
{
result.Append("");
}

result.Append("},");

}

result.Remove(result.Length - 1, 1);
result.Append("]");//第一层的children end

result.Append(" }]");
return result.ToString();

}


因为我现在做的这个是组织机构和岗位放在两个表中,以上只是生成了组织的结构,加上岗位类型。

再展开岗位类型的时候用到了异步加载,后台代码如下

public string GetGeneralPostForTree(string parentId, string isFirst, string isEm)
{

RoleServiceRef.ROLE[] postList=roleClient.GetGeneralPostList(parentId,isFirst,isEm);
StringBuilder sbJsonPost = new StringBuilder();
sbJsonPost.Append("{\"postList\":[ ");
if (postList.Length > 0)
{

foreach (var post in postList)
{
if (!(bool)post.ROLE_IS_POST)//如果不是岗位,那么在下边添加一个默认的节点,这个添加的节点在展开时如果有数据则删除掉,没有则存在加标示。
{
sbJsonPost.Append("{\"id\":\"" + post.PK_ROLE_ID + "\",\"text\":\"" + post.ROLE_NAME + "\",\"state\":\"closed\"}");

}
else
{
sbJsonPost.Append("{\"id\":\"" + post.PK_ROLE_ID + "\",\"text\":\"" + post.ROLE_NAME + "\"}");

}

sbJsonPost.Append(",");
}
sbJsonPost.Remove(sbJsonPost.Length-1, 1);
}
sbJsonPost.Append("]}");

return sbJsonPost.ToString();

}


以下是优化之后的,重点是展开时候如果有节点或者无节点如何处理

//class=1 组织结构虚拟根 2 组织分类 3 组织名称 4 管理员岗位
function initTree() {
myUrl = "../../Organization/GetOrganizationTree";
$.post(
myUrl,
{ "typeId": 2 },
function (data) {

$("#mytree").tree({
data: data,
lines: true,
onClick: function (node) {
$.cookie("level", node.attributes.level);
$.cookie("curNodeId", node.id);
if (node.attributes.level == 3) {
$.cookie("curNode",node);
$.cookie("orgId", node.id);//需要orgId
$("#curOrg").text(node.text + ">>");//点击的时候显示当前路径
$("#postName").val("");
}
else if (node.attributes.level == 4) {
//$("#curOrg").text($("#mytree").tree("getParent", node.target).text + ">>");
$("#postName").val(node.text);
}
else {
$.cookie("orgId", 0);
}

},
onBeforeExpand: function (node) {
if (node.attributes.level == 3) {
appendPost(node);
}

}

});
},
"json");

}

//添加(根据父角色查询岗位)
//orgId 组织id ;
function appendPost(node) {
$.post(
"../../PostManage/GetAdminPostForTree",
{
"orgId": node.id
},
function (jsonPost) {
if (jsonPost.postList.length > 0)
{
//如果当前请求到数据且没有child,进行附加,有数据则不附加,需要重新初始化
if (node.attributes.hasNode == 0) {
node.attributes.hasNode = 1;
$('#mytree').tree('append', {
parent: node.target,
data: jsonPost.postList
});
//因为附加上之后无法自动刷新,所以先合并再
refresh(node);
}
else
{
var children = $('#mytree').tree('getChildren', node.target);
if (children.length != jsonPost.postList.length) {
for (var i = 0; i < children.length; i++) {
$('#mytree').tree('remove', children[i].target);
}
$('#mytree').tree('append', {
parent: node.target,
data: jsonPost.postList
});
//因为附加上之后无法自动刷新,所以先合并再
refresh(node);
}
}

}
},
"json");

}

function refresh(node)
{
$("#mytree").tree('collapse', node.target);
$("#mytree").tree('expand', node.target);
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: