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

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.页面效果图