場景描述：某個公司有多個部門并且部門存在子部門，通過一個下拉框選取多個部門，但是如果某個部門的子部門被全部選擇，則只取該部門，而忽略子部門。（葉子節(jié)點全被選中時，只取父節(jié)點）
知識點：ComboTree、一般處理程序、遞歸、Json
效果如圖
數(shù)據(jù)庫表設計：unit_main
節(jié)點類設計：
public class Unit
{
public decimal id { get; set; }
public string text { get; set; }
public string state { get; set; }
public ListUnit> children { get; set; }
public Unit ()
{
this.children = new ListUnit>();
this.state = "open";
}
}
處理類設計：
public class UnitComponent
{
ExeceteOralceSqlHelper SqlHelper= new ExeceteOralceSqlHelper();//數(shù)據(jù)庫處理類
public UnitParent GetUnit()
{
Unit rootUnit = new Unit();
rootUnit.id = 1000;
rootUnit.text = "BO API";
rootUnit.children = GetUnitList(0);
UnitRecursive(rootUnit.children);
return rootUnit;
}
/// summary>
/// 遞歸查詢部門
/// /summary>
/// param name="units">/param>
private void UnitRecursive(ListUnit> units)
{
foreach (var item in units)
{
item.children = GetUnitList(item.id);
if (item.children != null item.children.Count > 0)
{
item.state = "closed";
UnitRecursive(item.children);
}
}
}
/// summary>
/// 通過parentID獲取所有子部門
/// /summary>
/// param name="parentID">父id/param>
/// returns>返回Unit集合/returns>
private ListUnit> GetUnitList(decimal parentID)
{
ListUnit> unitLst = new ListUnit>();
string sql = string.Format("select hh.unit_id,hh.unit_name from unit_main hh where hh.parent_id={0}", parentID);
DataTable dt = SqlHelper.ExecuteDataTable(sql);//返回DataTable方法
if (dt != null dt.Rows.Count > 0)
{
for (int i = 0; i dt.Rows.Count; i++)
{
Unit dtup = new Unit()
{
id = Convert.ToInt32(dt.Rows[i]["unit_id"]),
text = dt.Rows[i]["unit_name"].ToString()
};
unitLst.Add(dtup);
}
}
return unitLst;
}
}
下面，新建web應用程序-添加-一般處理程序，其中JavaScriptSerializer你可以換為NewtonSoft來處理
public void ProcessRequest(HttpContext context)
{
JavaScriptSerializer js = new JavaScriptSerializer();
context.Response.ContentType = "application/json";
UnitComponent uc = new SynUser.UnitComponent();
var unit = uc.GetUnit();
context.Response.Write("[" + js.Serialize(unit) + "]");
}
現(xiàn)在我們測試一下這個一般處理程序，如果像圖片一樣返回了結(jié)果說明正確：
好了，部門結(jié)構(gòu)的數(shù)據(jù)準備好了，下開始寫前臺代碼：
新建一個aspx頁面，拖一個控件
asp:TextBox ID="tbUnit" runat="server" Width="280px">/asp:TextBox>
引入相應的js，在script加入代碼
$('#tbUnit').combotree({
url: , '/unit.ashx'
cascadeCheck: true,
placeholder: "請選擇部門",
method: 'get',
required: true,
multiple: true,
onChange: function (newValue, oldValue) {
computeunit();
},
onLoadSuccess: function (node, data) {
}
});
不知你有沒有發(fā)現(xiàn)我選中的是應用管理服務中心、xiaobo、tech三個節(jié)點，但是xiaobo、tech是應用服務中心的葉子節(jié)點。需求要求，我們只需獲取應用管理服務中心節(jié)點，不需要在獲取xiaobo、tech。
所有要通過js遍歷tree來獲取我們想要的節(jié)點，computerunit方法是我們想要的。
思路為：遞歸獲取被選的子節(jié)點，然后與所選的節(jié)點作差集，最后的得到的就是被選的節(jié)點（不包括全選的子節(jié)點）
function computeunit() {
var arr = new Array();
var selectstr = $("#tbUnit").combotree("getValues").toString();
var select = selectstr.split(",");
var t = $('#tbUnit').combotree('tree'); // get the tree object
var n = t.tree('getChecked'); // get selected node
unitrecursive(t, n, arr);
alert(subtraction(select, arr).join(","));
}
/*計算數(shù)組差集
**返回結(jié)果數(shù)組
*/
function subtraction(arr1, arr2) {
var res = [];
for (var i = 0; i arr1.length; i++) {
var flag = true;
for (var j = 0; j arr2.length; j++) {
if (arr2[j] == arr1[i]) {
flag = false;
}
}
if (flag) {
res.push(arr1[i]);
}
}
return res;
}
/*獲取被選父節(jié)點的子項目
**返回結(jié)果arr里
*/
function unitrecursive(t, nodes, arr) {
for (var i = 0; i nodes.length; i++) {
if (!t.tree('isLeaf', nodes[i].target)) {
var nn = t.tree('getChildren', nodes[i].target);
for (var j = 0; j nn.length; j++) {
arr.push(nn[j].id);
}
unitrecursive(t, nn, arr);
}
}
}
以上就是ASP.NET實現(xiàn)下拉樹（Easy UI ComboTree）的全部思路，希望對大家的學習有所幫助。
您可能感興趣的文章:- 適用與firefox ASP.NET無刷新二級聯(lián)動下拉列表
- ASP.NET 2.0寫無限級下拉菜單
- asp.net DropDownList 三級聯(lián)動下拉菜單實現(xiàn)代碼
- asp.net 下拉列表無級數(shù)據(jù)綁定實現(xiàn)代碼
- asp.net 實現(xiàn)下拉框只讀功能
- ASP.NET C#生成下拉列表樹實現(xiàn)代碼
- asp.net中js+jquery添加下拉框值和后臺獲取示例
- asp.net mvc下拉框Html.DropDownList 和DropDownListFor的常用方法
- asp.net使用DataGridTree實現(xiàn)下拉樹的方法
- ASP.NET多彩下拉框開發(fā)實例
- ASP.NET實現(xiàn)級聯(lián)下拉框效果實例講解
