jquery easyui tree 异步加载数据
//遇到的主要问题是，展开两次会重复加载，所以在属性中建立标志位，来看是否已经有了子节点（需要注意的是如果 添加了节点就要重新初始化了，否则如果有节点就不会再去请求了），
第二个困难时，无法刷新数据，附加上了节点，必须折叠再展开才行，代码需要加上
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);
}
