您的位置：首页 > 产品设计 > UI/UE

easyUI comboTree的实现

2015-08-30 21:29 429 查看

easyUI comboTree的实现

本示例用使用visual studio2010开发工具和sql Server数据库制作简单组合树comboTree，大神请绕道，实现的效果图如下：



知识点：easyUI comboTree、一般处理程序、json

制作过程

1.创建一张表，如下图





2.创建一个web 空应用程序，下图为已创建好的应用程序



2.1 添加一个类Unit.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace asp.net_下拉树实现
{
public class Unit
{
public decimal id { get; set; }
public decimal parent_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";
}
}
}


2.2 添加一个类ExeceteOralceSqlHelper.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;

namespace asp.net_下拉树实现
{
public  class ExeceteOralceSqlHelper
{

//从config中获取链接字符串
public static readonly string connstr = ConfigurationManager.ConnectionStrings["sqlconn"].ToString();

//获得connection对象
public static SqlConnection GetConn()
{
SqlConnection conn = new SqlConnection(connstr);
conn.Open();
return conn;
}
//获得DataTable
public  DataTable GetDataTable(string sqlstr)
{
SqlConnection conn = GetConn();
SqlCommand cmd = new SqlCommand(sqlstr, conn);
SqlDataAdapter adapter = new SqlDataAdapter(cmd);
DataTable tb = new DataTable();
adapter.Fill(tb);
return tb;
}
}


2.3 添加一个类UnitComponent.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;

namespace asp.net_下拉树实现
{
public class UnitComponent
{
ExeceteOralceSqlHelper SqlHelper = new ExeceteOralceSqlHelper();//数据库处理类

public Unit GetUnit()
{
//部门分类
Unit rootUnit = new Unit();
string sql = string.Format("select unit_id,unit_name from unit_main where parent_id={0}", 0);//顶级部门
DataTable dt = SqlHelper.GetDataTable(sql);//返回DataTable方法
rootUnit.id = Convert.ToInt32(dt.Rows[0][0]);
rootUnit.text=dt.Rows[0][1].ToString();
rootUnit.children = GetUnitList(1);
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> unitList = new List<Unit>();
string sql = string.Format("select unit_id,unit_name from unit_main where parent_id={0}", parentID);

DataTable dt = SqlHelper.GetDataTable(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()
};
unitList.Add(dtup);
}
}

return unitList;
}

}
}


2.4 添加一个一般处理程序Handler1.ashx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;

namespace asp.net_下拉树实现
{
/// <summary>
/// 获得部门分类json格式数据
/// </summary>
public class Handler1 : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
JavaScriptSerializer js = new JavaScriptSerializer();
context.Response.ContentType = "application/json";
UnitComponent uc=new UnitComponent ();
var unit = uc.GetUnit();
context.Response.Write("[" + js.Serialize(unit) + "]");
}

public bool IsReusable
{
get
{
return false;
}
}
}
}


2.5 编译、调试->获得json格式数据



3.添加一个aspx页面WebForm1.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="asp.net_下拉树实现.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server" >
<title></title>
<%--线上引用jQuery--%>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<%--引用easyUI--%>
<script src="easyUI/jquery-easyui-1.4.3/jquery.easyui.min.js" type="text/javascript"></script>
<link href="easyUI/jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="easyUI/jquery-easyui-1.4.3/themes/metro/easyui.css" rel="stylesheet"
type="text/css" />
<script src="easyUI/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#tbUnit').combotree({
url: '/Handler1.ashx',
cascadeCheck: true,
placeholder: "请选择部门",
method: 'get',
required: true,
multiple: true,
onChange: function (newValue, oldValue) {
computeunit();
},
onLoadSuccess: function (node, data) {

}
});
}
);

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);
}
}
}
</script>
</head>

<body>
<form id="form1" runat="server">
<asp:TextBox ID="tbUnit" runat="server" Width="280px"></asp:TextBox>
</form>
</body>
</html>


4.调试成功，结束

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航