The implementation process of the asp.net tree--Practical skills

Scenario Description: A company has multiple departments and departments have a child department, a drop-down box to select multiple departments, but if a department of the child departments are all selected, only the department, and ignore the child departments. (When the leaf node is all selected, only the parent node is taken)

Knowledge Points: Combotree, general handlers, recursion, Json

Effect as shown

database table Design: Unit_main

Node class 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 class 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 Unit
  Recursive (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>///to get all child departments by ParentID///</summary>///<param name= "ParentID" > Parent Id</para M>///<returns> return to unit collection </returns> private list<unit> getunitlist (decimal parentid) {List<un
  it> 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);//Returns the 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 new Web application-add-General handler, where javascriptserializer you can swap it for Newtonsoft to handle

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 we're going to test this generic handler, and if it returns the same as a picture, the result is correct:

Well, the departmental structure of the data is ready to start writing the foreground code:

Create a new ASPX page, drag a control

<asp:textbox id= "Tbunit" runat= "Server" width= "280px" ></asp:TextBox>

Introduce the corresponding JS, add the code in the script

$ (' #tbUnit '). Combotree ({
 URL:, '/unit.ashx '
 cascadecheck:true,
 placeholder: "Please select Department", Method
 : ' Get ',
 required:true,
 multiple:true,
 onchange:function (newvalue, oldValue) {
 computeunit ();
 } ,
 onloadsuccess:function (node, data) {
    
 }
});

I do not know if you have found that I selected the Application Management Service Center, Xiaobo, tech three nodes, but Xiaobo, Tech is the Application Service center of the leaf node. requirements, we simply get the Application Management Service Center node, do not need to get Xiaobo, tech.

All we want to do is to traverse the tree through JS to get the node we want, and the Computerunit method is what we want.

The idea is: to get the selected child node recursively and then to make a difference set with the selected node, and finally get the selected node (excluding all the selected child nodes)

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 (","));
  /* COMPUTE Array Difference set * * Return 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 child item of the selected parent node * * return result 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);

 }
  }
 }

The above is asp.net implementation of the dropdown tree (easy UI combotree) All the ideas, I hope to help you learn.