GridView中动态交换列和JS控制选择CheckBox行变颜色
2008-12-06 23:56
525 查看
最近看了下，在GridView中动态交换列，结合自己找到点资料，感觉这方法不错，另外简单写了个JS控制的，使用CheckBox（html）来控制选中GridView的行，就改变颜色，方法可能不是很好，只是记录下这个思路。
下面是cs代码:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ViewState["SortOrder"] = "APP_ID";
ViewState["SortDire"] = "ASC";
BindData();
}
}
protected void BindData()
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["DS_DEMOConnectionString"].ToString());
SqlCommand com = new SqlCommand("SP_APP_Select", con);
com.CommandType = CommandType.StoredProcedure;
SqlDataAdapter dataAdpa = new SqlDataAdapter(com);
DataSet ds = new DataSet();
dataAdpa.Fill(ds, "Test");
gvTest.DataSource = ds;
gvTest.DataBind();
ViewState["ds"] = ds;
}
protected void btnChange_Click(object sender, EventArgs e)
{
try
{
DataSet ds = ViewState["ds"] as DataSet;
int index = int.Parse(txtIndex.Text.Trim()) - 1;
if (index < gvTest.Columns.Count)
{
DataControlField dcf = gvTest.Columns[index];
gvTest.Columns.RemoveAt(index);
gvTest.Columns.Insert(0, dcf);
gvTest.DataSource = ds;
gvTest.DataBind();
ViewState["ds"] = ds;
}
else
{
}
}
catch
{ }
finally
{ }
}
下面是页面代码：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script language="javascript" type="text/javascript">
function checkme()
{
var cbkLength = document.getElementsByName("cbkname").length;
var colors = Array(cbkLength);
for(var i = 0;i < cbkLength; ++ i)
{
if(document.getElementsByName("cbkname")[i].checked)
{
//colors[i] = document.getElementById("gvTest").rows[i+1].style.backgroundColor;
document.getElementById("gvTest").rows[i+1].style.backgroundColor='blue';
}
else
{
document.getElementById("gvTest").rows[i+1].style.backgroundColor='';//colors[i];
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvTest" runat="server" AutoGenerateColumns="False" Width="100%" AllowSorting="True" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" OnSorting="gvTest_Sorting">
<Columns>
<asp:TemplateField HeaderText="选择">
<ItemTemplate>
<input id="cbk" type="checkbox" onclick="checkme(this,1);" name="cbkname"/>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="APP_ID" HeaderText="ID" SortExpression="APP_ID" />
<asp:BoundField DataField="APP_NAME" HeaderText="NAME" SortExpression="APP_NAME" />
<asp:BoundField DataField="APP_MEMO" HeaderText="MEMO" SortExpression="APP_MEMO" />
</Columns>
<FooterStyle BackColor="White" ForeColor="#000066" />
<RowStyle ForeColor="#000066" />
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
<HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
</asp:GridView>
<asp:Label ID="lbMsg" runat="server" Text="输入序号："></asp:Label>
<asp:TextBox ID="txtIndex" runat="server" Width="90px"></asp:TextBox>
<asp:Button ID="btnChange" runat="server" OnClick="btnChange_Click" Text="将此行提前" /></div>
</form>
</body>
</html>
1、交换列：
主要在这几句代码，思路就是先删除，再添加：
DataControlField dcf = gvTest.Columns[index];
gvTest.Columns.RemoveAt(index);
gvTest.Columns.Insert(0, dcf);
2、JS控制的选中CheckBox就改变行的颜色，主要就是调用一个JS函数来实现的，主要知道了怎么使用JS来遍历GridView就OK了，思路很简单。
function checkme()
{
var cbkLength = document.getElementsByName("cbkname").length;
var colors = Array(cbkLength);
for(var i = 0;i < cbkLength; ++ i)
{
if(document.getElementsByName("cbkname")[i].checked)
{
//colors[i] = document.getElementById("gvTest").rows[i+1].style.backgroundColor;
document.getElementById("gvTest").rows[i+1].style.backgroundColor='blue';
}
else
{
document.getElementById("gvTest").rows[i+1].style.backgroundColor='';//colors[i];
}
}
}
下面是cs代码:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ViewState["SortOrder"] = "APP_ID";
ViewState["SortDire"] = "ASC";
BindData();
}
}
protected void BindData()
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["DS_DEMOConnectionString"].ToString());
SqlCommand com = new SqlCommand("SP_APP_Select", con);
com.CommandType = CommandType.StoredProcedure;
SqlDataAdapter dataAdpa = new SqlDataAdapter(com);
DataSet ds = new DataSet();
dataAdpa.Fill(ds, "Test");
gvTest.DataSource = ds;
gvTest.DataBind();
ViewState["ds"] = ds;
}
protected void btnChange_Click(object sender, EventArgs e)
{
try
{
DataSet ds = ViewState["ds"] as DataSet;
int index = int.Parse(txtIndex.Text.Trim()) - 1;
if (index < gvTest.Columns.Count)
{
DataControlField dcf = gvTest.Columns[index];
gvTest.Columns.RemoveAt(index);
gvTest.Columns.Insert(0, dcf);
gvTest.DataSource = ds;
gvTest.DataBind();
ViewState["ds"] = ds;
}
else
{
}
}
catch
{ }
finally
{ }
}
下面是页面代码：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script language="javascript" type="text/javascript">
function checkme()
{
var cbkLength = document.getElementsByName("cbkname").length;
var colors = Array(cbkLength);
for(var i = 0;i < cbkLength; ++ i)
{
if(document.getElementsByName("cbkname")[i].checked)
{
//colors[i] = document.getElementById("gvTest").rows[i+1].style.backgroundColor;
document.getElementById("gvTest").rows[i+1].style.backgroundColor='blue';
}
else
{
document.getElementById("gvTest").rows[i+1].style.backgroundColor='';//colors[i];
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvTest" runat="server" AutoGenerateColumns="False" Width="100%" AllowSorting="True" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" OnSorting="gvTest_Sorting">
<Columns>
<asp:TemplateField HeaderText="选择">
<ItemTemplate>
<input id="cbk" type="checkbox" onclick="checkme(this,1);" name="cbkname"/>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="APP_ID" HeaderText="ID" SortExpression="APP_ID" />
<asp:BoundField DataField="APP_NAME" HeaderText="NAME" SortExpression="APP_NAME" />
<asp:BoundField DataField="APP_MEMO" HeaderText="MEMO" SortExpression="APP_MEMO" />
</Columns>
<FooterStyle BackColor="White" ForeColor="#000066" />
<RowStyle ForeColor="#000066" />
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
<HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
</asp:GridView>
<asp:Label ID="lbMsg" runat="server" Text="输入序号："></asp:Label>
<asp:TextBox ID="txtIndex" runat="server" Width="90px"></asp:TextBox>
<asp:Button ID="btnChange" runat="server" OnClick="btnChange_Click" Text="将此行提前" /></div>
</form>
</body>
</html>
1、交换列：
主要在这几句代码，思路就是先删除，再添加：
DataControlField dcf = gvTest.Columns[index];
gvTest.Columns.RemoveAt(index);
gvTest.Columns.Insert(0, dcf);
2、JS控制的选中CheckBox就改变行的颜色，主要就是调用一个JS函数来实现的，主要知道了怎么使用JS来遍历GridView就OK了，思路很简单。
function checkme()
{
var cbkLength = document.getElementsByName("cbkname").length;
var colors = Array(cbkLength);
for(var i = 0;i < cbkLength; ++ i)
{
if(document.getElementsByName("cbkname")[i].checked)
{
//colors[i] = document.getElementById("gvTest").rows[i+1].style.backgroundColor;
document.getElementById("gvTest").rows[i+1].style.backgroundColor='blue';
}
else
{
document.getElementById("gvTest").rows[i+1].style.backgroundColor='';//colors[i];
}
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用js控制.net的checkbox控件的颜色
- JS控制通过Select选择Gridview
- js控制gridview 中的checkbox 全选
- js控制Gridview中的checkbox全选
- JS 控制checkbox 获取 全选 全不选 一行不选择全选则不被选择 全部选择全选被选择
- JS控制通过Select选择Gridview
- js控制Gridview中的checkbox全选(转)
- jquery控制动态生成的gridview中多列checkbox的全选反选及自动判断是否全选状态
- JS 动态控制checkbox嵌套checkbox text不用与否
- js控制Gridview中的checkbox全选(转)
- Gridview使用CheckBox全选与单选采用js实现同时高亮显示选择行
- html中url传递多个参数，使用js动态控制选择个数
- JS 控制checkbox 获取 全选 全不选 一行不选择全选则不被选择 所有选择全选被选择
- jquery控制动态生成的gridview中多列checkbox的全选反选及自动判断是否全选状态
- ASP.NET DEMO18 验证GridView中由DropDownList控制CheckBoxList的选择项个数
- js控制Gridview中的checkbox全选
- GridView固定表头 - 动态创建模板列 、构造模板选择列触发js方法
- 鼠标选择动态改变网页背景颜色的JS代码
- GridView中CheckBox选择数目的js验证
- 使用JS控制treeview上面checkbox的选择