关于 gridview 行和行直接插入新列的有关问题。第3次发贴~

2012-01-28

关于 gridview 行和行直接插入新列的问题。第3次发贴~~~~~~~~~~~|-----------------------------||编号|姓

关于 gridview 行和行直接插入新列的问题。第3次发贴~~~~~~~~~~~
|-----------------------------|
| 编号| 姓名 | 年龄|性别|详细 |
| 1 | 小白 | 23 | 男 | + |
| 2 | 小蓝 | 34 | 女 | + |
| | | | | |
| | | | | |
| | | | | |
|-----------------------------|
| 1 2 3 |
|-----------------------------|
我现在需要的效果是: 1 上边列头可以，实现排序；
2 点每行的+号，可以在实现在入图，编号为1 2 的行之间展开一个编辑区域或一个显示区域，点在于，这个区域要和展开的两行宽度要对齐,而且展开的部分，看上去就是在 1 2 之间在添加了一列;
3 点下边的 1 2 3 可以实现分页

很直观的感觉就是在正常的gridview 的每行下边+上一个可以展开/收缩的区域，但是这个+起来貌似很麻烦，我被这个问题捆饶，郁闷啊ing~~~~~~~~~~~,谁有现成的办法，可以帮下啊。

[解决办法]
<asp:TemplateColumn ItemStyle-BorderColor= "#CFE2F8 ">
<ItemTemplate >

<img alt= "权限信息 " id= 'ICON <%# DataBinder.Eval(Container.DataItem, "c_user_id ")%> ' name= "icon "
src= ' <%#GetImgSrc(DataBinder.Eval(Container.DataItem, "ac ").ToString())%> '
onclick= "showDetail( ' <%# DataBinder.Eval(Container.DataItem, "详细 ")%> ',this); " />
<div id= 'Panel <%# DataBinder.Eval(Container.DataItem, "bc ")%> ' style= "display: none ">
<asp:Panel ID= "pnlDetail " runat= "server " EnableViewState= "False " />
</div>

</ItemTemplate>
[解决办法]
//不完整，也没测试，自己再整理一下吧
//i为所在行行号，conn为数据库连接
DataSet ds = new DataSet();
OleDbDataAdapter da = new OleDbDataAdapter( "select .... ", conn);
conn.Open();
da.File(ds);
GridView1.DataSource = ds.Table[0];
DataRow row = ds.Table[0].NewRow();
ds.Table[0].Rows.InsertAt(row, i);
GridView1.DataBind();
[解决办法]
建议用DataList做，+的实现就通过JavaScript就行了，很简单的问题。

宽度好设置，控件和详细信息显示都在表格中，宽度设置100% 就好。

大部分都是用 DataList来做比较方便，GridView没做过，当时我觉得GridView 不好控制，想都没多想就换DataList了，关于分页你可以用PagedDataSource控件分页
在DataList绑定完数据的结尾部分（还在DataList中），加一个Div(假设 id= "d ")，其中放显示详细信息的表格，div的默认display为none,当点击+ 后设置为block,判断：
function click()
{
var d = document.getElementById( "d ");
if(d.displayed== "none ")
{
d.displayed= "block ";
}
else
{
d.displayed= "none ";
}
}

给“+”一个客户端动作onclick= "click() "

你可以直接在div中就绑定了详细信息，也可以给“+“属性“runat= "server "” 和 onserverclick= "bt_Click "在后台写详细信息的提取代码。

不过这方法也觉得比较复杂，有点冗余。

========================================================

GridView的话，你还是先学会在Gridview中每显示一条数据就插入一个空行的显示方法吧。。。。。。

[解决办法]
简单实现了一个，看看是不是预期的效果

<%@ Page Language= "C# " %>
<%@ Import Namespace= "System.Data " %>

<%-- http://community.csdn.net/Expert/TopicView3.asp?id=5620637 --%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<script runat= "server ">

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack) {
LoadProductData();
}
}

void LoadProductData()
{
DataTable dt = CreateSampleProductData();

GridView1.DataSource = dt;
GridView1.DataBind();
}

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow) {
// 插入行
GridViewRow insertedRow = new GridViewRow(-1, -1, DataControlRowType.DataRow, DataControlRowState.Normal);
//
TableCell cell = new TableCell();
insertedRow.Cells.Add(cell);
// 基本属性
cell.ColumnSpan = GridView1.Columns.Count; // 横跨所有列
cell.Text = "  ";
cell.Width = new Unit(10, UnitType.Pixel);
// 添加自定义内容
Image img = new Image();
img.ImageUrl = "http://community.csdn.net/images/csdn.gif ";
cell.Controls.Add(img);
TextBox txt = new TextBox();
txt.Text = ((DataRowView)e.Row.DataItem)[ "ProductName "].ToString();
cell.Controls.Add(txt);
// ...
// ...
// 默认隐藏此行
insertedRow.Attributes[ "style "] = "display:none ";
//
GridView1.Controls[0].Controls.Add(insertedRow);
}
}

#region sample data

static DataTable CreateSampleProductData()
{
DataTable tbl = new DataTable( "Products ");

tbl.Columns.Add( "ProductID ", typeof(int));
tbl.Columns.Add( "ProductName ", typeof(string));
tbl.Columns.Add( "UnitPrice ", typeof(decimal));
tbl.Columns.Add( "CategoryID ", typeof(int));

tbl.Rows.Add(1, "Chai ", 18, 1);
tbl.Rows.Add(2, "Chang ", 19, 1);
tbl.Rows.Add(3, "Aniseed Syrup ", 10, 2);
tbl.Rows.Add(4, "Chef Anton 's Cajun Seasoning ", 22, 2);
tbl.Rows.Add(5, "Chef Anton 's Gumbo Mix ", 21.35, 2);

tbl.Rows.Add(47, "Zaanse koeken ", 9.5, 3);
tbl.Rows.Add(48, "Chocolade ", 12.75, 3);
tbl.Rows.Add(49, "Maxilaku ", 20, 3);

return tbl;
}

#endregion

</script>

<html xmlns= "http://www.w3.org/1999/xhtml " >
<head runat= "server ">
<title> ASP.NET DEMO 10: 如何通过 javascript 访问 GridView/DataGrid 选中 CheckBox 行各列的值 </title>
<script type = "text/javascript ">
function toggleDetailsZone(sender)
{
//debugger;
var currRow = sender.parentNode.parentNode;
var nextRow = currRow.nextSibling;
if(nextRow.style.display == "none ") {
nextRow.style.display = " ";
sender.innerHTML = "- ";
sender.title = "折叠 ";
} else {
nextRow.style.display = "none ";
sender.innerHTML = "+ ";
sender.title = "展开 ";
}
}
</script>
</head>
<body>
<form id= "form1 " runat= "server ">
<div>
<input type= "button " id= "Button1 " value= "Rebind " onclick= "location.href=location.href; " />
<asp:GridView ID= "GridView1 " runat= "server " AutoGenerateColumns= "false " OnRowDataBound= "GridView1_RowDataBound ">
<Columns>
<asp:BoundField DataField= "ProductID " HeaderText= "ProductID " />
<asp:TemplateField HeaderText= "ProductName " >
<ItemTemplate> <%# Eval( "ProductName ") %> </ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField= "UnitPrice " HeaderText= "UnitPrice " />
<asp:TemplateField>
<ItemTemplate> <span title= "展开 " style= "cursor:pointer; font-weight:bold " onclick= "toggleDetailsZone(this) "> + </span> </ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView> </div>
</form>
</body>
</html>

热点排行

asp.net

关于 gridview 行和行直接插入新列的有关问题。第3次发贴~