Question

我想在选中复选框时设置嵌套gridview行的颜色，而在未使用jquery选择时设置另一种颜色。

这是我的HTML：

<div id="Div1" align="left" style="float: left; width: 80%; height: 701px;">

         <cc1:CoolGridView ID="ParentGridView" runat="server" AllowSorting="True" OnSorting="GridView1_Sorting" 
        AutoGenerateColumns="False" OnRowDataBound="gv_RowDataBound"
        BackColor="White" BorderColor="White" BorderStyle="Ridge" BorderWidth="2px" 
        Height="550px" Width="525px" 
            HorizontalAlign="Left" DefaultColumnWidth="140px">
         <HeaderStyle BackColor="#4A3C8C" ForeColor="#E7E7FF"></HeaderStyle>

        <Columns>
            <asp:TemplateField HeaderText="District" SortExpression="district" HeaderStyle-Width="200px">
                <ItemTemplate>
                <a href="javascript:DivExpandCollapse('div<%# Eval("district")%>');">
                <img id="imgdiv<%# Eval("district")%>" width="10px" border="0" src="Images/plus.png" /> </a> 
                <asp:CheckBox ID="District" Text='<%#Bind("district")%>' runat="server" />
                </ItemTemplate>
                <HeaderStyle Width="200px"></HeaderStyle>
                <ItemStyle HorizontalAlign="Center" Width="200px"></ItemStyle>
            </asp:TemplateField> 

            <asp:TemplateField HeaderText="Server" HeaderStyle-Width="280px">
            <ItemTemplate>
            <asp:DropDownList DataTextField="Server" DataValueField="Server" ID="DropDownList2" Runat="server" >
               <asp:ListItem>A1</asp:ListItem>
               <asp:ListItem>A2</asp:ListItem>
               <asp:ListItem>Both</asp:ListItem>
            </asp:DropDownList>

            <tr><td colspan="100%">  
            <div id="div<%# Eval("district") %>" style="display:none; position: relative; left: 15px; overflow: auto">
                <asp:GridView ID="StationGridView" runat="server" AutoGenerateColumns="False"  OnSorting="GridView1_Sorting" 
                 BorderStyle="Ridge" BorderWidth="2px"  HorizontalAlign="Center"
                 GridLines="Both" ShowHeader="True" ShowFooter="False" >
                <HeaderStyle BackColor="#4A3C8C" ForeColor="#E7E7FF"></HeaderStyle>
                    <Columns>
                        <asp:TemplateField HeaderText="Station"  SortExpression="number">
                        <ItemTemplate>
                            <asp:CheckBox ID="Station" Text='<%#Bind("number")%>' runat="server"/>
                        </ItemTemplate>
                            <ItemStyle HorizontalAlign="Center" Width="130px"></ItemStyle>
                        </asp:TemplateField>

                        <asp:TemplateField HeaderText="Server" >
                        <ItemTemplate>
                            <asp:DropDownList DataTextField="Server" DataValueField="Server" ID="DropDownList2" Runat="server" >
                                <asp:ListItem>A1</asp:ListItem>
                                <asp:ListItem>A2</asp:ListItem>
                                <asp:ListItem>Both</asp:ListItem>
                            </asp:DropDownList>
                        </ItemTemplate>
                            <ItemStyle HorizontalAlign="Center" Width="130px"></ItemStyle>
                        </asp:TemplateField>

                        <asp:BoundField DataField="TimeZone" HeaderText="Time Zone" SortExpression="timeZone">
                            <ItemStyle HorizontalAlign="Center" Width="130px" />
                        </asp:BoundField>

                        <asp:BoundField DataField="ServerType" HeaderText="Server Type" SortExpression="serverType">
                            <ItemStyle HorizontalAlign="Center" Width="135px" />
                        </asp:BoundField>               
                    </Columns>
                    <RowStyle BackColor="#DEDFDE" ForeColor="Black" />
                 </asp:GridView>                   
            </div> 
            </td></tr> 
            </ItemTemplate>
            <HeaderStyle Width="305px"></HeaderStyle>
            <ItemStyle HorizontalAlign="Center" Width="280px"/>
            </asp:TemplateField>                                    
        </Columns>
    <BoundaryStyle BorderColor="Gray" BorderWidth="1px" BorderStyle="Solid"></BoundaryStyle>
    <RowStyle BackColor="#DEDFDE" ForeColor="Black" />
         </cc1:CoolGridView>
    </div>

    <div style="float: right; width: 28%; height: 403px; margin-left: 0px;" id="RightColumn" align="center"> 
        <p style="height: 20px; width: 276px; margin-left: 5px;"> </p>

        <asp:Button ID="BtnCreateXMLFile" runat="server" Height="51px" 
            style="margin-bottom: 0px; text-align: center; margin-left: 10px;" 
            Text="Create XML File" Width="185px" onclick="BtnCreateXMLFile_Click"/> 

        <p style="height: 20px; width: 277px; margin-left: 5px;"> </p>

        <asp:Button ID="BtnClearSelections" runat="server" Height="35px"
            style="margin-bottom: 0px; text-align: center; margin-left: 10px"
            Text="Clear Selections" Width="150px" 
            onclick="BtnClearSelections_Click"/>   
    </div>

