記事一覧

ListViewの明細毎に存在するチェックボックスをJavascriptで全て更新する方法 | asp.net


今回はListViewの明細毎に存在するチェックボックス全てにチェックを付ける方法をご紹介いたします。いわゆる全選択チェックですね。
通常のTableの tr 毎にチェックを付ける方法とは少し異なります。

aspnet_listview_checkall_01.png


前提条件
Windows 7 Professional 以降 / Windows Server 2008 R2 以降
Visual Studio 2008 Professional 以降
VB.NET
.Net Framework 3.5 以降


1.ListViewのチェックボックスのHTML形式

ListViewにてチェックボックスを設定し、表示するとHTMLで出力されたソースではspanタグの中に囲まれています。よって、Javascriptからチェックボックスに設定したクラス名(セレクタ)を指定してチェックをONにしようとしてもエラーとなります。(※spanにchecked/prop/attir等のプロパティは存在しないため。)

aspnet_listview_checkall_02.png


2.全てのチェックをONにする方法

(1)ヘッダーにあるチェックボックスをクリックした際に動作させるためには以下の構文内に記述します。
$('#ヘッダーチェックボックスのID').on('change', function () {
}
(2)JavascriptのFor文で明細をループします。
(3)checkboxはspanタグに囲まれているため、jQueryで取得したspanのchildNodeを取得します。
var rowCnt = $(".明細のチェックボックスに設定しているクラス名").length;
for (var i = 0; i < rowCnt; i++) {
    $(".明細のチェックボックスに設定しているクラス名")[i].childNodes[0].checked = true;
}


3.サンプルコード

aspx
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ListViewTest.aspx.vb" Inherits="ListViewTextChanged.ListViewTest" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>ListViewSample</title>
    <link rel="stylesheet" type="text/css" href="~/Scripts/Style.css" media="all" />
</head>
<body>
<form id="form1" runat="server">
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#chkAll').on('change', function () {
                var rowCnt = $(".checkedAll").length;
                for (var i = 0; i < rowCnt; i++) {
                    $(".checkedAll")[i].childNodes[0].checked = this.checked;
                }
            });
        });
    </script>
    <div class="table-area">
        <asp:ListView ID="ListView1" runat="server" GroupPlaceholderID="groupPlaceHolder1" ItemPlaceholderID="itemPlaceHolder1">
            <EmptyDataTemplate>
                <table>
                    <tr>
                        <th runat="server" class="check-field">
                        </th>
                        <th runat="server" class="id-field">
                            <label>ID</label>
                        </th>
                        <th runat="server" class="name-field">
                            <label>名前</label>
                        </th>
                        <th runat="server" class="age-field">
                            <label>年齢</label>
                        </th>
                        <th runat="server" class="result-field">
                            <label>結果</label>
                        </th>
                    </tr>
                </table>
                <p class="error-text">
                    データが存在しません。
                </p>
            </EmptyDataTemplate>
            <LayoutTemplate>
                <div class="header-area">
                    <table>
                        <tr>
                            <th runat="server" class="check-field">
                                <input id="chkAll" class="checkbox" type="checkbox" />
                            </th>
                            <th runat="server" class="id-field">
                                <label>ID</label>
                            </th>
                            <th runat="server" class="name-field">
                                <label>名前</label>
                            </th>
                            <th runat="server" class="age-field">
                                <label>年齢</label>
                            </th>
                            <th runat="server" class="result-field">
                                <label>結果</label>
                            </th>
                        </tr>
                        <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
                    </table>
                </div>
            </LayoutTemplate>
            <GroupTemplate>
                <div class="data-area">
                    <tr>
                        <asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
                    </tr>
                </div>
            </GroupTemplate>
            <ItemTemplate>
                <tr runat="server">
                    <td runat="server" class="check-field">
                        <asp:Checkbox ID="chkSelect" runat="server" Text="" Checked='<%# Eval("IsChecked")%>' class="checkedAll"></asp:Checkbox>
                    </td>
                    <td runat="server" class="id-field">
                        <asp:Label ID="lblID" runat="server" Text='<%# (Eval("ID")) %>'></asp:Label>
                    </td>
                    <td runat="server" class="name-field">
                        <asp:Label ID="lblName" runat="server" Text='<%# (Eval("NAME")) %>'></asp:Label>
                    </td>
                    <td runat="server" class="age-field">
                        <asp:TextBox ID="txtAge" runat="server" AutoPostBack="True" OnTextChanged="txtAge_TextChanged"></asp:TextBox>
                    </td>
                    <td runat="server" class="result-field">
                        <asp:Label ID="lblResult" runat="server"></asp:Label>
                    </td>
                </tr>
            </ItemTemplate>
        </asp:ListView>
    </div>
</form>
</body>
</html>


FixedMidashiで行列固定を行った場合は、Javascriptが少し変わります。以下を参考にしてください。
http://itblogdsi.blog.fc2.com/blog-entry-132.html


関連記事

コメント

コメントの投稿
非公開コメント

アルバム

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりのIT技術者。趣味は卓球・車・ボウリング

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語・データベース】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
Oracle10g SQLServer2008R2 SQLAnywhere8/11/16
ActiveReport CrystalReport ReportNet(IBM)
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS IIS6/7 apache2

休みの日は卓球をやっています。
現在、卓球用品通販ショップは休業中です。