Asp.net下拉树的实现过程

场景描述:某个公司有多个部门并且部门存在子部门,通过一个下拉框选取多个部门,但是如果某个部门的子部门被全部选择,则只取该部门,而忽略子部门。(叶子节点全被选中时,只取父节点)

知识点:ComboTree、一般处理程序、递归、Json

效果如图

数据库表设计:unit_main

节点类设计:

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

下面,新建web应用程序-添加-一般处理程序,其中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来获取我们想要的节点,computerunit方法是我们想要的。

思路为:递归获取被选的子节点,然后与所选的节点作差集,最后的得到的就是被选的节点(不包括全选的子节点)

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)的全部思路,希望对大家的学习有所帮助。

(0)

相关推荐

  • 适用与firefox ASP.NET无刷新二级联动下拉列表

    可能"极好的"又会带来很多的非议,但是我认为这确实很好,我看了大约20个无刷新的连动下拉列表,他们在firefox下面就一团糟.为了这个我差不多搞了两天,就是如果提交窗体后如何保持第二个列表框的值,因为通过js 给下拉框添加条目那么他的状态是不会被保存的测试平台:ie6,firefox 功能:二级无刷新连动 特点:跨浏览器;提交窗体取第二下拉框的值;数据来源于数据库;以xmlhttp来发送请求,实现无刷新 请求:如果您能够找到更好的方法请告诉我,非常感谢,您的批评和建议对我是莫大的鼓励

  • asp.net使用DataGridTree实现下拉树的方法

    本文实例讲述了asp.net使用DataGridTree实现下拉树的方法.分享给大家供大家参考.具体实现方法如下: 下拉树实现原理:输出json到客户端,客户端实现动态加载,中间不会和服务端交互.数据量支持上经测试几千还是很快的.本下拉树控件是用c#+js树实现. 2.c# 计算器 计算字符串数学表达式源码 计算数学表达式原理 采用c#实现 很实用 //a.建立两个栈:第一个位操作数栈,第二个操作符符栈!(将栈定义为string类型) //b.对数字来说是无条件压入数字栈中. //c.而对符号来

  • ASP.NET实现级联下拉框效果实例讲解

    用ASP.NET控件实现部门和员工的联动,参考过程如下 效果图: Default.aspx代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/199

  • asp.net 实现下拉框只读功能

    复制代码 代码如下: <HTML> <HEAD> <TITLE>下拉框模拟只读</TITLE> <script type="text/javascript"> //根据下拉框ID设置下拉框只读 function setReadOnly(obj_id){ var obj = document.getElementById(obj_id); obj.onmouseover = function(){ obj.setCapture(

  • ASP.NET C#生成下拉列表树实现代码

    效果图: 代码: 复制代码 代码如下: using System.Data; using System.Web.UI.WebControls; /// <summary> /// 根据DataTable生成下拉列表树 /// </summary> public class DropDownListHelp { private string gridline; private DataTable dt; public DropDownListHelp() { // //TODO: 在

  • ASP.NET多彩下拉框开发实例

    本文主要是演示如何读取系统颜色并在下拉框中的每个条目中显示对应的颜色,该源码主要展示以下内容: 1.如何获得System.Drawing.KnownColor颜色控件的列表枚举 2.如何排除系统环境颜色,如"Active Border" 3.如何分配颜色到下拉框的每个条目   代码详解: 命名下拉框为ddlMultiColor 来显示颜色名称及颜色,用<div>标签显示右侧矩形结果,Aspx代码如下 <table> <tr> <td> &

  • asp.net DropDownList 三级联动下拉菜单实现代码

    复制代码 代码如下: if (!IsPostBack) { //一级分类列表 this.DropDownList1.DataSource = dsbb.SelectSubjct1(); this.DropDownList1.DataTextField = "cName"; this.DropDownList1.DataValueField = "Ccode"; this.DropDownList1.DataBind(); this.DropDownList1.Ite

  • asp.net中js+jquery添加下拉框值和后台获取示例

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type

  • asp.net mvc下拉框Html.DropDownList 和DropDownListFor的常用方法

    一.非强类型: Controller: ViewData["AreId"] = from a in rp.GetArea()                                select new SelectListItem {                                Text=a.AreaName,                                Value=a.AreaId.ToString()                   

  • asp.net 下拉列表无级数据绑定实现代码

    复制代码 代码如下: private string toadd = "├".<BR><BR>private void GetArticleCategory(string pid) { SqlConnection conn = new SqlConnection("server=.;database=test;uid=sa;pwd=;"); string sql = "select Articlesgroup_id,Groupname

  • ASP.NET 2.0写无限级下拉菜单

    复制代码 代码如下: <%@ Page Language="C#" %> <html> <!-- ASP.NET 2.0的例子 --> <head runat="server"> </head> <body> <form runat="server"> <h3>下拉菜单的例子</h3> <!-- Use declarative syn

随机推荐