js生成tree形组织机构下拉框

时间：2019-03-14 00:51:04 阅读：234 评论：0 收藏：0 [点我收藏+]

1.首先我们正常数据是如下所示：
[
{ id: 1, pid: 0, name: ‘公司组织‘ },
{ id: 2, pid: 1, name: ‘总经办‘ },
{ id: 3, pid: 1, name: ‘人事部‘ },
{ id: 4, pid: 1, name: ‘生产部‘ },
{ id: 5, pid: 4, name: ‘现场组‘ },
{ id: 6, pid: 4, name: ‘组装组‘ },
]
 
2.我们最好在后台组装成json格式数据，如下显示：
[
{ id: 1, pid: 0, name: ‘公司组织‘,
 children:[
   { id: 2, pid: 1, name: ‘总经办‘}
   { id: 3, pid: 1, name: ‘人事部‘ }
　　　{ id: 4, pid: 1, name: ‘生产部‘ },children:[{ id: 5, pid: 4, name: ‘现场组‘ }{ id: 6, pid: 4, name: ‘组装组‘ }]},
   ]
},
{ id: 1, pid: 0, name: ‘公司组织‘,
 children:[
   { id: 2, pid: 1, name: ‘总经办‘}
   { id: 3, pid: 1, name: ‘人事部‘ }
　　　{ id: 4, pid: 1, name: ‘生产部‘ },children:[{ id: 5, pid: 4, name: ‘现场组‘ }{ id: 6, pid: 4, name: ‘组装组‘ }]},
   ]
},]
 
3.后台代码使用递归：
public string GetOrganizationTreeJson()
        {
            StringBuilder sbResult = new StringBuilder();
            IList<SYS_Organization> orgList = sysPublicService.GetOrganizationList();//获取所有组织机构数据
            if (orgList.Count > 0)
            {
                sbResult.Append("[{\"id\":0,\"name\": \"组织机构\",\"children\": ");
                sbResult.Append(CreateOrganizationTreeJsonByModel(orgList, null));
                sbResult.Append("}]");
            }
            else
            {
                sbResult.Append("[{\"id\":0,\"name\": \"组织机构\",\"children\": []}]");
            }
            return sbResult.ToString();
        }
private string CreateOrganizationTreeJsonByModel(IList<SYS_Organization> list, string pId)
        {
            StringBuilder sbResult = new StringBuilder();
            if (list.Count > 0)
            {
                sbResult.Append("[");
                IList<SYS_Organization> models = list.Where(m => m._parentId == pId).ToList();
                if (models.Count > 0)
                {
                    foreach (SYS_Organization m in models)
                    {
                        sbResult.Append("{\"id\":\"" + m.org_id + "\",\"name\":\"" + m.org_name + "(" + m.org_code + ")\",\"state\":\"open\"");
                        if (list.Count(mm => mm._parentId == m.org_id) > 0)
                        {
                            sbResult.Append(",\"children\":");
                            sbResult.Append(CreateOrganizationTreeJsonByModel(list, m.org_id));
                        }
                        sbResult.Append("},");
                    }
                    sbResult = sbResult.Remove(sbResult.Length - 1, 1);
                }

                sbResult.Append("]");
            }

            return sbResult.ToString();
        }
 
4.在网页中添加下拉框容器
<select id="selectbox" name=""></select>
 
5.js脚本，递归生成
//获取容器对象
var selectbox=document.getElementById("selectbox"); 
//生成树下拉菜单
var j="-";//前缀符号，用于显示父子关系，这里可以使用其它符号
function creatSelectTree(d){
 var option="";
 for(var i=0;i<d.length;i++){
 if(d[i].children!= undefined){//如果有子集
  option+="<option value=‘"+d[i].id+"‘>"+j+d[i].name+"</option>";
 j+="-";//前缀符号加一个符号
  option+=creatSelectTree(d[i].children);//递归调用子集
 j=j.slice(0,j.length-1);//每次递归结束返回上级时，前缀符号需要减一个符号
  }else{//没有子集直接显示
  option+="<option value=‘"+d[i].id+"‘>"+j+d[i].name+"</option>";
  }
  }
 return option;//返回最终html结果
 } 
//调用函数，并将结构出入到下拉框容器中
selectbox.innerHTML=creatSelectTree(tree);
 
6.页面效果图
 
 
 
 

js生成tree形组织机构下拉框

标签：pac box comm fun 返回 UNC res mic key

原文地址：https://www.cnblogs.com/lijl/p/10527470.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行