Asp.net下拉樹的實(shí)現(xiàn)過程
場景描述:某個(gè)公司有多個(gè)部門并且部門存在子部門,通過一個(gè)下拉框選取多個(gè)部門,但是如果某個(gè)部門的子部門被全部選擇,則只取該部門,而忽略子部門。(葉子節(jié)點(diǎn)全被選中時(shí),只取父節(jié)點(diǎn))
知識(shí)點(diǎn):ComboTree、一般處理程序、遞歸、Json
效果如圖
數(shù)據(jù)庫表設(shè)計(jì):unit_main
節(jié)點(diǎn)類設(shè)計(jì):
public class Unit { public decimal id { get; set; } public string text { get; set; } public string state { get; set; } public List<Unit> children { get; set; } public Unit () { this.children = new List<Unit>(); this.state = "open"; } }
處理類設(shè)計(jì):
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(List<Unit> 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 List<Unit> GetUnitList(decimal parentID) { List<Unit> unitLst = new List<Unit>(); 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應(yīng)用程序-添加-一般處理程序,其中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)在我們測試一下這個(gè)一般處理程序,如果像圖片一樣返回了結(jié)果說明正確:
好了,部門結(jié)構(gòu)的數(shù)據(jù)準(zhǔn)備好了,下開始寫前臺(tái)代碼:
新建一個(gè)aspx頁面,拖一個(gè)控件
<asp:TextBox ID="tbUnit" runat="server" Width="280px"></asp:TextBox>
引入相應(yīng)的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)我選中的是應(yīng)用管理服務(wù)中心、xiaobo、tech三個(gè)節(jié)點(diǎn),但是xiaobo、tech是應(yīng)用服務(wù)中心的葉子節(jié)點(diǎn)。需求要求,我們只需獲取應(yīng)用管理服務(wù)中心節(jié)點(diǎn),不需要在獲取xiaobo、tech。
所有要通過js遍歷tree來獲取我們想要的節(jié)點(diǎn),computerunit方法是我們想要的。
思路為:遞歸獲取被選的子節(jié)點(diǎn),然后與所選的節(jié)點(diǎn)作差集,最后的得到的就是被選的節(jié)點(diǎn)(不包括全選的子節(jié)點(diǎn))
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(",")); } /*計(jì)算數(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é)點(diǎn)的子項(xiàng)目 **返回結(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實(shí)現(xiàn)下拉樹(Easy UI ComboTree)的全部思路,希望對大家的學(xué)習(xí)有所幫助。
- 適用與firefox ASP.NET無刷新二級聯(lián)動(dòng)下拉列表
- ASP.NET 2.0寫無限級下拉菜單
- asp.net DropDownList 三級聯(lián)動(dòng)下拉菜單實(shí)現(xiàn)代碼
- asp.net 下拉列表無級數(shù)據(jù)綁定實(shí)現(xiàn)代碼
- asp.net 實(shí)現(xiàn)下拉框只讀功能
- ASP.NET C#生成下拉列表樹實(shí)現(xiàn)代碼
- asp.net中js+jquery添加下拉框值和后臺(tái)獲取示例
- asp.net mvc下拉框Html.DropDownList 和DropDownListFor的常用方法
- asp.net使用DataGridTree實(shí)現(xiàn)下拉樹的方法
- ASP.NET多彩下拉框開發(fā)實(shí)例
相關(guān)文章
.NET Core使用EF生成數(shù)據(jù)庫出錯(cuò)的解決方法
這篇文章介紹了.NET Core使用EF生成數(shù)據(jù)庫出錯(cuò)的解決方法,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-01-01一個(gè)比較通用的分頁控件,完整的設(shè)計(jì)時(shí)支持和比較流行的分頁模式(提供源碼下載)
本分頁控件還包含簡單屬性,復(fù)雜屬性,自定義視圖狀態(tài),分頁事件,創(chuàng)建控件,render控件,Attribute,設(shè)計(jì)時(shí)支持等比較齊全的自定義控件的元素,是個(gè)不錯(cuò)學(xué)習(xí)自定義控件開發(fā)的例子2010-12-12使用ASP.NET MVC 4 Async Action+jQuery實(shí)現(xiàn)消息通知機(jī)制的實(shí)現(xiàn)代碼
這兩天在使用Asp.net MVC 4開發(fā)COMET消息通知機(jī)制,在后端使用異步線程對消息進(jìn)行訂閱,客戶端通過AJAX長連接請求MVC中的ACTION2013-02-02asp.net源程序編譯為dll文件并調(diào)用的實(shí)現(xiàn)過程
這篇文章主要介紹了asp.net源程序編譯為dll文件并調(diào)用的實(shí)現(xiàn)過程,非常有實(shí)用價(jià)值,需要的朋友可以參考下2014-07-07.NET?Core使用Eureka實(shí)現(xiàn)服務(wù)注冊
這篇文章介紹了.NET?Core使用Eureka實(shí)現(xiàn)服務(wù)注冊的方法,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-07-07ASP.net 驗(yàn)證碼實(shí)現(xiàn)代碼(C#)
asp.net 驗(yàn)證碼效果實(shí)現(xiàn)代碼2008-02-02ASP.NET Core MVC/WebApi基礎(chǔ)系列2
這篇文章主要介紹了.NET Core當(dāng)中的模型綁定系統(tǒng)、模型綁定原理、自定義模型綁定、混合綁定、ApiController特性本質(zhì)。2019-04-04