コメント
コメントの投稿
※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。
入力されていないコメントには返信しませんのであらかじめご了承くださいませ。
ListViewの明細毎に存在するチェックボックスをJavascriptで全て更新する方法 | asp.net
- 2017/03/22
- 00:57
今回はListViewの明細毎に存在するチェックボックス全てにチェックを付ける方法をご紹介いたします。いわゆる全選択チェックですね。
通常のTableの tr 毎にチェックを付ける方法とは少し異なります。
前提条件
・Windows 7 Professional 以降 / Windows Server 2008 R2 以降
・Visual Studio 2008 Professional 以降
・VB.NET
・.Net Framework 3.5 以降
１．ListViewのチェックボックスのHTML形式
ListViewにてチェックボックスを設定し、表示するとHTMLで出力されたソースではspanタグの中に囲まれています。よって、Javascriptからチェックボックスに設定したクラス名（セレクタ）を指定してチェックをONにしようとしてもエラーとなります。（※spanにchecked/prop/attir等のプロパティは存在しないため。）
２．全てのチェックをONにする方法
（１）ヘッダーにあるチェックボックスをクリックした際に動作させるためには以下の構文内に記述します。$('#ヘッダーチェックボックスのID').on('change', function () {
}
（２）JavascriptのFor文で明細をループします。（３）checkboxはspanタグに囲まれているため、jQueryで取得したspanのchildNodeを取得します。
var rowCnt = $(".明細のチェックボックスに設定しているクラス名").length;
for (var i = 0; i < rowCnt; i++) {
$(".明細のチェックボックスに設定しているクラス名")[i].childNodes[0].checked = true;
}
３．サンプルコード
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が少し変わります。以下を参考にしてください。
/blog-entry-132.html
最後までお読みいただきありがとうございます。
いかがでしたでしょうか。他にも asp.net に関連する記事を投稿しておりますのでよろしければご参考くださいませ。
- 関連記事
-
- DIVで囲れたコントロールを横並びに配置しスクロールを表示する方法 | asp.net
- ListViewのヘッダーを固定する方法 | asp.net
- ListViewの明細毎に存在するチェックボックスをJavascriptで全て更新する方法 | asp.net
- データが無い状態でもListViewでヘッダーを表示する方法 | asp.net
- TreeViewにおいて親子関係のチェックを付ける方法 | asp.net
