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