昨天看到了.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(0, 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 = 0; 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 = 0; 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(0, childIds.length - 1); ???????????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 1</span> ???????????????????????<ul> ???????????????????????????<li><span><a href="#">File 11</a></span></li> ???????????????????????????<li><span>File 12</span></li> ???????????????????????????<li><span>File 13</span></li> ???????????????????????</ul> ???????????????????</li> ???????????????????<li><span>File 2</span></li> ???????????????????<li><span>File 3</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[0]; ???????} ???????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如下：
?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 > 0) ???????????????????n.children = GetChild(n, dt, pid, id, text); ?????????????????} ???????????return lst; ???????} ???} ???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; } ???}效果图如下：
.net中的TreeView的数据绑定与EasyUi_tree的数据绑定
原文地址：https://www.cnblogs.com/huage-1234/p/8252602.html