Implementation Process of Asp.net drop-down tree, asp.net drop-down tree

Implementation Process of Asp.net drop-down tree, asp.net drop-down tree

Scenario: A company has multiple departments and departments have sub-departments. Select multiple departments from a drop-down list. However, if all sub-departments of a department are selected, only the department is selected, ignore sub-departments. (When all leaf nodes are selected, only the parent node is used)

Knowledge Point: ComboTree, general processing program, recursion, Json

Effect

 

Database Table Design: unit_main

 

Node design:

 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"; } }

Processing Design:

Public class UnitComponent {ExeceteOralceSqlHelper SqlHelper = new ExeceteOralceSqlHelper (); // database processing class public UnitParent GetUnit () {Unit rootUnit = new Unit (); rootUnit. id = 1000; rootUnit. text = "bo api"; rootUnit. children = GetUnitList (0); UnitRecursive (rootUnit. children); return rootUnit ;} /// <summary> /// recursive query Department /// </summary> /// <param name = "units"> </param> private void UnitRecursive (List <un It> 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> /// obtain all sub-departments through parentID /// </summary> /// <param name = "parentID"> parent id </param>/ // <returns> returns the Unit set </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); // return DataTable method 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 ;}}

Next, create a web application-add-General processing program. Replace JavaScriptSerializer with NewtonSoft for processing.

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) + "]");}

Now let's test this general processing program. If the result is returned like an image, the explanation is correct:

Now, the data in the Department structure is ready, and you can start to write the front-end code:

Create An aspx page and drag a control

<asp:TextBox ID="tbUnit" runat="server" Width="280px"></asp:TextBox>

Introduce the corresponding js and add code to the script

$ ('# TbUnit '). combotree ({url:, '/unit. ashx 'cascadecheck: true, placeholder: "select a department", method: 'get', required: true, multiple: true, onChange: function (newValue, oldValue) {computeunit () ;}, onLoadSuccess: function (node, data ){}});

 

I wonder if you have found that I have selected three nodes: Application Management Service Center, xiaobo, and tech. However, xiaobo and tech are the leaf nodes of the Application Service Center. Requirements: we only need to obtain the application management service center node, and do not need to obtain xiaobo and tech.

All the nodes we want are retrieved through the js traversal tree. The computerunit method is what we want.

The idea is: recursively obtain the selected subnode and set the difference with the selected node. The final result is the selected node (excluding all selected subnodes)

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 (",");}/* calculate the array difference set ** returned result array */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;}/* get the sub-project of the selected parent node ** return results in arr */function unitrecursive (t, nodes, arr) {for (var I = 0; I <nodes. length; I ++) {if (! T. tree ('isleaf', nodespolici2.16.tar get) {var nn = t. tree ('getchildren ', nodespolici2.16.tar get); for (var j = 0; j <nn. length; j ++) {arr. push (nn [j]. id) ;}unitrecursive (t, nn, arr );}}}

The above are all the ideas for implementing the Easy UI ComboTree in ASP. NET. I hope it will be helpful for everyone's learning.