GridView中动态交换列和JS控制选择CheckBox行变颜色

来源：互联网发布：焊锡烟雾净化器淘宝编辑：程序博客网时间：2024/04/28 06:01

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