場(chǎng)景描述：某個(gè)公司有多個(gè)部門(mén)并且部門(mén)存在子部門(mén)，通過(guò)一個(gè)下拉框選取多個(gè)部門(mén)，但是如果某個(gè)部門(mén)的子部門(mén)被全部選擇，則只取該部門(mén)，而忽略子部門(mén)。（葉子節(jié)點(diǎn)全被選中時(shí)，只取父節(jié)點(diǎn)）
知識(shí)點(diǎn)：ComboTree、一般處理程序、遞歸、Json
效果如圖
數(shù)據(jù)庫(kù)表設(shè)計(jì)：unit_main
節(jié)點(diǎn)類(lèi)設(shè)計(jì)：
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";
}
}
處理類(lèi)設(shè)計(jì)：
public class UnitComponent
{
ExeceteOralceSqlHelper SqlHelper= new ExeceteOralceSqlHelper();//數(shù)據(jù)庫(kù)處理類(lèi)
public UnitParent GetUnit()
{
Unit rootUnit = new Unit();
rootUnit.id = 1000;
rootUnit.text = "BO API";
rootUnit.children = GetUnitList(0);
UnitRecursive(rootUnit.children);
return rootUnit;
}
/// summary>
/// 遞歸查詢(xún)部門(mén)
/// /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>
/// 通過(guò)parentID獲取所有子部門(mén)
/// /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應(yīng)用程序-添加-一般處理程序，其中JavaScriptSerializer你可以換為NewtonSoft來(lái)處理
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)在我們測(cè)試一下這個(gè)一般處理程序，如果像圖片一樣返回了結(jié)果說(shuō)明正確：
好了，部門(mén)結(jié)構(gòu)的數(shù)據(jù)準(zhǔn)備好了，下開(kāi)始寫(xiě)前臺(tái)代碼：
新建一個(gè)aspx頁(yè)面，拖一個(gè)控件
asp:TextBox ID="tbUnit" runat="server" Width="280px">/asp:TextBox>
引入相應(yīng)的js，在script加入代碼
$('#tbUnit').combotree({
url: , '/unit.ashx'
cascadeCheck: true,
placeholder: "請(qǐng)選擇部門(mén)",
method: 'get',
required: true,
multiple: true,
onChange: function (newValue, oldValue) {
computeunit();
},
onLoadSuccess: function (node, data) {
}
});
不知你有沒(méi)有發(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。
所有要通過(guò)js遍歷tree來(lái)獲取我們想要的節(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)下拉樹(shù)（Easy UI ComboTree）的全部思路，希望對(duì)大家的學(xué)習(xí)有所幫助。
您可能感興趣的文章:- 適用與firefox ASP.NET無(wú)刷新二級(jí)聯(lián)動(dòng)下拉列表
- ASP.NET 2.0寫(xiě)無(wú)限級(jí)下拉菜單
- asp.net DropDownList 三級(jí)聯(lián)動(dòng)下拉菜單實(shí)現(xiàn)代碼
- asp.net 下拉列表無(wú)級(jí)數(shù)據(jù)綁定實(shí)現(xiàn)代碼
- asp.net 實(shí)現(xiàn)下拉框只讀功能
- ASP.NET C#生成下拉列表樹(shù)實(shí)現(xiàn)代碼
- asp.net中js+jquery添加下拉框值和后臺(tái)獲取示例
- asp.net mvc下拉框Html.DropDownList 和DropDownListFor的常用方法
- asp.net使用DataGridTree實(shí)現(xiàn)下拉樹(shù)的方法
- ASP.NET多彩下拉框開(kāi)發(fā)實(shí)例
- ASP.NET實(shí)現(xiàn)級(jí)聯(lián)下拉框效果實(shí)例講解
