jquery easyui tree 异步加载数据

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

 

关闭

用微信“扫一扫”