目前，我的函数将使用复选框而不是整行来更改嵌套单元格（Station）的颜色。

这是功能：

$("[id*=Station]").live("click", function () 
{
   var chkHeader = $(this);

   if (chkHeader.is(":checked"))   
   {             
      $(chkHeader, "div").parent().attr('style','background-color:lime');          
   }
   else 
   {
      $(chkHeader, "div").parent().attr('style','background-color:#DEDFDE');           
   }
 });

任何帮助都将不胜感激。

格洛丽亚

Answer 1

试试这个

+ ASP：

<asp:GridView ID="myGrid" runat="server" AutoGenerateColumns="False">
<Columns>
  <asp:TemplateField>
    <HeaderTemplate>
      <asp:CheckBox ID="checkAll" runat="server" onclick="checkAll(this);" />
    </HeaderTemplate>
    <ItemTemplate>
      <asp:CheckBox ID="checkOne" runat="server" onclick="Check_Click(this)" Checked='<%# Bind("allowed") %>'/>
    </ItemTemplate>
  </asp:TemplateField>
</Columns>
</asp:GridView>

+ javascript函数：

function Check_Click(objRef) {
    //Get the Row based on checkbox
    var row = objRef.parentNode.parentNode;
    if (objRef.checked) {
        //If checked change color
        row.style.backgroundColor = "#E0E0E0";
    }
    else {
        //Change backcolor to original color
        row.style.backgroundColor = "#FFFFFF";
    }

    //Get the reference of GridView
    var GridView = row.parentNode;

    //Get all input elements in Gridview
    var inputList = GridView.getElementsByTagName("input");

    for (var i = 0; i < inputList.length; i++) {
        //The First element is the Header Checkbox
        var headerCheckBox = inputList[0];

        //Based on all or none checkboxes
        //are checked check/uncheck Header Checkbox
        var checked = true;
        if (inputList[i].type == "checkbox" && inputList[i] != headerCheckBox) {
            if (!inputList[i].checked) {
                checked = false;
                break;
            }
        }
    }
    headerCheckBox.checked = checked;
}


function checkAll(objRef) {
    var GridView = objRef.parentNode.parentNode.parentNode;
    var inputList = GridView.getElementsByTagName("input");
    for (var i = 0; i < inputList.length; i++) {
        //Get the Cell To find out ColumnIndex
        var row = inputList[i].parentNode.parentNode;
        if (inputList[i].type == "checkbox" && objRef != inputList[i]) {
            if (objRef.checked) {
                //If the header checkbox is checked
                //check all checkboxes
                //and highlight all rows
                row.style.backgroundColor = "#E0E0E0";
                inputList[i].checked = true;
            }
            else {
                //If the header checkbox is checked
                //uncheck all checkboxes
                //and change rowcolor back to original
                row.style.backgroundColor = "#FFFFFF";
                inputList[i].checked = false;
            }
        }
    }
}

不太接近您的要求，但它可以完成工作

使用jquery更改嵌套gridview行的行颜色

1 个答案: