最近看了下,在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];
- }
- }
- }