最新修改版树形表格(treeviewgrid)控件代码

合集下载

c实现treeview动态显示树形结构aries524的专栏csdn博客

C#实现TreeView动态显示树形结构- aries524的专栏-CSDN博客C#实现TreeView动态显示树形结构收藏/aries524/archive/2008/10/03/3013411. aspx今日因需要，制作了一个GridView显示树形结构的例子，查阅了不少资料，实现的过程很艰辛啊。

不具体代码拿出来，大家分享一下。

数据表的创建：CREATE TABLE [crm_treemenu] ([i_Id] [int] NOT NULL ,[c_mkdm] [varchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,[v_mkmc] [varchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,[v_cdlj] [varchar] (50) COLLATE Chinese_PRC_CI_AS NULL , [v_img] [varchar] (50) COLLATE Chinese_PRC_CI_AS NULL , [i_xh] [int] NULL ,[i_childNum] [int] NULL ,[IsBasic] [char] (1) COLLATE Chinese_PRC_CI_AS NULLCONSTRAINT[DF_crm_treemenu_IsBasic] DEFAULT (1), [IsMaintainable] [char] (1) COLLATE Chinese_PRC_CI_AS NULL CONSTRAINT[DF_crm_treemenu_IsMaintainable] DEFAULT (0),[C_BS] [char] (1) COLLATE Chinese_PRC_CI_AS NULL , CONSTRAINT [PK_CRM_TREEMENU] PRIMARY KEY CLUSTERED([i_Id]) ON [PRIMARY]) ON [PRIMARY]GO存储过程SET QUOTED_IDENTIFIER ONGOSET ANSI_NULLS ONGOALTER procedure ShowPrivilegeasselect c_mkdm ,v_mkmc, '0'as fdm from crm_treemenu crm_role,crm_role_Privilegewhere len(c_mkdm) =2unionselect c_mkdm ,v_mkmc ,left(c_mkdm, len(c_mkdm) -2) as fdmfrom crm_treemenu where len(c_mkdm) >2GOSET QUOTED_IDENTIFIER OFFGOSET ANSI_NULLS ONGO前台代码：JS部分用来实现选中复选框的操作，如没有必要，可删除！<%@ Page Language="C#" AutoEventWireup="true" CodeFile="role_Privilege.aspx.cs"Inherits="BaseSetting_role_Privilege" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml" ><head runat="server"><title>无标题页</title><script language="javascript">function window.onload(){document.getElementById("trePrivitegeInfo").onclick = OnTreeNodeChecked;//这里把TreeView名改一下~ }function OnTreeNodeChecked(){var ele = event.srcElement;if(ele.type=='checkbox'){ele.className = "";var childrenDivID =ele.id.replace('CheckBox','Nodes');var div =document.getElementById(childrenDivID);if(div!=null){var checkBoxs =div.getElementsByTagName('INPUT');for(var i=0;i<checkBoxs.length;i++){if(checkBoxs[i].type=='checkbox')checkBoxs[i].checked=ele.checked;}}setParentClassName(ele);}}function setParentClassName(currCheckBox){var objParentNode=public_GetParentNode(currCheckBox);if(public_IsObjectNull(objParentNode))return;var checkBoxs =objParentNode.getElementsByTagName("INPUT");var allSelect = true;var allUnSelect = true;for(var i=0;i<checkBoxs.length;i++){if(checkBoxs[i].type=='checkbox'){if(checkBoxs[i].checked) allUnSelect = false;else allSelect = false;if((!allSelect) && (!allUnSelect)) break;}}var objParentCheckBox =public_Node2CheckBox(objParentNode);if(public_IsObjectNull(objParentCheckBox)) return;setParentClassName(objParentCheckBox);if(allSelect){objParentCheckBox.className = "";objParentCheckBox.checked = true;return;}if(allUnSelect){objParentCheckBox.className = "";objParentCheckBox.checked = false;return;}objParentCheckBox.checked = false;objParentCheckBox.className = "parentbox_style";}//得到本节点所在的Node(Div对象)function public_GetParentNode(element){var parent = element.parentNode;var upperTagName = "DIV";//如果这个元素还不是想要的tag就继续上溯while (parent &&(parent.tagName.toUpperCase() != upperTagName)) {parent = parent.parentNode ?parent.parentNode : parent.parentElement;}return parent;}function public_Node2CheckBox(element){var objID = element.getAttribute("ID");objID = objID.substring(0,objID.indexOf("Nodes"));returndocument.getElementById(objID+"CheckBox");}function public_IsObjectNull(element){if(element==null || element == "undefined")return true;elsereturn false;}</script></head><body><form id="form1" runat="server"><div><asp:TreeView ID="trePrivitegeInfo"runat="server" ShowCheckBoxes="All"ShowLines="True"></asp:TreeView></div></form></body></html>后台代码：// showPriviAction.ShowPrivilegeInfo();是用来显示数据的方法。

html5 树形表格结构控件

html5 树形表格结构控件HTML5树形表格结构控件HTML5树形表格结构控件是一种用于展示层级关系数据的强大工具。

它可以将数据以树状结构的形式展示，并可通过交互式操作对数据进行操作和导航。

本文将介绍HTML5树形表格结构控件的基本使用方法、功能特点以及它在Web开发中的应用场景。

一、基本使用方法HTML5树形表格结构控件的基本使用方法非常简单。

通过使用<table>、<tr>、<td>等HTML标签，结合一些特有的CSS样式和JavaScript方法，我们可以轻松地创建一个树形表格结构，并为每个节点添加展开和收起功能。

下面是一个示例代码：```<table id="treeTable"><tr><td><span class="treeNode">节点1</span></td></tr><tr><td><span class="treeNode">节点2</span></td><td><span class="treeNode">节点2-1</span></td></tr><tr><td><span class="treeNode">节点2</span></td><td><span class="treeNode">节点2-2</span></td></tr></table>```这段代码中，我们使用了一个ID为"treeTable"的<table>元素，并在其中定义了多个<tr>元素作为树的节点。

Pythontkinter之Treeview（表格）

Pythontkinter之Treeview（表格）1、Treeview的基本属性常⽤参数意义①master=win, # ⽗容器②height=10, # 表格显⽰的⾏数,height⾏③columns=columns, # 显⽰的列④show='headings', # 隐藏⾸列⑤heading() # 定义表头⑥column()#定义列⑦anchor='w'#对齐⽅式，可选n, ne, e, se, s, sw, w, nw, center⑧command=lambda: print('学号')#点击表头执⾏的回调函数⑨minwidth=100#表格的最⼩列宽# -*- encoding=utf-8 -*-import tkinterfrom tkinter import *from tkinter import ttkif__name__ == '__main__':passwin = () # 窗⼝win.title('南风⼂轻语') # 标题screenwidth = win.winfo_screenwidth() # 屏幕宽度screenheight = win.winfo_screenheight() # 屏幕⾼度width = 1000height = 500x = int((screenwidth - width) / 2)y = int((screenheight - height) / 2)win.geometry('{}x{}+{}+{}'.format(width, height, x, y)) # ⼤⼩以及位置columns = ['学号', '姓名', '性别', '出⽣年⽉', '籍贯', '班级']table = ttk.Treeview(master=win, # ⽗容器height=10, # 表格显⽰的⾏数,height⾏columns=columns, # 显⽰的列show='headings', # 隐藏⾸列)table.heading(column='学号', text='学号', anchor='w',command=lambda: print('学号')) # 定义表头table.heading('姓名', text='姓名', ) # 定义表头table.heading('性别', text='性别', ) # 定义表头table.heading('出⽣年⽉', text='出⽣年⽉', ) # 定义表头table.heading('籍贯', text='籍贯', ) # 定义表头table.heading('班级', text='班级', ) # 定义表头table.column('学号', width=100, minwidth=100, anchor=S, ) # 定义列table.column('姓名', width=150, minwidth=100, anchor=S) # 定义列table.column('性别', width=50, minwidth=50, anchor=S) # 定义列table.column('出⽣年⽉', width=150, minwidth=100, anchor=S) # 定义列table.column('籍贯', width=150, minwidth=100, anchor=S) # 定义列table.column('班级', width=150, minwidth=100, anchor=S) # 定义列table.pack(pady=20)win.mainloop()运⾏2、插⼊数据到表格中常⽤参数意义①table.insert('', END, values=data) # 添加数据到末尾# -*- encoding=utf-8 -*-import tkinterfrom tkinter import *from tkinter import messageboxfrom tkinter import ttkdef insert():# 插⼊数据info = [['1001', '李华', '男', '2014-01-25', '⼴东', '计算5班', ],['1002', '⼩⽶', '男', '2015-11-08', '深圳', '计算5班', ],['1003', '刘亮', '男', '2015-09-12', '福建', '计算5班', ],['1004', '⽩鸽', '⼥', '2016-04-01', '湖南', '计算5班', ],]for index, data in enumerate(info):table.insert('', END, values=data) # 添加数据到末尾if__name__ == '__main__':passwin = () # 窗⼝win.title('南风⼂轻语') # 标题screenwidth = win.winfo_screenwidth() # 屏幕宽度screenheight = win.winfo_screenheight() # 屏幕⾼度width = 1000height = 500x = int((screenwidth - width) / 2)y = int((screenheight - height) / 2)win.geometry('{}x{}+{}+{}'.format(width, height, x, y)) # ⼤⼩以及位置tabel_frame = tkinter.Frame(win)tabel_frame.pack()xscroll = Scrollbar(tabel_frame, orient=HORIZONTAL)yscroll = Scrollbar(tabel_frame, orient=VERTICAL)columns = ['学号', '姓名', '性别', '出⽣年⽉', '籍贯', '班级']table = ttk.Treeview(master=tabel_frame, # ⽗容器height=10, # 表格显⽰的⾏数,height⾏columns=columns, # 显⽰的列show='headings', # 隐藏⾸列xscrollcommand=xscroll.set, # x轴滚动条yscrollcommand=yscroll.set, # y轴滚动条)for column in columns:table.heading(column=column, text=column, anchor=CENTER,command=lambda name=column:messagebox.showinfo('', '{}描述信息~~~'.format(name))) # 定义表头table.column(column=column, width=100, minwidth=100, anchor=CENTER, ) # 定义列 xscroll.config(command=table.xview)xscroll.pack(side=BOTTOM, fill=X)yscroll.config(command=table.yview)yscroll.pack(side=RIGHT, fill=Y)table.pack(fill=BOTH, expand=True)insert()insert()insert()insert()btn_frame = Frame()btn_frame.pack()Button(btn_frame, text='添加', bg='yellow', width=20, command=insert).pack() win.mainloop()3、删除表格中的数据常⽤参数意义①get_children()#获取所有对象②table.delete()#删除对象# -*- encoding=utf-8 -*-import tkinterfrom tkinter import *from tkinter import ttkdef insert():# 插⼊数据info = [['1001', '李华', '男', '2014-01-25', '⼴东', '计算5班', ],['1002', '⼩⽶', '男', '2015-11-08', '深圳', '计算5班', ],['1003', '刘亮', '男', '2015-09-12', '福建', '计算5班', ],['1004', '⽩鸽', '⼥', '2016-04-01', '湖南', '计算5班', ],]for index, data in enumerate(info):table.insert('', END, values=data) # 添加数据到末尾def delete():obj = table.get_children() # 获取所有对象for o in obj:table.delete(o) # 删除对象if__name__ == '__main__':passwin = () # 窗⼝win.title('南风⼂轻语') # 标题screenwidth = win.winfo_screenwidth() # 屏幕宽度screenheight = win.winfo_screenheight() # 屏幕⾼度width = 1000height = 500x = int((screenwidth - width) / 2)y = int((screenheight - height) / 2)win.geometry('{}x{}+{}+{}'.format(width, height, x, y)) # ⼤⼩以及位置columns = ['学号', '姓名', '性别', '出⽣年⽉', '籍贯', '班级']table = ttk.Treeview(master=win, # ⽗容器height=10, # 表格显⽰的⾏数,height⾏columns=columns, # 显⽰的列show='headings', # 隐藏⾸列)table.heading(column='学号', text='学号', anchor='w',command=lambda: print('学号')) # 定义表头table.heading('姓名', text='姓名', ) # 定义表头table.heading('性别', text='性别', ) # 定义表头table.heading('出⽣年⽉', text='出⽣年⽉', ) # 定义表头table.heading('籍贯', text='籍贯', ) # 定义表头table.heading('班级', text='班级', ) # 定义表头table.column('学号', width=100, minwidth=100, anchor=S, ) # 定义列table.column('姓名', width=150, minwidth=100, anchor=S) # 定义列table.column('性别', width=50, minwidth=50, anchor=S) # 定义列table.column('出⽣年⽉', width=150, minwidth=100, anchor=S) # 定义列table.column('籍贯', width=150, minwidth=100, anchor=S) # 定义列table.column('班级', width=150, minwidth=100, anchor=S) # 定义列table.pack(pady=20)insert()f = Frame()f.pack()Button(f, text='添加', bg='yellow', width=20, command=insert).pack(side=LEFT) Button(f, text='删除', bg='pink', width=20, command=delete).pack(side=LEFT) win.mainloop()4、添加滚动条常⽤参数意义①xscroll = Scrollbar(tabel_frame, orient=HORIZONTAL)#⽔平滚动条②yscroll = Scrollbar(tabel_frame, orient=VERTICAL)#垂直滚动条③xscrollcommand=xscroll.set, # table绑定x轴滚动条事件④yscrollcommand=yscroll.set, # table绑定y轴滚动条事件⑤xscroll.config(command=table.xview)#⽔平滚动条绑定table的x轴事件⑥xscroll.pack(side=BOTTOM, fill=X)#放置⽔平滚动条，放在最下⾯⑦yscroll.config(command=table.yview)#垂直滚动条绑定table的y轴事件⑧yscroll.pack(side=RIGHT, fill=Y)#垂直滚动条，放置在最右边⑨table.pack(fill=BOTH, expand=True)#放置table，必须写在放置⽔平和垂直滚动条之后# -*- encoding=utf-8 -*-import tkinterfrom tkinter import *from tkinter import messageboxfrom tkinter import ttkdef insert():# 插⼊数据info = [['1001', '李华', '男', '2014-01-25', '⼴东', '计算5班', ],['1002', '⼩⽶', '男', '2015-11-08', '深圳', '计算5班', ],['1003', '刘亮', '男', '2015-09-12', '福建', '计算5班', ],['1004', '⽩鸽', '⼥', '2016-04-01', '湖南', '计算5班', ],]for index, data in enumerate(info):table.insert('', END, values=data) # 添加数据到末尾if__name__ == '__main__':passwin = () # 窗⼝win.title('南风⼂轻语') # 标题screenwidth = win.winfo_screenwidth() # 屏幕宽度screenheight = win.winfo_screenheight() # 屏幕⾼度width = 1000height = 500x = int((screenwidth - width) / 2)y = int((screenheight - height) / 2)win.geometry('{}x{}+{}+{}'.format(width, height, x, y)) # ⼤⼩以及位置tabel_frame = tkinter.Frame(win)tabel_frame.pack()xscroll = Scrollbar(tabel_frame, orient=HORIZONTAL)yscroll = Scrollbar(tabel_frame, orient=VERTICAL)columns = ['学号', '姓名', '性别', '出⽣年⽉', '籍贯', '班级']table = ttk.Treeview(master=tabel_frame, # ⽗容器height=10, # 表格显⽰的⾏数,height⾏columns=columns, # 显⽰的列show='headings', # 隐藏⾸列xscrollcommand=xscroll.set, # x轴滚动条yscrollcommand=yscroll.set, # y轴滚动条)for column in columns:table.heading(column=column, text=column, anchor=CENTER,command=lambda name=column:messagebox.showinfo('', '{}描述信息~~~'.format(name))) # 定义表头table.column(column=column, width=100, minwidth=100, anchor=CENTER, ) # 定义列xscroll.config(command=table.xview)xscroll.pack(side=BOTTOM, fill=X)yscroll.config(command=table.yview)yscroll.pack(side=RIGHT, fill=Y)table.pack(fill=BOTH, expand=True)insert()insert()insert()insert()btn_frame = Frame()btn_frame.pack()Button(btn_frame, text='添加', bg='yellow', width=20, command=insert).pack()win.mainloop()易错点①command=lambda name=column:messagebox.showinfo('', '{}描述信息~~~'.format(name)) 正确绑定事件点击表头后，显⽰对应表头的描述信息command=lambda :messagebox.showinfo('', '{}描述信息~~~'.format(column)) 错误绑定事件点击表头后每次显⽰的都是描述班级信息（列表最后⼀个元素）区别在于正确写法给定了形参，每个形参使⽤for循环给的局部变量column的值，每次都是不⼀样的，⽽错误写法给定的是for循环中的局部变量column，for循环结束后，局部变量column就是最后⼀个列表的值，因此输出都是列表最后⼀个值。

TreeView操作及代码实例

TreeView操作及实例代码TreeView组件是由多个类来定义的，TreeView组件是由命名空间"System.Windows.Forms"中的"TreeView"类来定义的，而其中的节点(即Node)，是由命名空间"System.Windows.Forms"中的"TreeNode"来定义的。

所以当在程序中创建一个TreeView对象，其实只是创建了一个可以放置节点的"容器"。

而在这个容器中加入一个节点，其实就是加入了从"TreeNode"类中创建的一个节点对象；同样删除一个节点，也就是删除一个"TreeNode"节点对象。

一． TreeView组件中的一些常用方法以及具体实现：T REE V IEW组件虽然是一个操作起来比较麻烦的组件，但归根到底，可以总结为三种基本操作：加入子节点、加入兄弟节点和删除节点。

掌握了这三种常用操作，对于在编程中灵活运用T REE V IEW组件是十分必要的。

下面就分别来加以介绍。

（1）.加入子节点：所谓子节点，就是处于选定节点的下一级节点。

加入子节点的具体过程是：首先要在T REE V IEW组件中定位要加入的子节点的位置，然后创建一个节点对象，然后利用TreeVeiw类中对节点的加入方法（即：Add ( )方法），加入此节点对象。

下面就是在treeView1组件中加入一个子节点的具体代码：//首先判断是否选定组件中的位置if ( treeView1.SelectedNode == null ){MessageBox.Show ( "请选择一个节点" , "提示信息" , MessageBoxButtons.OK , rmation ) ;}else{//创建一个节点对象，并初始化TreeNode tmp ;tmp = new TreeNode ( "节点名称" ) ;//在TreeView组件中加入子节点treeView1.SelectedNode.Nodes.Add ( tmp ) ;treeView1.SelectedNode = tmp ;treeView1.ExpandAll ( ) ;}（2）.加入兄弟节点：所谓兄弟节点，就是在选定的节点的平级的节点。

Pythontkinter树形列表控件（Treeview）的使用方法

Pythontkinter树形列表控件（Treeview）的使⽤⽅法⽬录1.⽅法1.1 bbox(item, column=None)1.2 column( cid, option=None, **kw)1.3 delete(items)1.4 detach(items)1.6 focus(item=None)1.7 get_children(item=None)1.8 heading(column, option=None, **kw)1.9 identify(component, x, y)1.10 identify_column(x)1.11 identify_element(x, y)1.12 identify_region(x, y)1.13 identify_row(y)1.14 index(item)1.15 set_children(item, newchildren)1.16 insert(parent, index, iid=None, **kw)1.17 item(item, option=None, **kw)1.18 move(item, parent, index)1.19 next(item)1.20 parent(item)1.21 prev(item)1.22 see(item)1.23 selection(items=None)1.24 selection_set(items)1.25 selection_remove(items)1.26 selection_add(items)1.27 selection_toggle(items)1.28 set(item, column=None, value=None)1.29 tag_bind( tagname, sequence=None, callback=None)1.30 tag_configure( tagname, option=None, **kw)1.31 tag_has(tagname, item=None)1.⽅法⽅法描述bbox(item, column=None)返回指定item的框选范围，或者单元格的框选范围column( cid, option=None, **kw)设置或者查询某⼀列的属性delete(*items)删除指定⾏或者节点（含⼦节点）vdetach(*items)与delete类似，不过不是真正删除，⽽是隐藏了相关内容。

jQuery利用ztree实现树形表格的实例代码

jQuery利⽤ztree实现树形表格的实例代码最近公司的项⽬中要做⼀个树形表格，因为之前⼀直在⽤ztree实现基本的树形结构，理所当然的⾸先想到利⽤ztree来做。

⽹上找了⼀下别⼈做的树形表格，有使⽤ztree的，也有使⽤treeTable的，但效果都不太好，于是参考使⽤ztree的做法⾃⼰做了⼀个，贴出来供⼤家参考，请看注释说明，效果如下所⽰。

<!DOCTYPE HTML><html><head><link href="https:///zTree.v3/3.5.29/css/zTreeStyle/zTreeStyle.min.css" rel="external nofollow" rel="stylesheet"><script src="https:///jquery/3.2.1/jquery.min.js"></script><script src="https:///zTree.v3/3.5.29/js/jquery.ztree.all.min.js"></script><style>body {overflow: auto;}.ztree *{font-family: "微软雅⿊","宋体",Arial, "Times New Roman", Times, serif;}.ztree {padding: 0;border-left: 1px solid #E3E3E3;border-right: 1px solid #E3E3E3;border-bottom: 1px solid #E3E3E3;}.ztree li a {vertical-align: middle;height: 32px;padding: 0px;}.ztree li > a {width: 100%;}.ztree li a.curSelectedNode {padding-top: 0px;background-color: #FFE6B0;border: 1px #FFB951 solid;opacity: 1;height: 32px;}.ztree li ul {padding-left: 0px}.ztree div.divTd span {line-height: 30px;vertical-align: middle;}.ztree div.divTd {height: 100%;line-height: 30px;border-top: 1px solid #E3E3E3;border-left: 1px solid #E3E3E3;text-align: center;display: inline-block;color: #6c6c6c;overflow: hidden;}.ztree div.divTd:first-child {text-align: left;text-indent: 10px;border-left: none;}.ztree .head {background: #E8EFF5;}.ztree .head div.divTd {color: #393939;font-weight: bold;}.ztree .ck{padding: 0 5px;margin: 2px 3px 7px 3px;}li:nth-child(odd){background-color:#F5FAFA;}li:nth-child(even){background-color:#FFFFFF;}</style></head><body><div class="layer"><div id="tableMain"><ul id="dataTree" class="ztree"></ul></div></div></body></html><script type="text/javascript">var newOpen =null;$(function () {//初始化数据var data = [{"id":"20170525091439001010","name":"企业注册","pId":null,"status":"1","typecode":"02"},{"id":"20170724174119005610","name":"部门沟通演练","pId":"20170525091439001010","status":"1","typecode":"2"},{"id":"20170725085455000110","name":"测 queryHandler(data);});var setting = {view: {showLine: false,addDiyDom: addDiyDom,},data: {simpleData: {enable: true}}};/*** ⾃定义DOM节点*/function addDiyDom(treeId, treeNode) {var spaceWidth = 15;var liObj = $("#" + treeNode.tId);var aObj = $("#" + treeNode.tId + "_a");var switchObj = $("#" + treeNode.tId + "_switch");var icoObj = $("#" + treeNode.tId + "_ico");var spanObj = $("#" + treeNode.tId + "_span");aObj.attr('title', '');aObj.append('<div class="divTd swich fnt" style="width:60%"></div>');var div = $(liObj).find('div').eq(0);//从默认的位置移除switchObj.remove();spanObj.remove();icoObj.remove();//在指定的div中添加div.append(switchObj);div.append(spanObj);//隐藏了层次的spanvar spaceStr = "<span style='height:1px;display: inline-block;width:" + (spaceWidth * treeNode.level) + "px'></span>";switchObj.before(spaceStr);//图标垂直居中icoObj.css("margin-top","9px");switchObj.after(icoObj);var editStr = '';//宽度需要和表头保持⼀致editStr += '<div class="divTd" style="width:20%">' + (treeNode.typecode == null ? '' : treeNode.typecode ) + '</div>';editStr += '<div class="divTd" style="width:10%">' + (treeNode.status == '1' ? '有效' : '⽆效' ) + '</div>';editStr += '<div class="divTd" style="width:10%">' + opt(treeNode) + '</div>';aObj.append(editStr);}//初始化列表function queryHandler(zTreeNodes){//初始化树$.fn.zTree.init($("#dataTree"), setting, zTreeNodes);//添加表头var li_head = ' <li class="head"><a><div class="divTd" style="width:60%">类型名称</div><div class="divTd" style="width:20%">类型编码</div>' +'<div class="divTd" style="width:10%">是否有效</div><div class="divTd" style="width:10%">操作</div></a></li>';var rows = $("#dataTree").find('li');if (rows.length > 0) {rows.eq(0).before(li_head)} else {$("#dataTree").append(li_head);$("#dataTree").append('<li ><div style="text-align: center;line-height: 30px;" >⽆符合条件数据</div></li>')}}function opt(treeNode) {var htmlStr = '';htmlStr += '<input type="button" class="ck" onclick="doEdit(\'' + treeNode.tId + '\',\'' + treeNode.id + '\')" value="编辑"/>';htmlStr += '<input type="button" class="ck" onclick="doDelete(\'' + treeNode.tId + '\',\'' + treeNode.id + '\', \'' + + '\')" value="删除"/>';return htmlStr;}总结以上所述是⼩编给⼤家介绍的jQuery 利⽤ztree实现树形表格的实例代码，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。

jquery插件treegrid树状表格的使用方法详解（.Net平台）

jquery插件treegrid树状表格的使⽤⽅法详解（.Net平台）⼀、使⽤treegrid，需要以下⽀持jquery.min.js+jquery.treegrid.min.js⼆、后端提供树状列表格式的集合数据，借助前端的DT的配置控制，来在页⾯上输出满⾜treegrid格式要求的html前台：@using Model@{Layout = null;UserInfo userInfo = null;if (ViewData["LoginUser"] != null){userInfo = ViewData["LoginUser"] as UserInfo;}else{Response.Redirect("/Login/Index");}}<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /><title>⽤户列表</title><link href="~/Content/Scripts/h-ui/css/H-ui.min.css" rel="stylesheet" /><link href="~/Content/Scripts/h-ui.admin/css/H-ui.admin.css" rel="stylesheet" /><link href="~/Content/Scripts/Hui-iconfont/1.0.8/iconfont.css" rel="stylesheet" /><link href="~/Content/Scripts/treegrid/css/jquery.treegrid.css" rel="stylesheet" /><style>.page-container {padding: 10px;}.operation {background: #EFEEF0;padding: 3px;}.search {background: #EFEEF0;padding: 5px;margin-top: 5px;}.table {margin-top: 10px;}.dataTables_info {margin-left: 5px;}#table1_info {padding: 0;}#table1_length {margin-left: 15px;}</style></head><body><div class="page-container"><div class="operation">@Html.Partial("CRUDBtn", userInfo)</div><div class="table"><table id="table1" class="table table-border table-bordered table-bg table-hover"><thead><tr class="text-c"><th><input type="checkbox" name="" value=""></th><th>菜单名</th><th>请求路径</th><th>描述</th><th>添加时间</th><th>修改时间</th></tr></thead></table></div></div></body></html><script src="~/Content/Scripts/jquery-2.0.3.min.js"></script><script src="~/Content/Scripts/datatables/1.10.13/jquery.dataTables.min.js"></script><script src="~/Content/Scripts/layer/2.1/layer.js"></script><script src="~/Content/Scripts/My97DatePicker/WdatePicker.js"></script><script src="~/Content/Scripts/h-ui/js/H-ui.js"></script><script src="~/Content/Scripts/h-ui.admin/js/H-ui.admin.js"></script><script src="~/Content/Scripts/treegrid/js/jquery.treegrid.min.js"></script><script type="text/javascript">var table1 = null;$(function () {table1 = initializeTable();clickDeal();});/*点击处理*/function clickDeal() {var addBtn = $("#add");var deleteBtn = $("#delete");var editBtn = $("#edit");var viewBtn = $("#view");$("#search").click(function () {table1.ajax.reload();return false;});if (addBtn != null) {addBtn.click(function () {var title = $(this).text().substring(1).trim();var url = $(this).attr("url");layer_show(title, url, 600, 360);});}if (deleteBtn != null) {deleteBtn.click(function () {var idArr = [];var url = $(this).attr("url");$("input:checkbox[name=id]:checked").each(function () {var item = this;idArr.push($(item).val());});if (idArr.length == 0) {layer.msg("请⾄少选择⼀个选项", { icon: 2, time: 2000 });}else {layer.confirm('确认要删除吗？', function (index) {var loadIndex = layer.load();$.ajax({url: url,type: "post",data: { "idArrStr": idArr.toString() },dataType: "json",success: function (data) {if (data.Pass) {layer.close(loadIndex);layer.msg(data.Msg, { icon: 1, time: 2000 });table1.ajax.reload(null, false);} else {layer.msg(data.Msg, { icon: 1, time: 2000 });}},error: function (msg) {layer.msg(msg.status);}});});}});}if (editBtn != null) {editBtn.click(function () {var idArr = [];var title = $(this).text().substring(1).trim();var url = $(this).attr("url");$("input:checkbox[name=id]:checked").each(function () {var item = this;idArr.push($(item).val());});if (idArr.length != 1) {layer.msg("请选择⼀个选项", { icon: 2, time: 2000 });}else {url += "?id=" + idArr[0];layer_show(title, url, 600, 360);}});}if (viewBtn != null) {viewBtn.click(function () {var idArr = [];var title = $(this).text().substring(1).trim();var url = $(this).attr("url");$("input:checkbox[name=id]:checked").each(function () {var item = this;idArr.push($(item).val());});if (idArr.length != 1) {layer.msg("请选择⼀个选项", { icon: 2, time: 2000 });}else {url += "?id=" + idArr[0];layer_show(title, url, 600, 360);}});}}/*初始化table*/function initializeTable() {var table = $("#table1").DataTable({/****************************************表格数据加载****************************************************/"serverSide": true,"ajax": {//ajax请求数据源"url": "/Power/Manager/Search","type": "post","data": function (data) {//添加额外的数据给服务器}},"columns": [//列绑定{ "defaultContent": "" },{ "data": "PowerName" },{ "data": "Url" },{ "data": "Description" },{ "data": "AddTime" },{ "data": "ModifyTime" }],"columnDefs": [//列定义{"targets": [0],"data": "PowerId","render": function (data, type, full) {//全部列值可以通过full.列名获取,⼀般单个列值⽤data PS:这⾥的render是有多少列就执⾏多少次⽅法。

excel treeview 的用法

excel treeview 的用法Excel并没有内置的TreeView控件，但可以通过使用VBA编程来实现类似的功能。

要创建一个TreeView控件，首先需要打开Visual Basic for Applications编辑器（VBA编辑器）。

在VBA编辑器中，选择“插入”-“用户窗体”来插入一个用户窗体。

然后，在工具箱中选择“TreeView”控件并拖动到用户窗体上。

接下来，双击用户窗体，打开代码编辑器。

在代码编辑器中，可以编写相关的VBA代码来实现TreeView的功能。

以下是一个基本的示例代码，用于在TreeView中显示节点和子节点：```vbaPrivate Sub UserForm_Activate()' 添加根节点Dim rootNode As NodeSet rootNode = TreeView1.Nodes.Add(, , , "根节点")' 添加子节点Dim childNode As NodeSet childNode = TreeView1.Nodes.Add(rootNode, tvwChild, , "子节点1")Set childNode = TreeView1.Nodes.Add(rootNode, tvwChild, , "子节点2")' 添加子节点的子节点Dim subChildNode As NodeSet subChildNode = TreeView1.Nodes.Add(childNode, tvwChild, , "子节点1的子节点")' 展开根节点rootNode.Expanded = TrueEnd Sub```以上代码在用户窗体被激活时，将创建一个根节点以及子节点，并且展开根节点。

这只是一个基本的示例，可以根据具体需要来添加更多的节点、子节点以及自定义节点的属性和行为。

用树形控件TreeView设计学生档案查询程序

用树形控件TreeView设计学生档案查询程序事件过程代码如下。

Private Sub Form_Load()Dim key As String, Text As String, key1 As String, Text1 As StringDim nod As NodeDim str As String, DataSource As StringHeight = 7180Width = 11800Top = 0Left = 0Rs_TB06.Open 'TB06', Con, adOpenKeyset, adLockPessimistic '打开TB06表If Rs_TB06.RecordCount > 0 Then '判断TB06表中有系部记录With Rs_TB06Do While Not .EOFkey = .Fields('TB0602') '将TB0602（系部名称）字段设置为要添加结点的关键字Text = .Fields('TB0602') '将TB0602（系部名称）字段设置为要添加结点的文本str = .Fields('TB0601') '将TB0601（系部编码）字段保存在str中Set nod = TreeView_TB03.Nodes.Add(, tvwChild, key, Text) '将系部名称添加到树形控件上DataSource = 'Select * from TB03 where TB0309='' & str & ''' '该查询语句实现根据系部选班级Rs_TB03.Open DataSource, Con, adOpenKeyset, adLockPessimistic '将该系部下的班级记录打开With Rs_TB03Do While Not .EOFkey1 = .Fields('tb0302') '将TB0302（班级名称）字段设置为要添加结点的关键字Text1 = .Fields('tb0302') '将TB0302（班级名称）字段设置为要添加结点的文本'以上面系部名称结点为父结点，添加该系下的班级名称结点Set nod = TreeView_TB03.Nodes.Add(key, tvwChild, key1, Text1).MoveNext '添加下一个班级Loop.CloseEnd With.MoveNext'添加下一个系部Loop.CloseEnd WithEnd IfEnd Sub（3）编写单击树形控件中班级节点，查询该班所有学生信息的事件过程Private Sub TreeView_TB03_NodeClick(ByVal Node As MSComctlLib.Node)Dim I As Integer, Sum1 As Integer, Sum2 As Integer, BJ As StringWith Adodc_XA01BJ = TreeView_TB03.SelectedItem.Text '获得树形控件所选择的结点的文本，即班级名称.CommandType = adCmdText.RecordSource = 'Select A.*,GC0102,GC0202,GC0302,GC0402,TB0302 ' & _'From XA01 As A ,GC01,GC02,GC03,GC04 ,TB03 ' & _'Where XA0106 = GC0101 And XA0108 = GC0301 And XA0109 = GC0201 and XA0110=GC0401 ' & _'and XA0114=TB0301 and TB0302='' & BJ & ''' '通过该条查询语句查询出该班级的学生信息.RefreshEnd WithDataGrid_XA01.Refresh '在DataGrid 控件上显示最新的记录With Adodc_XA01.RecordsetIf Not .BOF Then .MoveFirstDo While Not .EOF '访问所选择出来的每一条学生记录If .Fields('XA0106').Value = '1' Then Sum1 = Sum1 1 '如果是男生，则男生人数加1If .Fields('XA0106').Value = '2' Then Sum2 = Sum2 1 '如果是女生，则女生人数加1.MoveNextLoopIf Not .BOF Then .MoveFirstEnd WithStatusBar1.Panels(2).Text = '男生人数：' & Sum1 '在状态栏上显示男生人数StatusBar1.Panels(3).Text = '女生人数：' & Sum2 '在状态栏上显示女生人数StatusBar1.Panels(4).Text = '合计人数：' & Sum1 Sum2 '在状态栏上显示总人数End Sub。

c#winformtreelistview的使用（treegridview）实例详解

c#winformtreelistview的使⽤（treegridview）实例详解TreeView控件显⽰的内容⽐较单⼀，如果需要呈现更详细信息TreeListView是⼀个不错的选择。

先看效果：⾸先需要引⽤⽂件System.Windows.Forms.TreeListView.dll、System.Runtime.InteropServices.APIs.dll你可以将TreeListView加⼊到⼯具箱中然后在添加到窗体中。

1.你需要添加列2.你需要添加⼀个ImageList作为节点图标的容器（你还需要配置TreeListView的SmallImageList属性为ImageList控件的ID）3.现在可以给控件绑定数据了此控件⽐较适合呈现具有⽗⼦级关系的复杂数据结构，当然也包含XML格式的数据下⾯尝试解析⼀个设备树XML然后绑定到控件中：<Device name="hidc-1600tv _192.168.230.188" ItemType="DVR" type="Onvif" TypeID="" Code="" location="" Description="" ID="" UniqueID="192.168.230.188"> <IP Value="192.168.230.188" /><Port Value="80" /><Username Value="admin" /><Password Value="1234" /><AuthenAddress Value="/" /><AuthenMode Value="1" /><OnvifUser Value="admin" /><OnvifPwd Value="1234" /><OnvifAddress Value="/onvif/device_service" /><RTSPUser Value="admin" /><RTSPPwd Value="1234" /><ChildDevices><Device name="" ItemType="Channel" type="" TypeID="" Code="" location="" Description="" id="" UniqueID=""><PTZEnable Value="True" /><PTZ1 Value="5" /><PTZ2 Value="15" /><PTZ3 Value="25" /><PTZ4 Value="35" /><PTZ5 Value="45" /><PTZ6 Value="55" /><PTZ7 Value="65" /><PTZ8 Value="75" /><PTZ9 Value="85" /><ChildDevices><Device name="" ItemType="RStreamer" type="" TypeID="1" Code="" location="" Description="" id=""><MediaProfile Value="1" /><Multicast Value="False" /></Device><Device name="" ItemType="RStreamer" type="" TypeID="2" Code="" location="" Description="" id=""><MediaProfile Value="2" /><Multicast Value="False" /></Device></ChildDevices></Device></ChildDevices></Device>使⽤递归算法很容易提取XML的结构public void LoadXmlTree(string xml){XDocument xDoc = XDocument.Parse(xml);TreeListViewItem item = new TreeListViewItem();string title = xDoc.Root.Attribute("name")?.Value ?? .LocalName;item.Text = title;item.ImageIndex = 0;item.SubItems.Add(xDoc.Root.Attribute("UniqueID")?.Value);item.SubItems.Add(xDoc.Root.Attribute("ItemType")?.Value);PopulateTree (xDoc.Root, item.Items);tvDevice.Items.Add(item);}public void PopulateTree (XElement element, TreeListViewItemCollection items){foreach (XElement node in element.Nodes()){TreeListViewItem item = new TreeListViewItem();string title = .LocalName.Trim();item.Text = title;if (title == "Device"){var attr = node.Attribute("ItemType")?.Value;switch (attr){case "Channel": item.ImageIndex = 1; break;case "RStreamer": item.ImageIndex = 3; break;default: break;}item.SubItems.Add(node.Attribute("UniqueID")?.Value);item.SubItems.Add(node.Attribute("ItemType")?.Value);}else{item.ImageIndex = 2;item.SubItems.Add(node.Attribute("Value")?.Value);}if (node.HasElements){PopulateTree (node, item.Items);}items.Add(item);}}说明：TreeListViewItem可构造传⼊value和imageindex，其中value会赋值给Text属性，imageindex就是节点显⽰的图标所对应的ImageList 的索引。

TreeView树形控件递归绑定数据库里的数据

TreeView树形控件递归绑定数据库⾥的数据TreeView树形控件递归绑定数据库⾥的数据。

第⼀种：性能不好第⼀步：数据库中查出来的表，字段名分别为UNAME(显⽰名称)，DID(关联数据)，UTYPE(类型)第⼆步：前台代码1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="tree.aspx.cs" Inherits="Maticsoft.Web.tree" %>23 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">45 <html xmlns="/1999/xhtml">6 <head runat="server">7 <title></title>8 <script type="text/javascript">9 function show(msg) {10 alert(msg);11 }12 </script>1314 </head>15 <body>1617 <form id="form1" runat="server">18 <div>19 <asp:TreeView ID="treeT" runat="server">20 </asp:TreeView>212223 </div>24 </form>25 </body>26 </html>第三步：后台代码1using System;2using System.Collections.Generic;3using System.Linq;4using System.Web;5using System.Web.UI;6using System.Web.UI.WebControls;7using System.Data;8using System.Data.SqlClient;910namespace Maticsoft.Web11 {12public partial class tree : System.Web.UI.Page13 {14 Maticsoft.BLL.G_USERS bll = new BLL.G_USERS();15 Maticsoft.Model.G_USERS model = new Model.G_USERS();1617protected void Page_Load(object sender, EventArgs e)18 {19//根节点的条件20 BindTree("8");21 }2223#region绑定⽗节点(第⼀级)24private void BindTree(string pid)25 {2627 DataSet ds = bll.GetList("a.status > -1 and utype=" + pid);28if (ds.Tables[0].Rows.Count > 0)29 {30for (int i = 0; i < ds.Tables[0].Rows.Count; i++)31 {32 TreeNode node = new TreeNode();33 node.Text = ds.Tables[0].Rows[i]["uName"].ToString();34 node.Target = ds.Tables[0].Rows[i]["dID"].ToString();35this.treeT.Nodes.Add(node);36 BindNode(node);37 }38 }39 }40#endregion4142#region绑定⼦节点4344#endregion45private void BindNode(TreeNode nd)46 {47 DataSet ds = bll.GetList("a.status>-1 and a.id=er_id and b.fid=" + Convert.ToString(nd.Target) + " order by b.shorder asc "); 48for (int i = 0; i < ds.Tables[0].Rows.Count; i++)49 {50 TreeNode node = new TreeNode();51 node.Text = ds.Tables[0].Rows[i]["uName"].ToString();52 node.Target = ds.Tables[0].Rows[i]["dID"].ToString();53 nd.ChildNodes.Add(node);5455//判断是否到最底层节点56if (ds.Tables[0].Rows[i]["utype"].ToString() != "0")57 {58 BindNode(node);59 }60 }61 }6263646566 }67 }效果功能图：另⼀种⼀步到位：(⼀次把所有数据放在数据集中，后⾯再查询)1using System;2using System.Collections.Generic;3using System.Linq;4using System.Web;5using System.Web.UI;6using System.Web.UI.WebControls;7using System.Data;8using System.Data.SqlClient;9using System.Data.OleDb;10namespace tree11 {12public partial class tree : System.Web.UI.Page13 {14protected void Page_Load(object sender, EventArgs e)15 {16if (!Page.IsPostBack)17 {18 DataSet ds = GetData();19 DataRow[] dr = ds.Tables[0].Select("utype=8");20 TreeNode node = new TreeNode();21 node.Text = dr[0]["UName"].ToString();22 node.Value = dr[0]["ID"].ToString();23this.TreeView1.Nodes.Add(node);24 BindTree(node, dr[0]["DID"].ToString(), ds);25 }26 }2728private void BindTree(TreeNode Nodes, string pid, DataSet ds)29 {30 DataRow[] dr = ds.Tables[0].Select("fid=" + pid, "shorder asc");31if (dr.Length > 0)32 {33for (int i = 0; i < dr.Length; i++)34 {35 TreeNode node = new TreeNode();36 node.Text = dr[i]["UName"].ToString();37 node.Value = dr[i]["ID"].ToString();38 Nodes.ChildNodes.Add(node);39if(dr[i]["utype"].ToString() !="0")40 BindTree(node, dr[i]["DID"].ToString(), ds);41 }42 }43 }4445private DataSet GetData()46 {47 OleDbConnection conn = new OleDbConnection(System.Configuration.ConfigurationManager.AppSettings["OleDbConnString"]);48 conn.Open();49string osqlstr ="select a.id,a.uname,a.utype,b.id did,b.fid,b.shorder from g_users A,G_DEPT B where a.status>-1 and a.id=er_id "; 5051 OleDbDataAdapter oda = new OleDbDataAdapter(osqlstr, conn);5253 DataSet ods = new DataSet();54 oda.Fill(ods);5556return ods;57 }58 }59 }。

C#TreeView控件使用代码

C#TreeView控件使⽤代码当前选中项：TreeView.SelectedNode增加顶级节点：TreeView.Nodes.Add("Key", "Text")增加同级节点：TreeView.SelectedNode.Parent.Nodes.Add("Key", "Text")增加⼦节点：TreeView.SelectedNode.Nodes.Add("Key", "Text")全部展开：TreeView.ExpandAll()全部收拢：TreeView.CollapseAll()重新设置TreeView数据库表结构为： ID 类型名称⽗级ID复制代码代码如下:private void loadTreeView(){this.货品类别TableAdapter1.Fill(superCargoDataSet1.货品类别);DataTable table = superCargoDataSet1.货品类别;DataRow[] row = table.Select("⽗级ID=0");foreach (DataRow r in row){TreeNode node = 货品类别TreeView.Nodes.Add(r["ID"].ToString(), r["类型名称"].ToString());recursionShow(node, r["ID"].ToString());}}private void recursionShow(TreeNode nodes, string id){DataTable table = superCargoDataSet1.货品类别;DataRow[] row = table.Select("⽗级ID=" + id);if (row != null){foreach (DataRow r in row){TreeNode node = nodes.Nodes.Add(r["ID"].ToString(), r["类型名称"].ToString());recursionShow(node, r["ID"].ToString());}}}删除选中节点和其⼦结点，同时删除数据库中相应记录数据库表结构为： ID 类型名称⽗级ID复制代码代码如下:private void 删除ToolStripButton_Click(object sender, EventArgs e){if (货品类别TreeView.SelectedNode != null){DataRow[] rowChildren = superCargoDataSet1.货品类别.Select("ID=" + 货品类别.ToString()); if (rowChildren != null){foreach (DataRow row in rowChildren){delete节点(row["ID"].ToString());row.Delete();}}货品类别TreeView.SelectedNode.Remove();}}private void delete节点(string id){DataRow[] rowChildren = superCargoDataSet1.货品类别.Select("⽗级ID=" + id);if (rowChildren != null){foreach (DataRow row in rowChildren){delete节点(row["ID"].ToString());row.Delete();}}}TreeView右键选中复制代码代码如下:private void treeView左侧_MouseDown( object sender , MouseEventArgs e ) {if( e.Button == MouseButtons.Right ){TreeNode node = treeView左侧.GetNodeAt (e.X , e.Y);if( node != null )//右键未选中节点，不改变当前选中的节点。

ASP NET+TreeView树型菜单操作实例(代码调试通过)

id="TextBox1" runat="server"></asp:TextBox></TD> </TR> <TR> <TD> <asp:Button
id="addButton" runat="server" Text="添加"></asp:Button> <asp:Button
id="editButton" runat="server" Text="修改"></asp:Button> <asp:Button
(TreeView1.SelectedNodeIndex); int id=Int32.Parse(treenode.Target); string classname=TextBox1.Text; if(treenode.Target!=null) { OleDbConnection conn=new OleDbConnection();
runat="server"></iewc:TreeView></TD> <TD vAlign="top"> <TABLE id="Table2" cellSpacing="1"
cellPadding="1" width="100%" border="0"> <TR> <TD>节点名 <asp:TextBox
ListItem list=new ListItem(); if (ds.Tables[0].Rows[i]["depth"].ToString()=="0") { list.Text=ds.Tables[0].Rows[i]

treeview的样式表例子

treeview的样式表例子以下是一个TreeView控件的样式表示例：```xml<Style TargetType="{x:Type TreeView}"><Setter Property="Background" Value="{StaticResource WindowColor}"/><Setter Property="BorderBrush" Value="Black"/><Setter Property="BorderThickness" Value="1"/><Setter Property="ItemContainerStyle"><Setter Property="Background" Value="{StaticResource ContentAreaColorLight}"/><Setter Property="BorderBrush" Value="{StaticResource ContentAreaColorDark}"/><Setter Property="BorderThickness" Value="0,0,1,0"/></Setter><Setter Property="ItemTemplate"><Setter Property=""><ControlTemplate TargetType="{x:Type TreeViewItem}"> <Grid><Rectangle Fill="{TemplateBinding Background}"Stroke="{TemplateBinding BorderBrush}" StrokeThickness="0"/><ContentPresenter Margin="6"VerticalAlignment="{TemplateBinding VerticalAlignment}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}"/></Grid></ControlTemplate></Setter></Setter></Style>```这个样式表定义了TreeView控件的背景颜色、边框颜色和边框厚度。

TreeView树形控件与数据库结合编程

Set NodeSub = aNode.Child
While Not NodeSub Is Nothing
aStrWhere = aStrWhere & "ID = " & Mid(NodeSub.Key, 4) & " OR "
If NodeSub.Children > 0 Then GetSubKey NodeSub, aStrWhere
Exit Sub
End If
StrWhere = m_TreeOpt.GetSubNodeKey(.SelectedItem)
cn.Execute "DELETE FROM tbTree WHERE " & StrWhere
.Nodes.Remove .SelectedItem.Key
End With
End Sub
'修改结点
Private Sub mnuModify_Click()
m_bolAddFlag = False
With TreeView1
m_strKey = Mid(.SelectedItem.Key, 4)
End Sub
类里提供了将数据库中的数据显示在控件中的方法。删除结点及其下面所有子结点的方法。也可以将类做成DLL，在以后的应用中直接加载DLL就可以了。
m_TreeOpt.AddTree rs, "ID", "CONTEXT", "PARENTID"
rs.Close
Set rs = Nothing
End Sub
Private Sub Form_Load()

（四十七）c#Winform自定义控件-树表格（treeGrid）-HZHControls

（四⼗七）c#Winform⾃定义控件-树表格（treeGrid）-HZHControls 官⽹前提⼊⾏已经7,8年了，⼀直想做⼀套漂亮点的⾃定义控件，于是就有了本系列⽂章。

GitHub：码云：如果觉得写的还⾏，请点个 star ⽀持⼀下吧欢迎前来交流探讨：企鹅群568015492⿇烦博客下⽅点个【推荐】，谢谢NuGetInstall-Package HZH_Controls⽬录⽤处及效果准备⼯作这个是在前⾯表格的基础上，扩展了⾃定义⾏实现的，当然也修改了⼀些列表控件以兼容如果对前⾯的表格控件不了解，请移步查看开始实现树表格的思路就是，在⾏控件中再添加⼀个⽆标题的表格控件，当需要显⽰⼦节点的时候，将⼦节点数据加载到⾏⾥的表格控件中，然后处理⼀下事件，让事件可以穿透到最顶层就⾏了。

另外我们前⾯表格中的⾏个数是根据⾼度⼤⼩⾃动计算的，这⾥就会出现问题，当出现⼦节点表格的时候，就会导致重算个数和⾼度，所有我们在表格列表控件增加⼀个属性来禁⽤这个⾃动计算。

添加⼀个⽤户控件，命名UCDataGridViewTreeRow，实现接⼝IDataGridViewRow属性1#region属性2public event DataGridViewEventHandler CheckBoxChangeEvent;34public event DataGridViewEventHandler CellClick;56public event DataGridViewEventHandler SourceChanged;78public List<DataGridViewColumnEntity> Columns9 {10get;11set;12 }1314public object DataSource15 {16get;17set;18 }23set;24 }25private bool m_isChecked;26public bool IsChecked27 {28get29 {30return m_isChecked;31 }3233set34 {35if (m_isChecked != value)36 {37 m_isChecked = value;38 (this.panCells.Controls.Find("check", false)[0] as UCCheckBox).Checked = value;39 }40 }41 }4243int m_rowHeight = 40;44public int RowHeight45 {46get47 {48return m_rowHeight;49 }50set51 {52 m_rowHeight = value;53this.Height = value;54 }55 }56#endregion构造函数处理⼀写东西，注意 this.ucDGVChild.ItemClick ，这个是将⼦节点表格的点击事件向上传递 1public UCDataGridViewTreeRow()2 {3 InitializeComponent();4this.ucDGVChild.RowType = this.GetType();5this.ucDGVChild.IsAutoHeight = true;6this.SizeChanged += UCDataGridViewTreeRow_SizeChanged;7this.ucDGVChild.ItemClick += (a, b) =>8 {9if (CellClick != null)10 {11 CellClick(a, new DataGridViewEventArgs()12 {13 CellControl = (a as Control),14 CellIndex = (a as Control).Tag.ToInt()15 });16 }17 };1819 }实现接⼝函数BindingCellData，主要处理⼀下数据绑定后将⼦节点数据向下传递1public void BindingCellData()2 {3for (int i = 0; i < Columns.Count; i++)4 {5 DataGridViewColumnEntity com = Columns[i];6var cs = this.panCells.Controls.Find("lbl_" + com.DataField, false);7if (cs != null && cs.Length > 0)8 {9var pro = DataSource.GetType().GetProperty(com.DataField);10if (pro != null)11 {12var value = pro.GetValue(DataSource, null);13if (com.Format != null)14 {15 cs[0].Text = com.Format(value);16 }17else18 {19 cs[0].Text = value.ToStringExt();20 }21 }22 }23 }24 panLeft.Tag = 0;25var proChildrens = DataSource.GetType().GetProperty("Childrens");26if (proChildrens != null)27 {28var value = proChildrens.GetValue(DataSource, null);29if (value != null)30 {31int intSourceCount = 0;32if (value is DataTable)33 {34 intSourceCount = (value as DataTable).Rows.Count;35 }36else if (typeof(IList).IsAssignableFrom(value.GetType()))37 {38 intSourceCount = (value as IList).Count;39 }40if (intSourceCount > 0)41 {42 panLeft.BackgroundImage = Properties.Resources.caret_right;43 panLeft.Enabled = true;44 panChildGrid.Tag = value;45 }52 }53else54 {55 panLeft.BackgroundImage = null;56 panLeft.Enabled = false;57 panChildGrid.Tag = null;58 }59 }60else61 {62 panLeft.BackgroundImage = null;63 panLeft.Enabled = false;64 panChildGrid.Tag = null;65 }66 }实现函数绑定列1public void ReloadCells()2 {3try4 {5 ControlHelper.FreezeControl(this, true);6this.panCells.Controls.Clear();7this.panCells.ColumnStyles.Clear();89int intColumnsCount = Columns.Count();10if (Columns != null && intColumnsCount > 0)11 {12if (IsShowCheckBox)13 {14 intColumnsCount++;15 }16this.panCells.ColumnCount = intColumnsCount;17for (int i = 0; i < intColumnsCount; i++)18 {19 Control c = null;20if (i == 0 && IsShowCheckBox)21 {22this.panCells.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(SizeType.Absolute, 30F)); 2324 UCCheckBox box = new UCCheckBox();25 = "check";26 box.TextValue = "";27 box.Size = new Size(30, 30);28 box.Dock = DockStyle.Fill;29 box.CheckedChangeEvent += (a, b) =>30 {31 IsChecked = box.Checked;32this.ucDGVChild.Rows.ForEach(p => p.IsChecked = box.Checked);33if (CheckBoxChangeEvent != null)34 {35 CheckBoxChangeEvent(a, new DataGridViewEventArgs()36 {37 CellControl = box,38 CellIndex = 039 });40 }41 };42 c = box;43 }44else45 {46var item = Columns[i - (IsShowCheckBox ? 1 : 0)];47this.panCells.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(item.WidthType, item.Width)); 4849 Label lbl = new Label();50 lbl.Tag = i - (IsShowCheckBox ? 1 : 0);51 = "lbl_" + item.DataField;52 lbl.Font = new Font("微软雅⿊", 12);53 lbl.ForeColor = Color.Black;54 lbl.AutoSize = false;55 lbl.Dock = DockStyle.Fill;56 lbl.TextAlign = ContentAlignment.MiddleCenter;57 lbl.MouseDown += (a, b) =>58 {59 Item_MouseDown(a, b);60 };61 c = lbl;62 }63this.panCells.Controls.Add(c, i, 0);64 }6566 }67 }68finally69 {70 ControlHelper.FreezeControl(this, false);71 }72 }当点击展开图标的时候处理⼦节点的数据绑定以及⾼度计算1private void panLeft_MouseDown(object sender, MouseEventArgs e)2 {3try4 {5 ControlHelper.FreezeControl(this.FindForm(), true);6if (panLeft.Tag.ToInt() == 0)7 {8var value = panChildGrid.Tag;9if (value != null)16 intSourceCount = (value as DataTable).Rows.Count;17 }18else if (typeof(IList).IsAssignableFrom(value.GetType()))19 {20 intSourceCount = (value as IList).Count;21 }22this.panChildGrid.Height = RowHeight * intSourceCount;23if (panChildGrid.Height > 0)24 {25if (value != this.ucDGVChild.DataSource)26 {27this.ucDGVChild.Columns = Columns;28this.ucDGVChild.RowHeight = RowHeight;29this.ucDGVChild.HeadPadingLeft = this.panLeft.Width;30this.ucDGVChild.IsShowCheckBox = IsShowCheckBox;31this.ucDGVChild.DataSource = value;32this.ucDGVChild.Rows.ForEach(p => p.IsChecked =this.IsChecked);33 }34 }35 }3637 }38else39 {40 panLeft.Tag = 0;41 panChildGrid.Height = 0;42 panLeft.BackgroundImage = Properties.Resources.caret_right;43 }44 }45finally46 {47 ControlHelper.FreezeControl(this.FindForm(), false);48 }49 }承载⼦节点表格的panel 在⼤⼩改变的时候，处理⽗级表格的⼤⼩。

[Python学习]ete3绘制树形图的源代码Excel数据可视化

【Python学习】ete3绘制树形图的源代码，Excel数据可视化用python的ete3绘制树形图的源代码文件：ete3_test99.py，运行可生成指定数据（如A0000002）的所有下级树的树形结构图。

源代码用pycharm编辑。

代码如下：import ete3import pandas as pdfrom ete3 import Tree, NodeStyle, TreeStyle# from ete3.webtool import Webpagedf = pd.read_excel('DATA.xlsx')boss = 'A0000002'subordinates = df[df['上级ID'] == boss]['下级ID'].tolist() def add_subtree(subtree, t):for child_node in subtree:ts = t.add_child(name=child_node)children = df[df['上级ID'] == child_node]['下级ID'].tolist()if children:add_subtree(children, ts)# 节点标签、样式label_size = 10name_face = ete3.TextFace(child_node,fgcolor="green", fsize=label_size)ts.add_face(name_face, column=0, position='branch-right')ns = NodeStyle()ns['fgcolor'] = 'green'ns['size'] = 20ns['shape'] = 'circle' # 节点形状，'emptyCircle' 使用空心圆 'circle' 实心圆# ns.show_leaf_name = Truets.set_style(ns)def draw_tree(boss, Webpage=None):t = Tree(name=boss)add_subtree(subordinates, t)# 主节点标签、样式name_face_1 = ete3.TextFace(boss, fgcolor="red",fsize=15)t.add_face(name_face_1, column=0, position='branch-right')ns = NodeStyle()ns['bgcolor'] = "white" # 背景颜色ns['size'] = 30 # 主节点大小ns['shape'] = "circle" # 节点形状，'emptyCircle' 使用空心圆 'circle' 实心圆ns['fgcolor'] = "red" # 字体颜色ns['draw_descendants'] = Truet.set_style(ns)ts = TreeStyle()ts.show_leaf_name = Falsets.mode = 'r'ts.arc_start = -180ts.arc_span = 360ts.branch_vertical_margin = 10ts.scale = 20t.render(boss + '_tree.png', tree_style=ts) t.render(boss + '_tree.html', tree_style=ts, w=Webpage)draw_tree(boss)用到的演示数据‘data.xlsx’文件结构如下：两个文件放在同一目录下，运行ete3_test99.py，可以找出指定数据“A0000002”的所有下级树，并生成树形结构图A0000002_tree.png文件（如下图）。

vue中可编辑树状表格的实现代码

vue中可编辑树状表格的实现代码vue中可编辑树状表格的代码如下所⽰：html代码<template><el-table:data="datatree"row-key="id":tree-props="{children: 'children'}"><el-table-column label="姓名" border><template slot-scope="scope"><el-input placeholder="请输⼊内容" v-show="scope.row.show" v-model="bel"></el-input><span v-show="!scope.row.show">{{bel}}</span></template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button @click="scope.row.show =true" >编辑</el-button><el-button @click="scope.row.show =false">保存</el-button></template></el-table-column></el-table></template>js代码<script>export default {data(){return {datatree: [{id: 1,label: '⽔果',show:false,children: [{id: 4,label: '苹果',show:false,children: [{id: 9,label: '苹果⽪',show:false}, {id: 10,label: '苹果仔',show:false}]}]}, {id: 2,label: '蔬菜',show:false,children: [{id: 5,label: '青菜',show:false}, {id: 6,label: '⼟⾖',show:false}]}, {id: 3,label: '饮料',show:false,children: [{id: 7,label: '冰红茶',show:false}, {id: 8,label: '酷⼉',show:false}]}],defaultProps: {children: 'children',label: 'label',show:'show'}}}}效果图⼀个简单的可编辑树状表格就出现了嫌input框太⼤⾃⼰设置⼀下到此这篇关于vue中可编辑树状表格的实现代码的⽂章就介绍到这了,更多相关vue树状表格内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！。