62,271
社区成员
发帖
与我相关
我的任务
分享一个关于 gridview javascript 的问题
我的主要问题是实现gridview鼠标点击行高亮 （但是在分页中报js错误，想问一下这是为什么呀？）
后台：
protected void Button1_Click(object sender, EventArgs e) //绑定内容到gridview
{
dt = abbill.SelectAll();
GridView1.DataSource = dt;
GridView1.DataBind();
}
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e) //分页代码
{
GridView1.PageIndex = e.NewPageIndex;
GridView1.DataSource = dt;
GridView1.DataBind();//绑定客户表
GridView1.Columns[0].Visible = false;//隐藏id列
GridView1.Columns[0].Visible = false;//隐藏状态列
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) //调用js
{
int i;
for (i = 0; i <= GridView1.Rows.Count; i++)
{
//首先判断是否是数据行
if (e.Row.RowType == DataControlRowType.DataRow)
{
//this.GridView1.DataKeys[e.Row.RowIndex][0].ToString()
string js = string.Format("ItemClick(this,{0})", e.Row.Cells[0].Text);
e.Row.Attributes.Add("onclick", js);
}
}
}
前台js //实现高亮某行
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="ZhxxWeb.test" %>
<!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>测试页面</title>
<script language="javascript" type="text/javascript">
if (!objbeforeItem) {
var objbeforeItem = null;
var objbeforeItembackgroundColor = null;
}
function ItemClick(obj, rowsid) {
if (objbeforeItem) {
objbeforeItem.style.backgroundColor = objbeforeItembackgroundColor;
}
objbeforeItembackgroundColor = obj.style.backgroundColor;
objbeforeItem = obj;
obj.style.backgroundColor = "#FFFF00";
document.getElementById("idvalue").value = rowsid; //把值传递给中间件
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" Width="452px" />
<br />
姓名<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
部门<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
电话1<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><br />
电话2<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox><br />
备注<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox><br />
管辖范围<asp:TextBox ID="TextBox6" runat="server"></asp:TextBox><br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="Button" />
<br />
<asp:GridView ID="GridView1" runat="server" Height="260px" Width="518px" OnRowDataBound="GridView1_RowDataBound"
BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2"
ForeColor="Black" GridLines="None" AutoGenerateColumns="False"
DataKeyNames="id" AllowPaging="True" ondatabound="GridView1_DataBound"
onpageindexchanging="GridView1_PageIndexChanging" PageSize="4">
<FooterStyle BackColor="Tan" />
<Columns>
<asp:BoundField DataField="id" HeaderText="id" />
<asp:BoundField DataField="姓名" HeaderText="姓名" />
</Columns>
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<AlternatingRowStyle BackColor="PaleGoldenrod" />
</asp:GridView>
<input id="idvalue" runat="server" type="hidden" value="-1" /> <!-- 保存js变量的专用中间件-->
</form>
</body>
</html>
-------------------------------------------------------
分页这里重新执行了一次gridview.databind 就会发生js无效。ie报网页上有错误
如果是连按两次button按钮实现绑定也会报有错误， js失效
但是第一次加载页面第一次绑定gridview，是没有问题的。
后台：
protected void Button1_Click(object sender, EventArgs e) //绑定内容到gridview
{
dt = abbill.SelectAll();
GridView1.DataSource = dt;
GridView1.DataBind();
}
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e) //分页代码
{
GridView1.PageIndex = e.NewPageIndex;
GridView1.DataSource = dt;
GridView1.DataBind();//绑定客户表
GridView1.Columns[0].Visible = false;//隐藏id列
GridView1.Columns[0].Visible = false;//隐藏状态列
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) //调用js
{
int i;
for (i = 0; i <= GridView1.Rows.Count; i++)
{
//首先判断是否是数据行
if (e.Row.RowType == DataControlRowType.DataRow)
{
//this.GridView1.DataKeys[e.Row.RowIndex][0].ToString()
string js = string.Format("ItemClick(this,{0})", e.Row.Cells[0].Text);
e.Row.Attributes.Add("onclick", js);
}
}
}
前台js //实现高亮某行
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="ZhxxWeb.test" %>
<!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>测试页面</title>
<script language="javascript" type="text/javascript">
if (!objbeforeItem) {
var objbeforeItem = null;
var objbeforeItembackgroundColor = null;
}
function ItemClick(obj, rowsid) {
if (objbeforeItem) {
objbeforeItem.style.backgroundColor = objbeforeItembackgroundColor;
}
objbeforeItembackgroundColor = obj.style.backgroundColor;
objbeforeItem = obj;
obj.style.backgroundColor = "#FFFF00";
document.getElementById("idvalue").value = rowsid; //把值传递给中间件
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" Width="452px" />
<br />
姓名<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
部门<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
电话1<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><br />
电话2<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox><br />
备注<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox><br />
管辖范围<asp:TextBox ID="TextBox6" runat="server"></asp:TextBox><br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="Button" />
<br />
<asp:GridView ID="GridView1" runat="server" Height="260px" Width="518px" OnRowDataBound="GridView1_RowDataBound"
BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2"
ForeColor="Black" GridLines="None" AutoGenerateColumns="False"
DataKeyNames="id" AllowPaging="True" ondatabound="GridView1_DataBound"
onpageindexchanging="GridView1_PageIndexChanging" PageSize="4">
<FooterStyle BackColor="Tan" />
<Columns>
<asp:BoundField DataField="id" HeaderText="id" />
<asp:BoundField DataField="姓名" HeaderText="姓名" />
</Columns>
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<AlternatingRowStyle BackColor="PaleGoldenrod" />
</asp:GridView>
<input id="idvalue" runat="server" type="hidden" value="-1" /> <!-- 保存js变量的专用中间件-->
</form>
</body>
</html>
-------------------------------------------------------
分页这里重新执行了一次gridview.databind 就会发生js无效。ie报网页上有错误
如果是连按两次button按钮实现绑定也会报有错误， js失效
但是第一次加载页面第一次绑定gridview，是没有问题的。
...全文
请发表友善的回复…
发表回复
孟子E章 2010-11-09
- 打赏
- 举报
不要使用GridView1.Columns[0].Visible = false。这样的话，客户端是不会呈现的
孟子E章 2010-11-09
- 打赏
- 举报
wuhan_dotnet 2010-11-09
- 打赏
- 举报
还有个问题。你为什么还要在GridView1_RowDataBound事件里加一个循环?
pigg18 2010-11-09
- 打赏
- 举报
经过高人指点，找到问题答案了。。。
分页的时候js参数取不到第二个值
因为 GridView1.Columns[0].Visible = false;//隐藏id列
GridView1.Columns[0].Visible = false;//隐藏状态列
取得时候是用 cell[0].text
分页的时候就无效了，一定要改成这样
this.GridView1.DataKeys[e.Row.RowIndex][0].ToString()
才能取回来，赋值给js就不会丢失。已经测试过了。。。。
一定要改成
分页的时候js参数取不到第二个值
因为 GridView1.Columns[0].Visible = false;//隐藏id列
GridView1.Columns[0].Visible = false;//隐藏状态列
取得时候是用 cell[0].text
分页的时候就无效了，一定要改成这样
this.GridView1.DataKeys[e.Row.RowIndex][0].ToString()
才能取回来，赋值给js就不会丢失。已经测试过了。。。。
一定要改成
