如何用JS实现下拉框中的值树形展示

主要的思路：

将全部记录读出，在后台重组读出的Datatable，用JS绑定。

示例：

js代码

//设置用户控件中的存放附件的文件路径的下拉框中的值

SubModule_PMS_ProjTask_TaskAdd.SetUploadPath(proname.value,0,SetUploadPathDll);

c#后台代码

#region 设置附件存放位置的下拉框中的值 add by shirlly 0112

[AjaxPro.AjaxMethod]

public DataTable SetUploadPath(string str, int pProjFolderID)

{

DataSet ds = null;

if (!Equals("", str))

{

int projectID = Int32.Parse(str);

SMSIPMS.BLL.PMS_ProjFolderInfo ProFolderBll = new SMSIPMS.BLL.PMS_ProjFolderInfo();

ds = ProFolderBll.GetList(" ProjectID=" + projectID);

DataTable inDatatable = ds.Tables[0];

DataTable outDatatable = new DataTable();

outDatatable.Columns.Add("ProjFolderID", typeof(System.Int32));

outDatatable.Columns.Add("ProjFolderName", typeof(System.String));

PMS.PMSCommon.addProFoloderOtherDll("", 0, inDatatable, 1, ref outDatatable);

return outDatatable;

}

else

{

return null;

}

}

#endregion

主要展示树形的代码：

#region 构造树形结构的DataTable add by shirlly 0113

/// <summary>

/// 构造树形结构的DataTable

/// </summary>

/// <param name="Pading"></param>

/// <param name="DirId"></param>

/// <param name="inDatatable">构造之前的DataTable</param>

/// <param name="deep"></param>

/// <param name="outDatatable">构造之后的DataTable</param>

public static void addProFoloderOtherDll(string Pading, int DirId, DataTable inDatatable, int deep, ref DataTable outDatatable)

{

DataRow[] rowlist = inDatatable.Select("PProjFolderID='" + DirId + "'");

foreach (DataRow row in rowlist)

{

string strPading = "";

for (int j = 0; j < deep; j++)

{

strPading += ""; //用全角的空格

}

//添加节点

string Note = strPading + "|--" + row["ProjFolderName"].ToString();

DataRow dr = outDatatable.NewRow();

dr[0] = row["ProjFolderID"].ToString();

dr[1] = Note;

outDatatable.Rows.Add(dr);

//递归调用addOtherDll函数，在函数中把deep加1

addProFoloderOtherDll(strPading, Convert.ToInt32(row["ProjFolderID"].ToString()), inDatatable, deep + 1, ref outDatatable);

}

}

#endregion

JS代码：

//设置用户控件的下拉框中的值

function SetUploadPathDll(response)

{

var dt = response.value;

document.getElementById("MyUpdateFile_dropFileClass").options.length = 0; //通过用户控件ID+用户控件中想获得控件的ID

var UploadPathDll = document.getElementById("MyUpdateFile_dropFileClass");

UploadPathDll.options.add(new Option("--请选择--", ""));

if (dt != null)

{

for (var i = 0; i < dt.Rows.length; i++)

{

var UploadPathDll_text = dt.Rows[i]["ProjFolderName"];

var UploadPathDll_value = dt.Rows[i]["ProjFolderID"];

UploadPathDll.options.add(new Option(UploadPathDll_text, UploadPathDll_value));

}

}

}