|-----------------------------|
| 编号| 姓名 | 年龄|性别|详细 |
| 1 | 小白 | 23 | 男 | + |
| 2 | 小蓝 | 34 | 女 | + |
| | | | | |
| | | | | |
| | | | | |
|-----------------------------|
| 1 2 3 |
|-----------------------------|
我现在需要的效果是: 1 上边列头可以,实现排序;
2 点每行的+号,可以在实现在入图,编号为1 2 的行之间展开一个编辑区域或一个显示区域,点在于,这个区域要和展开的两行宽度要对齐,而且展开的部分,看上去就是在 1 2 之间在添加了一列;
3 点下边的 1 2 3 可以实现 分页 很直观的感觉就是在 正常的gridview 的每行下边+上一个可以 展开/收缩的区域,但是这个+起来貌似很麻烦,我被这个问题捆饶,郁闷啊ing~~~~~~~~~~~,谁有现成的办法,可以帮下啊。
| 编号| 姓名 | 年龄|性别|详细 |
| 1 | 小白 | 23 | 男 | + |
| 2 | 小蓝 | 34 | 女 | + |
| | | | | |
| | | | | |
| | | | | |
|-----------------------------|
| 1 2 3 |
|-----------------------------|
我现在需要的效果是: 1 上边列头可以,实现排序;
2 点每行的+号,可以在实现在入图,编号为1 2 的行之间展开一个编辑区域或一个显示区域,点在于,这个区域要和展开的两行宽度要对齐,而且展开的部分,看上去就是在 1 2 之间在添加了一列;
3 点下边的 1 2 3 可以实现 分页 很直观的感觉就是在 正常的gridview 的每行下边+上一个可以 展开/收缩的区域,但是这个+起来貌似很麻烦,我被这个问题捆饶,郁闷啊ing~~~~~~~~~~~,谁有现成的办法,可以帮下啊。
主 题: 关于 gridview 行和行直接插入新“行”的问题。第3次发贴~~~~~~~~~~~
是这样的效果吗?
这个效果,我也可以做出来,感觉,这个就是在单列里绑定的,
我希望的到,如何在 行和行之间查入新行的办法。呵呵,在次谢谢大家的回帖。
如果是编辑新行,可以在属性中设置允许编辑;
如果是添加新行,数据源可以用DataAdapter中的DataTable,实现方法是在向DataTable取出数据后再向DataTable中添加一行,再绑定,再编辑该行。
不知这种方法能否满足楼方的要求。
<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();
宽度好设置,控件和详细信息显示都在表格中,宽度设置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>