在“会飞的鱼”博客中看到GridView实现树形结构的代码,经过修改,添加了树形结构中的复选框功能,欢迎吐槽。

源地址:http://www.cnblogs.com/chhuic/archive/2012/05/11/2495577.html

 <script type="text/javascript">
//树节点相关控制
<!--
function hideChildren(node) {
var level = parseInt(node.getAttribute("level"));
var nextNode = node.nextSibling;
while (nextNode != null && parseInt(nextNode.getAttribute("level")) > level) {
nextNode.style.display = "none"; nextNode = nextNode.nextSibling;
}
}
function showChildren(node) {
var level = parseInt(node.getAttribute("level"));
var id = node.getAttribute("id");
var nextNode = node.nextSibling;
while (nextNode != null && parseInt(nextNode.getAttribute("level")) > level) {
if (nextNode.getAttribute("pid") == id) {
if (node.getAttribute("expand") == "1") {
nextNode.style.display = "";
showChildren(nextNode);
}
else {
nextNode.style.display = "none";
}
}
nextNode = nextNode.nextSibling;
}
}
function setExpand(sender) {
var curNode = sender.parentNode.parentNode;
if (curNode.getAttribute("expand") == "1") {
curNode.setAttribute("expand", "0");
sender.src = "../../Common/Images/Down.gif";
hideChildren(curNode);
}
else {
curNode.setAttribute("expand", "1");
sender.src = "../../Common/Images/Top.gif";
showChildren(curNode);
}
}
function setCheck(sender){
var curNode = sender.parentNode.parentNode;
if (curNode.getAttribute("expand") == "1") {
var level = parseInt(curNode.getAttribute("level"));
var nextNode = curNode.nextSibling;
while (nextNode != null && parseInt(nextNode.getAttribute("level")) > level) { var a=nextNode.firstChild.firstChild;
a.checked = sender.checked;
nextNode = nextNode.nextSibling;
} }
}
//-->
</script>

Script Code

 <asp:GridView ID="gvList" runat="server" AutoGenerateColumns="False" CssClass="datatbl"
Style="width: 900px" DataKeyNames="ID,PID,Level,HasChild,processName,process,content" TreeColumnIndex="0"
OnRowDataBound="gvList_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="检查编号">
<ItemTemplate>
<asp:CheckBox ID="cboProcess" onclick="setCheck(this)" runat="server" />
<asp:Label ID="Label1" runat="server" Text='<%# Bind("process") %>'></asp:Label>
</ItemTemplate>
<HeaderStyle Width="200px" />
</asp:TemplateField>
<asp:BoundField HeaderText="检查内容" DataField="content">
<HeaderStyle Width="700px" />
</asp:BoundField>
<asp:BoundField DataField="level" HeaderText="level" Visible="False" />
</Columns>
<EmptyDataTemplate>
<div class="tip">
暂无记录!</div>
</EmptyDataTemplate>
<HeaderStyle HorizontalAlign="Center" CssClass="head"></HeaderStyle>
<PagerStyle HorizontalAlign="Right"></PagerStyle>
<AlternatingRowStyle CssClass="alter"></AlternatingRowStyle>
<RowStyle CssClass="item"></RowStyle>
</asp:GridView>

HTML Code

 protected void gvList_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
# region 生成树形结构
string id = gvList.DataKeys[e.Row.RowIndex]["ID"].ToString();
string pid = gvList.DataKeys[e.Row.RowIndex]["PID"].ToString();
string level = gvList.DataKeys[e.Row.RowIndex]["Level"].ToString();
string checkNo = gvList.DataKeys[e.Row.RowIndex]["process"].ToString(); //增加节点的属性
e.Row.Attributes.Add("id", id);
e.Row.Attributes.Add("pid", pid);
e.Row.Attributes.Add("level", level);
e.Row.Attributes.Add("expand", "");
int indent = (int.Parse(level) - ) * ;
//判断是否有子节点
if (gvList.DataKeys[e.Row.RowIndex]["HasChild"].ToString() == "")
{
//设置父节点前面的图片和点击事件
HtmlImage img = new HtmlImage();
img.Src = "../../Common/Images/Top.gif";
img.Attributes.Add("onclick", "setExpand(this)");
img.Style.Add("cursor", "pointer");
e.Row.Cells[].Controls.AddAt(, img);
e.Row.Cells[].Style["font-weight"] = "bold";
indent += ;
}
else
{
indent += ;
} e.Row.Cells[].Style["padding-left"] = indent + "px";
e.Row.Cells[].Controls.Add(new LiteralControl(e.Row.Cells[].Text));
# endregion
e.Row.Attributes["onmouseover"] = "style.backgroundColor='#F2FDDB'";
e.Row.Attributes["onmouseout"] = "style.backgroundColor=''";
} }

