.net中的TreeView的数据绑定与EasyUi_tree的数据绑定
昨天看到了.net中的TreeView，学习了一波TreeView的数据绑定，联想到EasyUi中的Tree的数据，觉得里面的逻辑差不多，就总结了一下两者的数据绑定。
前端页面和必要的JS如下
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TreeView_Study.aspx.cs"
Inherits="StudyProgram.Pages.TreeView_Study" %> <!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>
<link href="../Content/easyui/themes/material/easyui.css" rel="stylesheet" type="text/css" />
<link href="../Content/easyui/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/JQuery-1-10-2.js" type="text/javascript"></script>
<script src="../Content/easyui/jquery.easyui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// $("#tt").tree({
// url: "treeJson.json",
// method: "get"
// });
$.ajax({
url: "?act=GetTreeJson1",
type: 'post',
dataType: 'json',
success: function (data) {
console.log(data);
if (data != null)
$("#tt").tree({
data: data
});
},
error: function (data) {}
});
}); //checkbox点击事件
function OnCheckEvent() {
var objNode = event.srcElement;
if (objNode.tagName != "INPUT" || objNode.type != "checkbox")
return;
//获得当前树结点
var ck_ID = objNode.getAttribute("ID");
var node_ID = ck_ID.substring(, ck_ID.indexOf("CheckBox")) + "Nodes";
var curTreeNode = document.getElementById(node_ID);
//级联选择
SetChildCheckBox(curTreeNode, objNode.checked);
SetParentCheckBox(objNode);
} //子结点字符串
var childIds = "";
//获取子结点ID数组
function GetChildIdArray(parentNode) {
if (parentNode == null)
return;
var childNodes = parentNode.children;
var count = childNodes.length;
for (var i = ; i < count; i++) {
var tmpNode = childNodes[i];
if (tmpNode.tagName == "INPUT" && tmpNode.type == "checkbox") {
childIds = tmpNode.id + ":" + childIds;
}
GetChildIdArray(tmpNode);
}
} //设置子结点的checkbox
function SetChildCheckBox(parentNode, checked) {
if (parentNode == null)
return;
var childNodes = parentNode.children;
var count = childNodes.length;
for (var i = ; i < count; i++) {
var tmpNode = childNodes[i];
if (tmpNode.tagName == "INPUT" && tmpNode.type == "checkbox") {
tmpNode.checked = checked;
}
SetChildCheckBox(tmpNode, checked);
}
} //设置父结点的checkbox
function SetParentCheckBox(childNode) {
if (childNode == null)
return;
var parent = childNode.parentNode;
if (parent == null || parent == "undefined")
return;
do {
parent = parent.parentNode;
}
while (parent && parent.tagName != "DIV");
if (parent == "undefined" || parent == null)
return;
var parentId = parent.getAttribute("ID");
var objParent;
if (parentId != "") {
objParent = document.getElementById(parentId);
childIds = "";
GetChildIdArray(objParent);
}
//判断子结点状态
childIds = childIds.substring(, childIds.length - );
var aryChild = childIds.split(":");
var result = false;
//当子结点的checkbox状态有一个为true，其父结点checkbox状态即为true,否则为false
for (var i in aryChild) {
var childCk = document.getElementById(aryChild[i]);
if (childCk != null && childCk.checked)
result = true;
}
if (parentId != null) {
parentId = parentId.replace("Nodes", "CheckBox");
var parentCk = document.getElementById(parentId);
if (parentCk == null)
return;
if (result)
parentCk.checked = true;
else
parentCk.checked = false;
SetParentCheckBox(parentCk);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TreeView ID="SysModuleTree" runat="server" ShowCheckBoxes="All" ImageSet="Arrows">
<HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />
<NodeStyle Font-Names="微软雅黑" Font-Size="12pt" ForeColor="Black" HorizontalPadding="5px"
NodeSpacing="0px" VerticalPadding="0px" />
<%--根--%>
<ParentNodeStyle Font-Bold="False" ForeColor="Blue" />
<%--父级--%>
<SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD" HorizontalPadding="0px"
VerticalPadding="0px" />
<%--叶子--%>
</asp:TreeView>
<br />
<br />
<asp:TreeView ID="Treeview1" runat="server" ShowCheckBoxes="All" ImageSet="Arrows"
CssClass="TreeMenu">
<HoverNodeStyle ForeColor="#5555DD" />
<NodeStyle Font-Names="微软雅黑" Font-Size="10pt" ForeColor="Black" HorizontalPadding="5px"
NodeSpacing="0px" VerticalPadding="0px" />
<RootNodeStyle Font-Bold="True" />
<ParentNodeStyle Font-Bold="True" ForeColor="#653CFC" />
<SelectedNodeStyle ForeColor="#5555DD" HorizontalPadding="0px" VerticalPadding="0px" />
</asp:TreeView>
<br />
<br />
<ul id="tt">
</ul>
<%-- <ul id="Ul1" class="easyui-tree">
<li><span>Folder</span>
<ul>
<li><span>Sub Folder </span>
<ul>
<li><span><a href="#">File </a></span></li>
<li><span>File </span></li>
<li><span>File </span></li>
</ul>
</li>
<li><span>File </span></li>
<li><span>File </span></li>
</ul>
</li>
<li><span>File21</span></li>
</ul>--%>
</div>
</form>
</body>
</html>
数据库数据格式：
后台代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using StudyProgram.Common;
using Newtonsoft.Json; namespace StudyProgram.Pages
{
public partial class TreeView_Study : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{ var act = Request["act"];
if (act != null)
{
try
{
var res = GetType().GetMethod(act, System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Instance).Invoke(this, null);
if (res != null)
Response.Write(res);
}
catch (Exception ex)
{
Response.Write(JsonConvert.SerializeObject(ex));
}
Response.End();
} if (!IsPostBack)
{
var dt = GetDataTable();
Treeview1.Attributes.Add("onClick", "OnCheckEvent()");
TreeBind(SysModuleTree, dt, null, null, "Id", "P_id", "Text");
TreeBind2(dt, Treeview1.Nodes, null, "Id", "P_id", "Text");
var aa = GetTreeJson(dt);
} } void TreeBind(TreeView treeView, DataTable dt, TreeNode p_Node, string pid_val, string id, string pid, string text)
{
DataView dv = dt.DefaultView;
TreeNode tn;
string filter = string.IsNullOrEmpty(pid_val) ? pid + " is null" : string.Format(" {0} ={1} ", pid, pid_val);
dv.RowFilter = filter;//DV的筛选数据比DataTable好
foreach (DataRowView row in dv)
{
tn = new TreeNode();
tn.Value = row[id] + "";
tn.Text = row[text] + "";
if (p_Node == null) //添加根节点
treeView.Nodes.Add(tn);
else
p_Node.ChildNodes.Add(tn);//添加子节点 TreeBind(treeView, dt, tn, tn.Value, id, pid, text);//递归 绑定节点下面的子节点中的子节点
}
} void TreeBind2(DataTable dt, TreeNodeCollection tnc, string pid_val, string id, string pid, string text)
{
DataView dv = dt.DefaultView;
TreeNode tn;
string filter = string.IsNullOrEmpty(pid_val) ? pid + " is null" : string.Format(pid + "='{0}'", pid_val);
dv.RowFilter = filter;//筛选数据
foreach (DataRowView drv in dv)
{
tn = new TreeNode();//建立一个新节点
tn.Value = drv[id].ToString();
tn.Text = drv[text].ToString();
tnc.Add(tn);//将该节点加入到TreeNodeCollection（节点集合）中
TreeBind2(dt, tn.ChildNodes, tn.Value, id, pid, text);//递归
}
} DataTable GetDataTable()
{
string ConnectionString = System.Configuration.ConfigurationManager.AppSettings["ConnectionString"];
return DBHelper.ExecuteDataset(ConnectionString, CommandType.Text, " SELECT * FROM [dbo].[T_Tree] ").Tables[];
} public string GetTreeJson1()
{
DataTable dt = GetDataTable();
return TreeHelper.GetTreeJsonTest(dt, "P_id", "Id", "Text", null);
} string GetTreeJson(DataTable dt)
{
return TreeHelper.GetTreeJsonTest(dt, "P_id", "Id", "Text", null);
}
}
}
EasyUi tree的TreeHelper如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Text;
using Newtonsoft.Json;
using System.Reflection; namespace StudyProgram.Common
{ /// <summary>
/// Tree帮助类
/// </summary>
public class TreeHelper
{ /// <summary>
/// 获取EasyUi——tree的JSON格式
/// </summary>
/// <param name="tabel">数据</param>
/// <param name="pid">父Id的字段名</param>
/// <param name="id">id的字段名</param>
/// <param name="text">文本字段名</param>
/// <param name="p_val">根节点的父Id的值（0或者null等等）</param>
/// <returns></returns>
public static string GetTreeJsonTest(DataTable tabel, string pid, string id, string text, string p_val)
{
List<Tree> list = new List<Tree>(); string filer = string.IsNullOrEmpty(p_val) ? pid + " is null " : string.Format("{0}='{1}'", pid, p_val);
DataRow[] rows = tabel.Select(filer);//筛选出根节点
foreach (DataRow dr in rows)
{
Tree tree = new Tree();
tree.id = dr[id] + "";
tree.p_id = dr[pid] + "";
tree.text = dr[text] + "";
tree.children = GetChild(tree, tabel, pid, id, text);//获取子节点
list.Add(tree);
}
return JsonConvert.SerializeObject(list);//转JSON
} /// <summary>
/// 获取子节点
/// </summary>
/// <param name="node">父节点</param>
/// <param name="dt">数据源</param>
/// <param name="pid">父Id的字段名</param>
/// <param name="id">id的字段名</param>
/// <param name="text">文本字段名</param>
/// <returns></returns>
private static List<Tree> GetChild(Tree node, DataTable dt, string pid, string id, string text)
{
List<Tree> lst = new List<Tree>();
DataRow[] rows = dt.Select(pid + " = " + node.id);//筛选pid为父节点的Id的节点（即父节点node的所有子节点）
foreach (var row in rows)
{
Tree n = new Tree();
n.id = row[id] + "";
n.text = row[text] + "";
n.p_id = row[pid] + "";
lst.Add(n);
DataRow[] dr = dt.Select(pid + "=" + n.id);
if (dr.Length > )
n.children = GetChild(n, dt, pid, id, text);
}
return lst;
} /// <summary>
/// List转EasyUi_tree格式
/// </summary>
/// <param name="lstData"></param>
/// <param name="p_val"></param>
/// <returns></returns>
public static List<Tree> GetTreeJsonByList(List<Data> lstData, string p_val)
{
List<Tree> lstTree = new List<Tree>();
if (lstData != null)
{
var lstRoot = lstData.Where(c => string.IsNullOrEmpty(p_val) ? c.P_id == null : c.P_id == Convert.ToInt32(p_val)).ToList();//找到根节点
foreach (var ll in lstRoot)
{
Tree tree = new Tree();
tree.id = ll.Id + "";
tree.p_id = ll.P_id + "";
tree.text = ll.Text;
tree.children = GetTreeJsonByList(lstData, ll.Id + "");
lstTree.Add(tree);
}
}
return lstTree;
} /// <summary>
/// DataTable转List
/// </summary>
/// <typeparam name="T"></typeparam>
/// <param name="dt"></param>
/// <returns></returns>
public static List<T> ConvertToList<T>(DataTable dt) where T : new()
{
List<T> list = new List<T>();
PropertyInfo[] props = typeof(T).GetProperties(); foreach (DataRow dr in dt.Rows)
{
T t = new T();
foreach (PropertyInfo pro in props)
{
if (dt.Columns.Contains(pro.Name))
{
if (!pro.CanWrite) continue;//属性不能写入,直接写入下个属性
object obj = dr[pro.Name];
if (obj != DBNull.Value)
pro.SetValue(t, obj, null);
}
}
list.Add(t);
}
return list;
} /// <summary>
/// List转DataTable
/// </summary>
/// <typeparam name="T"></typeparam>
/// <param name="list"></param>
/// <returns></returns>
public static DataTable ConvertToDataTable<T>(List<T> list) where T : new() //在方法前面定义T，后面Where作为泛型约束
{
DataTable dt = new DataTable();
PropertyInfo[] props = typeof(T).GetProperties();
foreach (var p in props)
dt.Columns.Add(p.Name, p.Name.GetType()); foreach (var t in list)
{
DataRow n_row = dt.NewRow();
foreach (var p in props)
n_row[p.Name] = p.GetValue(t, null); dt.Rows.Add(n_row);
}
return dt;
}
} public class Tree
{
public string id { get; set; }
public string text { get; set; }
public string p_id { get; set; }//父id可以不需要
//public string iconCls
//{
// get { return "icon-save"; }//设置Tree的图标，默认是文件夹
//}
public List<Tree> children { get; set; }
} public class Data
{
public int Id { get; set; }
public string Text { get; set; }
public int? P_id { get; set; }
}
}
效果图如下：
.net中的TreeView的数据绑定与EasyUi_tree的数据绑定的更多相关文章
- MVC树控件,mvc中应用treeview，实现复选框树的多层级表单控件
类似于多层级的角色与权限控制功能,用MVC实现MVC树控件,mvc中应用treeview,实现复选框树的多层级表单控件.最近我们的项目中需要用到树型菜单,以前使用WebForm时,树型菜单有微软提供的 ...
- WinForm开发中针对TreeView控件改变当前选择节点的字体与颜色
本文转载:http://www.cnblogs.com/umplatform/archive/2012/08/29/2660240.html 在B/S开发中,对TreeView控件要改变当前选中节点的 ...
- 如何解决FormView中实现DropDownList连动选择时出现 "Eval()、XPath() 和 Bind() 这类数据绑定方法只能在数据绑定控件的上下文中使用" 的错误
原文:如何解决FormView中实现DropDownList连动选择时出现 "Eval().XPath() 和 Bind() 这类数据绑定方法只能在数据绑定控件的上下文中使用" 的 ...
- WPF中PasswordBox控件的Password属性的数据绑定
原文:WPF中PasswordBox控件的Password属性的数据绑定 英文原文:http://www.wpftutorial.net/PasswordBox.html 中文原文:http://bl ...
- WPF中获取TreeView以及ListView获取其本身滚动条的方法，可实现自行调节scoll滚动的位置(可相应获取任何控件中的内部滚动条)
原文:WPF中获取TreeView以及ListView获取其本身滚动条的方法,可实现自行调节scoll滚动的位置(可相应获取任何控件中的内部滚动条) 对于TreeView而言: TreeViewAut ...
- ASP.Net中的TreeView控件中对节点的上移和下移操作
Web中的TreeView中的没有PreNode和NextNode属性. 但它的集合属性中有一个IndexOf属性,从而能够找到它的前一个节点知后一个节点. TreeView中要么只有一个根节点:要么 ...
- VS中使用TreeView的Checked属性问题
VS中使用TreeView,当需要用到Checked属性,并需要同步子节点和父节点的Checked属性时,若使用AfterCheck事件会导致死循环,这里我使用的是NodeMouseClick事件.代 ...
- asp.net学习之 数据绑定控件--List数据绑定控件
原文:asp.net学习之 数据绑定控件--List数据绑定控件 List控件(如 CheckBoxList.DropDownList.ListBox 和 RadioButtonList 类)继承自L ...
- Eval()、XPath() 和 Bind() 这类数据绑定方法只能在数据绑定控件的上下文中使用
原文:Eval().XPath() 和 Bind() 这类数据绑定方法只能在数据绑定控件的上下文中使用 “/vs2005”应用程序中的服务器错误.--------------------------- ...
随机推荐
- 【sqli-labs】 less22 Cookie Injection- Error Based- Double Quotes - string (基于错误的双引号字符型Cookie注入)
注入的过程和less 20 21一样,这次闭合cookie的使用的双引号
- 题解 P2605 【[ZJOI2010]基站选址】(From luoguBlog)
线段树优化dp 数组f[i][j]表示在前i个村庄内,第j个基站建在i处的最小费用 根据交线牛逼法和王鹤松式可得方程 f[i][j]=min(f[k][j−1]+cost(k,i)) cost(k,i ...
- 前端工具gulp2
var gulp = require('gulp'); var less = require('gulp-less'); var htmlmin = require('gulp-htmlmin'); ...
- eas之dep的前置脚本和后置脚本
dep的前置脚本和后置脚本,什么时候写,是这样解释的: 前置脚本是在方法前执行,后置脚本是在方法后执行 1.比如保存扩展,如果你要在保存前校验某个字段的值,你要在前置脚本中写,如果要保存后 ...
- 【剑指Offer】9、变态跳台阶
题目描述: 一只青蛙一次可以跳上1级台阶,也可以跳上2级--它也可以跳上n级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 解题思路: 当只有一级台阶时,f(1)=1:当有两级台阶时, ...
- P1125 笨小猴
P1125 笨小猴 标签:NOIp提高组 2008 云端 难度:普及- 时空限制:1s / 128MB 题目描述 笨小猴的词汇量很小,所以每次做英语选择题的时候都很头疼.但是他找到了一种方法,经试验证 ...
- [luogu2624 HNOI2008]明明的烦恼 (prufer+高精)
传送门 Solution 根据prufer序列做的题,具体可以看这里 还知道了一种避免高精除的方法quq Code #include <cmath> #include <cstdio ...
- 目录-Linux
Linux文件系统: Linux: glibc 程序编译方式: 动态链接 静态编译 进程的类型: 终端:硬件设备,关联一个用户接口 与终端相关:通过终端启动 与终端无关:操作引导启动过程当中自动启动 ...
- luogu P4725 多项式对数函数 (模板题、FFT、多项式求逆、求导和积分)
手动博客搬家: 本文发表于20181125 13:25:03, 原地址https://blog.csdn.net/suncongbo/article/details/84487306 题目链接: ht ...
- 逻辑斯蒂回归3 -- 最大熵模型之改进的迭代尺度法(IIS)
声明: 1,本篇为个人对<2012.李航.统计学习方法.pdf>的学习总结,不得用作商用.欢迎转载,但请注明出处(即:本帖地址). 2,因为本人在学习初始时有非常多数学知识都已忘记.所以为 ...