改变CSS控制在GridView中单独对每行 [英] changing css of controls in gridview separately for each row

问题描述

我在我的GridView的模板列四个Button。
我需要单独更改点击按钮的CSS每排。
例如在一排，第一按钮被点击。那么它必须是黄色。和第3行，第二按钮被点击。那么它必须是黄色等。
这里是我的GridView

 ＆LT; ASP：GridView的OnRowCommand =SelectedPollGridView_RowCommandID =SelectedPollGridView=服务器的AutoGenerateColumns =FALSE的DataKeyNames =PollID的DataSourceID =SelectedPollSqlDataSource＆GT;
    ＆LT;柱体和GT;
        ＆LT; ASP：的TemplateField＆GT;
            ＆LT;＆ItemTemplate中GT;
                ＆LT; ASP：标签可见=假ID =PollIDLabel=服务器文本='＆LT;％＃的eval（PollID）％＆GT;'＆GT;＆LT; / ASP：标签＆gt;                ＆LT; D​​IV =服务器ID =MainDiv级=TEXT-右＆GT;
                    ＆LT; D​​IV =服务器ID =O1Div可见='＆LT;％＃的eval（O1Vis）％＆GT;'类=无线电＆GT;
                        ＆LT; ASP：按钮CommandArgument ='＆LT;％＃（（GridViewRow）集装箱）.RowIndex％GT;'的CommandName =01ID =O1Button=服务器文本=1/＆GT;
                    ＆LT; / DIV＆GT;
                    ＆LT; D​​IV =服务器ID =O2Div可见='＆LT;％＃的eval（O2Vis）％＆GT;'类=无线电＆GT;
                        ＆LT; ASP：按钮CommandArgument ='＆LT;％＃（（GridViewRow）集装箱）.RowIndex％GT;'的CommandName =02ID =O2Button=服务器文本=2/＆GT;
                    ＆LT; / DIV＆GT;
                    ＆LT; D​​IV =服务器ID =O3Div可见='＆LT;％＃的eval（O3Vis）％＆GT;'类=无线电＆GT;
                        ＆LT; ASP：按钮CommandArgument ='＆LT;％＃（（GridViewRow）集装箱）.RowIndex％GT;'的CommandName =O3ID =O3Button=服务器文本=3/＆GT;
                    ＆LT; / DIV＆GT;
                    ＆LT; D​​IV =服务器ID =O4Div可见='＆LT;％＃的eval（O4Vis）％＆GT;'类=无线电＆GT;
                        ＆LT; ASP：按钮CommandArgument ='＆LT;％＃（（GridViewRow）集装箱）.RowIndex％GT;'的CommandName =O4ID =O4Button=服务器文本=4/＆GT;
                    ＆LT; / DIV＆GT;
                ＆LT; / DIV＆GT;            ＆LT; / ItemTemplate中＆GT;
        ＆LT; / ASP：的TemplateField＆GT;
    ＆LT; /专栏＆GT;
＆LT; / ASP：GridView的＆GT;
 

下面的背后是code：

 保护无效SelectedPollGridView_RowCommand（对象发件人，GridViewCommandEventArgs E）
{
    INT指数= Convert.ToInt32（e.CommandArgument）;
    GridViewRow行= SelectedPollGridView.Rows [指数]    标签myPollIDLAbel =（标签）row.FindControl（PollIDLabel）;    如果（e.CommandName ==01）
    {
        // chnaging O1按钮的CSS正是在这种ROW    }
    否则，如果（e.CommandName ==02）
    {
        // chnaging O2按钮的CSS正是在这种ROW
    }
    否则，如果（e.CommandName ==O3）
    {
        // chnaging O3按钮的CSS正是在这种ROW
    }
    否则，如果（e.CommandName ==O4）
    {
        // chnaging O4按钮的CSS正是在这种ROW
    }
}
 

解决方案

我建议就如何做到这一点在JavaScript中，在CSS一个简单的改变一个元素应该是pretty容易读了。但是，如果你需要做的是在服务器上，你应该能够做这样的事：

 如果（e.CommandName ==01）
{
    // chnaging O1按钮的CSS正是在这种ROW
    按钮O1Button =（按钮）row.FindControl（O1Button）;    //改变背景色：
    O1Button.Style.Add（背景色，黄）;    //更改类
    O1Button.CssClass =类名;
}
 

和类似的其他按钮。

i have four button in my templatefield of gridview. i need to change the css of clicked button in every row separately. for example in row one, first button is clicked. then it have to be yellow. and in row 3, second button is clicked. then it have to be yellow and so on. here is my gridview

<asp:GridView OnRowCommand="SelectedPollGridView_RowCommand" ID="SelectedPollGridView" runat="server" AutoGenerateColumns="False" DataKeyNames="PollID" DataSourceID="SelectedPollSqlDataSource">
    <Columns>
        <asp:TemplateField>            
            <ItemTemplate>
                <asp:Label Visible="false" ID="PollIDLabel" runat="server" Text='<%#Eval("PollID") %>'></asp:Label>

                <div runat="server" id="MainDiv" class="text-right">
                    <div runat="server" id="O1Div" visible='<%#Eval("O1Vis") %>' class="radio ">
                        <asp:Button CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="O1" ID="O1Button" runat="server" Text=" 1" />
                    </div>
                    <div runat="server" id="O2Div" visible='<%#Eval("O2Vis") %>' class="radio">
                        <asp:Button CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="O2" ID="O2Button" runat="server" Text=" 2" />
                    </div>
                    <div runat="server" id="O3Div" visible='<%#Eval("O3Vis") %>' class="radio">
                        <asp:Button CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="O3" ID="O3Button" runat="server" Text=" 3" />
                    </div>
                    <div runat="server" id="O4Div" visible='<%#Eval("O4Vis") %>' class="radio">
                        <asp:Button CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="O4" ID="O4Button" runat="server" Text=" 4" />
                    </div>
                </div>

            </ItemTemplate>
        </asp:TemplateField>
    </Columns>    
</asp:GridView>

here is code behind:

protected void SelectedPollGridView_RowCommand(object sender, GridViewCommandEventArgs e)
{        
    int index = Convert.ToInt32(e.CommandArgument); 
    GridViewRow row = SelectedPollGridView.Rows[index];

    Label myPollIDLAbel = (Label)row.FindControl("PollIDLabel");

    if (e.CommandName == "O1")
    {
        //chnaging the css of O1 button JUST IN THIS ROW

    }
    else if (e.CommandName == "O2")
    {
        //chnaging the css of O2 button JUST IN THIS ROW
    }
    else if (e.CommandName == "O3")
    {
        //chnaging the css of O3 button JUST IN THIS ROW
    }
    else if (e.CommandName == "O4")
    {
        //chnaging the css of O4 button JUST IN THIS ROW
    }     
}

解决方案

I would suggest reading up on how to do this in javascript, as a simple change in css for an element should be pretty easy. However, if you need to do it on the server you should be able to do something like this:

if (e.CommandName == "O1")
{
    //chnaging the css of O1 button JUST IN THIS ROW
    Button O1Button = (Button)row.FindControl("O1Button");

    //Change the background-color:
    O1Button.Style.Add("background-color", "yellow");

    //Change the class
    O1Button.CssClass = "class-name";
}

and similarly for the other buttons.

这篇关于改变CSS控制在GridView中单独对每行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！