C# Code

GridView 树形结构分组的功能的更多相关文章

  1. 在论坛中出现的比较难的sql问题:8(递归问题 树形结构分组)

    原文:在论坛中出现的比较难的sql问题:8(递归问题 树形结构分组) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记解决的方法了. 所以,觉得有必 ...

  2. Extjs实现树形结构三连选

    当项目中需要一个部门人员选择或者省市县地域连选时,就需要树形结构的连选. 再此,写了一个简单的树形结构三连选功能,模拟从后台读取数据和处理数据(欢迎大家交流指正). 代码如下: 循环创建三棵树,其中只 ...

  3. 「SQL归纳」树形结构表的存储与查询功能的实现——通过路径方法(非递归)

    一.树形结构例子分析: 以360问答页面为例:http://wenda.so.com/c/ 我们通过观察URL,可以明确该页面的数据以树形结构存储,下面三块模块分别为: ①根节点 ②根节点的第一层子节 ...

  4. VBA读取文件夹下所有文件夹及文件内容,并以树形结构展示

    Const TR_LEVEL_MARK = "+"Const TR_COL_INDEX = "A"Const TR_COL_LEVEL = "E&qu ...

  5. 树形结构的数据库表Schema设计-基于左右值编码

    树形结构的数据库表Schema设计 程序设计过程中,我们常常用树形结构来表征某些数据的关联关系,如企业上下级部门.栏目结构.商品分类等等,通常而言,这些树状结构需要借助于数据库完 成持久化.然而目前的 ...

  6. Atitit.各种 数据类型 ( 树形结构,表形数据 ) 的结构与存储数据库 attilax 总结

    Atitit.各种  数据类型 ( 树形结构,表形数据  ) 的结构与存储数据库 attilax  总结 1. 数据结构( 树形结构,表形数据,对象结构 ) 1 2. 编程语言中对应的数据结构 jav ...

  7. 使用ztree.js,受益一生,十分钟学会使用tree树形结构插件

    看到ztree.js,这几个字眼,毋庸置疑,那肯定就是tree树形结构了,曾经的swing年代有jtree,后来jquery年代有jstree和treeview,虽然我没写过,但是我见过,一些小功能做 ...

  8. 部门树形结构,使用Treeview控件显示部门

    部门树形结构.设计张部门表用于存储部门编码.名称.上级部门id,使用Treeview控件显示部门树,并实现部门增删改.移动.折叠等功能.特别提示,部门有层级关系,可用donetbar的adtree控件 ...

  9. jQuery+zTree加载树形结构菜单

    jQuery+zTree加载树形结构菜单 由于项目中需要设计树形菜单功能,经过一番捣腾之后,终于给弄出来了,所以便记下来,也算是学习zTree的一个总结吧. zTree的介绍: 1.zTree 是利用 ...

随机推荐

  1. ABP源码分析四十七:ABP中的异常处理

    ABP 中异常处理的思路是很清晰的.一共五种类型的异常类. AbpInitializationException用于封装ABP初始化过程中出现的异常,只要抛出AbpInitializationExce ...

  2. Html5 Json应用

    本文主要说明Json的基本概念,和一个在Html中使用Json给元素赋值的小例子,属于基础性信息 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Obj ...

  3. 异步与并行~List<T>是线程安全的吗?

    返回目录 题目有点意思,大家都知道Dictionary<K,V>不是线程安全的类型,而List<T>是线程安全的吗?在今天之前大叔没有去测试过,而就在今天也是一个VIP问我,说 ...

  4. ajax-异步JavaScript和XML

    什么是ajax? ajax是异步的javascript和XML ( Asynchronous Javascript And XML ) 优点:节省用户操作时间,提高用户体验.减少数据请求次数. 什么是 ...

  5. <!--[if IE 9]>....<!end if-->

    1.页面里面经常看到类似[if it IE 9],表示的是限定某些浏览器版本才能执行的语句. ! [if ! IE] 含义:如果不是IE It [if it IE 9] 含义:如果是IE9 Ite [ ...

  6. $(document).ready() 与window.onload的区别

    1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同 ...

  7. 无限循环轮播图之运动框架(原生JS)

    封装运动框架 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ retu ...

  8. 移动端自适应之——rem与font-size

    需求:在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案:布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size. 假设设计稿是宽750px来做的,书写css方便计 ...

  9. 1.JAVA之GUI编程概述

          下列内容为本人看毕向东老师java视频教程学习笔记! JAVA GUI图形用户界面编程: Windows 操作系统提供两种操作方式:                             ...

  10. Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端

    0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...