ASP.NET生成树形显示的GridView实现思路
程序员文章站
2024-03-05 11:10:24
目的：生成树形结构的表格数据（easyui也有treegrid，此处只是提供一个思路），可以扩展单击展开/收缩节点 图例： 类代码： 复制代码 代码如下: using sy...
目的：生成树形结构的表格数据（easyui也有treegrid，此处只是提供一个思路），可以扩展单击展开/收缩节点
图例：
类代码：
using system;
using system.data;
/// <summary>
///gridviewhelper 的摘要说明
/// </summary>
public class gridviewhelper
{
private string gridline; //连接线
private datatable dt; //传入的datatable
private datatable dtout; //输出的datatable
private datarow row; //用于从dataview取数据并增加到dtout
public gridviewhelper()
{
//
//todo: 在此处添加构造函数逻辑
//
}
/// <summary>
/// 生成树形结构的datatable
/// </summary>
/// <param name="datatable">原始数据表</param>
/// <param name="parentfield">上级节点关键字段</param>
/// <param name="parentvalue">上级节点值</param>
/// <param name="keyfield">本节点关键字段</param>
/// <param name="textfield">显示的文本字段</param>
/// <param name="sortstring">排序字符串</param>
/// <returns>处理后的datatable</returns>
public datatable getgridviewtreedata(datatable datatable, string parentfield, string parentvalue, string keyfield, string textfield, string sortstring)
{
datatable.columns.add("level", type.gettype("system.int32"));
dt = datatable;
dtout = datatable.clone();
resettextfield(parentfield, parentvalue, keyfield, textfield, sortstring, 0);
return dtout;
}
/// <summary>
/// 递归生成新的节点名称(带连接线)
/// </summary>
/// <param name="parentvaluefield">上级节点关键字段</param>
/// <param name="parentvalue">上级节点值</param>
/// <param name="keyfield">本节点关键字段</param>
/// <param name="textfield">显示出来的文本字段</param>
/// <param name="sortstring">排序字符串</param>
/// <param name="level">树深度</param>
/// <returns></returns>
private void resettextfield(string parentvaluefield, string parentvalue, string keyfield, string textfield, string sortstring,int level)
{
dataview dv = new dataview(dt, parentvaluefield + "='" + parentvalue + "'", sortstring, dataviewrowstate.currentrows);
int a = dv.count;
if (dv.count == 0)
{
return;
}
for (int i = 0; i < a; i++)
{
gridline = "";
dv.rowfilter = parentvaluefield + "='" + parentvalue + "'";
dv.sort = sortstring;
gettreeline(parentvaluefield, dv[i][parentvaluefield].tostring(), keyfield, dv[i][keyfield].tostring(), sortstring);
dv.rowfilter = parentvaluefield + "='" + parentvalue + "'";
dv.sort = sortstring;
row = dtout.newrow();
for (int c = 0; c < dv[i].row.itemarray.length; c++)
{
row[c] = dv[i][c];
}
dtout.rows.add(row);
dtout.rows[dtout.rows.count - 1][textfield] = gridline + (i == a - 1 ? "┗" : "┣") + dv[i][textfield].tostring();
dtout.rows[dtout.rows.count - 1]["level"] = level;
resettextfield(parentvaluefield, dv[i][keyfield].tostring(), keyfield, textfield, sortstring,level+1);
}
dv.dispose();
}
/// <summary>
/// 回溯生成树的连接线
/// </summary>
/// <param name="parentvaluefield">上级节点关键字段</param>
/// <param name="parentvalue">上级节点值</param>
/// <param name="keyfield">本节点关键字段</param>
/// <param name="nodekey">本节点值</param>
/// <param name="sortstring">排序字符串</param>
/// <returns></returns>
private void gettreeline(string parentvaluefield, string parentvalue, string keyfield, string nodekey, string sortstring)
{
//选择父层节点
dataview dv = new dataview(dt, keyfield + "='" + parentvalue + "'", sortstring, dataviewrowstate.currentrows);
if (dv.count > 0)
{
//选择父节点同级节点
dv.rowfilter = parentvaluefield + "='" + dv[0][parentvaluefield].tostring() + "'";
dv.sort = sortstring;
for (int j = 0; j < dv.count; j++)
{
if (dv[j][keyfield].tostring() == parentvalue)
{
if (j == dv.count - 1)
{
gridline = " " + gridline;
}
else
{
gridline = "┃" + gridline;
}
}
}
gettreeline(parentvaluefield, dv[0][parentvaluefield].tostring(), keyfield, dv[0][keyfield].tostring(), sortstring);
}
dv.dispose();
}
}
html示例代码：
<%@ page language="c#" autoeventwireup="true" codefile="gridviewtree.aspx.cs" inherits="gridviewtree" %>
<!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>生成树形显示的gridview</title>
<style type="text/css">
body
{
line-height: 16px;
font-size: 14px;
}
td
{
padding: 0 2px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td valign="top">
<asp:dropdownlist id="dropdownlist1" runat="server">
</asp:dropdownlist>
</td>
<td>
<asp:gridview id="gridview1" runat="server" borderwidth="1px" cellpadding="3" gridlines="vertical"
autogeneratecolumns="false" backcolor="white" bordercolor="#e7e7ff" borderstyle="none">
<alternatingrowstyle backcolor="#f7f7f7" />
<columns>
<asp:boundfield datafield="context" headertext="文本" />
<asp:boundfield datafield="id" headertext="id">
<itemstyle horizontalalign="right" width="80px" />
</asp:boundfield>
<asp:boundfield datafield="parentid" headertext="父id">
<itemstyle horizontalalign="right" width="80px" />
</asp:boundfield>
<asp:boundfield datafield="level" headertext="level">
<itemstyle horizontalalign="right" width="80px" />
</asp:boundfield>
</columns>
<footerstyle backcolor="#b5c7de" forecolor="#4a3c8c" />
<headerstyle backcolor="#4a3c8c" font-bold="true" forecolor="#f7f7f7" />
<pagerstyle backcolor="#e7e7ff" forecolor="#4a3c8c" horizontalalign="right" />
<rowstyle backcolor="#e7e7ff" forecolor="#4a3c8c" />
<selectedrowstyle backcolor="#738a9c" font-bold="true" forecolor="#f7f7f7" />
<sortedascendingcellstyle backcolor="#f4f4fd" />
<sortedascendingheaderstyle backcolor="#5a4c9d" />
<sorteddescendingcellstyle backcolor="#d8d8f0" />
<sorteddescendingheaderstyle backcolor="#3e3277" />
</asp:gridview>
</td>
</tr>
</table>
</form>
</body>
</html>
后台代码：
datatable dt = gvhelper.getgridviewtreedata(datatable, "parentid", "1", "id", "context", "context asc");
gridview1.datasource = dt;
gridview1.databind();
dropdownlist1.items.add("");
dropdownlist1.appenddatabounditems = true;
dropdownlist1.datasource = dt;
dropdownlist1.datatextfield = "context";
dropdownlist1.datavaluefield = "id";
dropdownlist1.databind();
图例：
类代码：
复制代码 代码如下:
using system;
using system.data;
/// <summary>
///gridviewhelper 的摘要说明
/// </summary>
public class gridviewhelper
{
private string gridline; //连接线
private datatable dt; //传入的datatable
private datatable dtout; //输出的datatable
private datarow row; //用于从dataview取数据并增加到dtout
public gridviewhelper()
{
//
//todo: 在此处添加构造函数逻辑
//
}
/// <summary>
/// 生成树形结构的datatable
/// </summary>
/// <param name="datatable">原始数据表</param>
/// <param name="parentfield">上级节点关键字段</param>
/// <param name="parentvalue">上级节点值</param>
/// <param name="keyfield">本节点关键字段</param>
/// <param name="textfield">显示的文本字段</param>
/// <param name="sortstring">排序字符串</param>
/// <returns>处理后的datatable</returns>
public datatable getgridviewtreedata(datatable datatable, string parentfield, string parentvalue, string keyfield, string textfield, string sortstring)
{
datatable.columns.add("level", type.gettype("system.int32"));
dt = datatable;
dtout = datatable.clone();
resettextfield(parentfield, parentvalue, keyfield, textfield, sortstring, 0);
return dtout;
}
/// <summary>
/// 递归生成新的节点名称(带连接线)
/// </summary>
/// <param name="parentvaluefield">上级节点关键字段</param>
/// <param name="parentvalue">上级节点值</param>
/// <param name="keyfield">本节点关键字段</param>
/// <param name="textfield">显示出来的文本字段</param>
/// <param name="sortstring">排序字符串</param>
/// <param name="level">树深度</param>
/// <returns></returns>
private void resettextfield(string parentvaluefield, string parentvalue, string keyfield, string textfield, string sortstring,int level)
{
dataview dv = new dataview(dt, parentvaluefield + "='" + parentvalue + "'", sortstring, dataviewrowstate.currentrows);
int a = dv.count;
if (dv.count == 0)
{
return;
}
for (int i = 0; i < a; i++)
{
gridline = "";
dv.rowfilter = parentvaluefield + "='" + parentvalue + "'";
dv.sort = sortstring;
gettreeline(parentvaluefield, dv[i][parentvaluefield].tostring(), keyfield, dv[i][keyfield].tostring(), sortstring);
dv.rowfilter = parentvaluefield + "='" + parentvalue + "'";
dv.sort = sortstring;
row = dtout.newrow();
for (int c = 0; c < dv[i].row.itemarray.length; c++)
{
row[c] = dv[i][c];
}
dtout.rows.add(row);
dtout.rows[dtout.rows.count - 1][textfield] = gridline + (i == a - 1 ? "┗" : "┣") + dv[i][textfield].tostring();
dtout.rows[dtout.rows.count - 1]["level"] = level;
resettextfield(parentvaluefield, dv[i][keyfield].tostring(), keyfield, textfield, sortstring,level+1);
}
dv.dispose();
}
/// <summary>
/// 回溯生成树的连接线
/// </summary>
/// <param name="parentvaluefield">上级节点关键字段</param>
/// <param name="parentvalue">上级节点值</param>
/// <param name="keyfield">本节点关键字段</param>
/// <param name="nodekey">本节点值</param>
/// <param name="sortstring">排序字符串</param>
/// <returns></returns>
private void gettreeline(string parentvaluefield, string parentvalue, string keyfield, string nodekey, string sortstring)
{
//选择父层节点
dataview dv = new dataview(dt, keyfield + "='" + parentvalue + "'", sortstring, dataviewrowstate.currentrows);
if (dv.count > 0)
{
//选择父节点同级节点
dv.rowfilter = parentvaluefield + "='" + dv[0][parentvaluefield].tostring() + "'";
dv.sort = sortstring;
for (int j = 0; j < dv.count; j++)
{
if (dv[j][keyfield].tostring() == parentvalue)
{
if (j == dv.count - 1)
{
gridline = " " + gridline;
}
else
{
gridline = "┃" + gridline;
}
}
}
gettreeline(parentvaluefield, dv[0][parentvaluefield].tostring(), keyfield, dv[0][keyfield].tostring(), sortstring);
}
dv.dispose();
}
}
html示例代码：
复制代码 代码如下:
<%@ page language="c#" autoeventwireup="true" codefile="gridviewtree.aspx.cs" inherits="gridviewtree" %>
<!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>生成树形显示的gridview</title>
<style type="text/css">
body
{
line-height: 16px;
font-size: 14px;
}
td
{
padding: 0 2px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td valign="top">
<asp:dropdownlist id="dropdownlist1" runat="server">
</asp:dropdownlist>
</td>
<td>
<asp:gridview id="gridview1" runat="server" borderwidth="1px" cellpadding="3" gridlines="vertical"
autogeneratecolumns="false" backcolor="white" bordercolor="#e7e7ff" borderstyle="none">
<alternatingrowstyle backcolor="#f7f7f7" />
<columns>
<asp:boundfield datafield="context" headertext="文本" />
<asp:boundfield datafield="id" headertext="id">
<itemstyle horizontalalign="right" width="80px" />
</asp:boundfield>
<asp:boundfield datafield="parentid" headertext="父id">
<itemstyle horizontalalign="right" width="80px" />
</asp:boundfield>
<asp:boundfield datafield="level" headertext="level">
<itemstyle horizontalalign="right" width="80px" />
</asp:boundfield>
</columns>
<footerstyle backcolor="#b5c7de" forecolor="#4a3c8c" />
<headerstyle backcolor="#4a3c8c" font-bold="true" forecolor="#f7f7f7" />
<pagerstyle backcolor="#e7e7ff" forecolor="#4a3c8c" horizontalalign="right" />
<rowstyle backcolor="#e7e7ff" forecolor="#4a3c8c" />
<selectedrowstyle backcolor="#738a9c" font-bold="true" forecolor="#f7f7f7" />
<sortedascendingcellstyle backcolor="#f4f4fd" />
<sortedascendingheaderstyle backcolor="#5a4c9d" />
<sorteddescendingcellstyle backcolor="#d8d8f0" />
<sorteddescendingheaderstyle backcolor="#3e3277" />
</asp:gridview>
</td>
</tr>
</table>
</form>
</body>
</html>
后台代码：
复制代码 代码如下:
datatable dt = gvhelper.getgridviewtreedata(datatable, "parentid", "1", "id", "context", "context asc");
gridview1.datasource = dt;
gridview1.databind();
dropdownlist1.items.add("");
dropdownlist1.appenddatabounditems = true;
dropdownlist1.datasource = dt;
dropdownlist1.datatextfield = "context";
dropdownlist1.datavaluefield = "id";
dropdownlist1.databind();