Asp.net 드 롭 다운 트 리 의 실현 과정

6146 단어 Asp.net낙엽수
장면 설명:한 회사 에 여러 개의 부서 가 있 고 부서 에 서브 부서 가 존재 하 며 하나의 드 롭 다운 박스 를 통 해 여러 개의 부 서 를 선택 하지만 특정한 부서 의 서브 부서 가 모두 선택 되면 이 부서 만 취하 고 서브 부 서 를 소홀히 한다(잎 사 귀 노드 가 모두 선택 되 었 을 때 부모 노드 만 가 져 옵 니 다)
지식 포인트:ComboTree,일반 처리 프로그램,귀속,JSon
효과
 
데이터베이스 테이블 디자인:unitmain
 
노드 클래스 디자인:

 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";
 }
 }
처리 클래스 디자인:

public class UnitComponent
 {
 ExeceteOralceSqlHelper SqlHelper= new ExeceteOralceSqlHelper();//      
 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;
 }
}
다음은 새 웹 프로그램-추가-일반 처리 프로그램 입 니 다.그 중에서 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) + "]");
}
이제 이 일반 처리 프로그램 을 테스트 해 보 겠 습 니 다.그림 처럼 결 과 를 되 돌려 주면 정확 합 니 다.

자,부서 구조의 데이터 가 준비 되 었 습 니 다.다음 에 프론트 코드 를 쓰기 시작 합 니 다.
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) {
    
 }
});
 
제 가 선택 한 것 이 응용 관리 서비스 센터,xiaobo,tech 세 노드 인 것 을 발 견 했 는 지 모 르 겠 지만 xiaobo,tech 는 응용 서비스 센터 의 잎 노드 입 니 다.수요 요구 에 따라 저 희 는 응용 관리 서비스 센터 노드 만 얻 고 xiaobo,tech 를 얻 을 필요 가 없습니다.
js 를 통 해 tree 를 옮 겨 다 니 며 우리 가 원 하 는 노드 를 얻 으 려 면 coptute runit 방법 은 우리 가 원 하 는 것 입 니 다.
사고방식 은 다음 과 같다.선 택 된 하위 노드 를 재 귀적 으로 가 져 온 다음 에 선택 한 노드 와 차 집합 을 한다.마지막 으로 얻 은 것 은 선 택 된 노드(전체 선 택 된 하위 노드 는 포함 되 지 않 음)이다.

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(","));
 }

 /*      
 **      
 */
 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;
 }

 /*           
 **    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 이 드 롭 다운(Easy UI ComboTree)을 실현 하 는 모든 아이디어 이 며 여러분 의 학습 에 도움 이 되 기 를 바 랍 니 다.

좋은 웹페이지 즐겨찾기