2

複数の列を持つGridViewがあります。これらの列のうち2つにはチェックボックスが含まれ、残りの列にはTextBoxesまたはDropDownListsが含まれます。

GridViewが配置されるフォームは、マスターページ内に埋め込まれます。

ヘッダー行のチェックボックスを使用して、最後の列のすべてのチェックボックスをヘッダーのチェックボックスの状態に設定します。4列目にあるチェックボックスを設定したくありません。チェックボックスのIDは「chkUpdate」です

例私が見た例では、行ごとに1つのチェックボックスしかなく、CSSクラスを使用して識別しますが、GridView行の両方のチェックボックスは同じCSSクラスを使用し、純粋に別の列を識別するために新しいCSSクラスを作成する必要があるのは間違っているようですチェックボックスの

GridViewの行で各ループを使用できることはわかっていますが、最後の列のチェックボックスを識別する方法を理解できません。

function checkAll(objRef) {
    $("#<%=gv_Vials.ClientID %> tr").each(function() {
    //What goes here? = objRef.checked;
    };
}

私が必要としていることを説明したと思いますが、さらに詳しい説明が必要な場合は、お気軽にお問い合わせください

4

2 に答える 2

1

基本的に、jQueryのendをselector-で使用できますid*="chkSelected"。すべてのチェックボックスを選択します。chkSelected

<asp:GridView runat="server" ID="gv_Vials">
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                <input id="btnCheckAll" type="checkbox" name="AllCheck" />
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox runat="server" ID="chkSelected" Checked='<%# bool.Parse(Eval("IsActive").ToString()) %>'/>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<script>
    var checkBoxSelector = '#<%=gv_Vials.ClientID%> input[id*="chkSelected"]:checkbox';

    $(document).ready(function () {
        $('#btnCheckAll').live('click', function () {
            if ($('#btnCheckAll').is(':checked')) {
                $(checkBoxSelector).attr('checked', true);
            }
            else {
                $(checkBoxSelector).attr('checked', false);
            }
        });
    });
</script>
于 2013-03-25T18:26:02.543 に答える
0

これが私のやり方です。

ASP.net：

            <asp:GridView ID="gvStudents" runat="server" DataSourceID="SqlDataSourceStudents" AutoGenerateColumns="False" Width="100%" OnRowDataBound="gvStudents_RowDataBound">
                <HeaderStyle BackColor="#5D7B9D" ForeColor="White" />
                <AlternatingRowStyle BackColor="#EEEEEE" />
                <RowStyle BackColor="White" />
                <Columns>
**..normal column templates or boundfields go here..**
                    <asp:TemplateField>
                        <HeaderTemplate>
                            <asp:CheckBox id="CheckBoxAll" runat="server" onclick="javascript:SelectAllCheckboxesCol(this);"/>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:CheckBox ID="CheckBoxAdd" runat="server" onclick="javascript:HighlightRow(this);"/>
                        </ItemTemplate>
                        <ItemStyle HorizontalAlign="Center" />
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

jQuery：

        //jQuery to select all checkboxes on the last column (4th column) of gvStudents
        function SelectAllCheckboxesCol(chk) 
        {
            $('#<%=gvStudents.ClientID %> >tbody >tr >td:nth-child(4) > input:checkbox').attr('checked', chk.checked);

            //this works but there must be a better way! jQuery is not my fortae yet :)
            cBox.attr('checked', chk.checked);  //check all the checkboxes
            cBox.click();                       //click them all to fire the Highlightrow() function. This un-ticks the checkboxes!
            cBox.attr('checked', chk.checked);  //re-check them again!
        }

        //jQuery to highlight a row selected
        function HighlightRow(chk) {
            var isChecked = chk.checked;
            var $selectedRow = $("#" + chk.id).parent("td").parent("tr");
            var selectedIndex = $selectedRow[0].rowIndex;
            var sColor = '';

            if(selectedIndex%2 == 0)
                sColor = '#EEEEEE';
            else
                sColor = 'white';

            if(isChecked)
                $selectedRow.css({
                    "background-color" : "Yellow",
                    "color" : "Black"
                });
            else
                $selectedRow.css({
                    "background-color" : sColor,
                    "color" : "Black"
                });
        }
}

上記の機能は次のとおりです。

  • 背後にコードはありません
  • 同時に行を強調表示し、元の代替行の背景を復元します
  • 特定の列と特定のGridviewのチェックボックスのみを選択します

欠点：

  • Gridviewの名前をハードコーディングし、列番号を指定する必要があります
于 2015-09-25T01:20:07.947 に答える