コメント
コメントの投稿
※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。
入力されていないコメントには返信しませんのであらかじめご了承くださいませ。
<script src="/Scripts/fixed_midashi.js"></script>
<body onload="FixedMidashi.create();">
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script>
$(window).on('load', function () {
FixedMidashi.create();
});
</script>
<div class="table-area">
<asp:ListView ID="ListView1" runat="server" ItemPlaceholderID="itemPlaceHolder1">
<LayoutTemplate>
<table _fixedhead="rows:1; cols:2; div-auto-size: none;">
.table-area {
overflow: auto;
height: 220px;
width : 600px;
}
/*以下、列毎の設定*/
table tr .id-field {
min-width : 50px;
width : 50px;
}
table tr .name-field{
min-width : 150px;
width : 150px;
}
table tr .age-field {
min-width : 50px;
width : 50px;
}
table tr .result-field {
min-width : 200px;
width : 200px;
}
<%@ 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 onload="FixedMidashi.create();">
<form id="form1" runat="server">
<div class="table-area">
<asp:ListView ID="ListView1" runat="server" 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>
<table _fixedhead="rows:1; cols:2; div-auto-size: none;">
<thead>
<tr>
<th runat="server" class="check-field">
<asp:Checkbox id="chkAll" runat="server" CssClass="check_all"/>
</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>
</thead>
<tbody>
<tr runat="server" id="itemPlaceHolder1"></tr>
</tbody>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr runat="server">
<td runat="server" class="check-field">
<asp:Checkbox ID="chkSelect" runat="server" Text="" Checked='<%# Eval("IsChecked")%>' CssClass="checkbox"></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>
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script src="/Scripts/fixed_midashi.js"></script>
<script type="text/javascript">
$(function () {
$(document).on('click', '.check_all', function () {
var $chkAll = $('.check_all input[type=checkbox]'); //input[type=chekbox]がspanで囲まれている為
var rowCnt = $(".checkbox").length;
for (var i = 0; i < rowCnt; i++) {
var childChkBox = $(".checkbox")[i].childNodes[0] //childNodesはinput[type=chekbox]がspanで囲まれている為に必要
var checked = $chkAll.prop('checked');
childChkBox.checked = checked;
FixedMidashi.syncValue(childChkBox);
}
});
});
</script>
</form>
</body>
</html>
body {
}
.error-text {
color: #FF0000;
font: bold;
}
.table-area {
overflow: auto;
height: 220px;
width : 600px;
}
/*テーブル全体の設定*/
table, tr, th, td {
border-collapse: collapse;
}
/*テーブルヘッダーの設定*/
table tr th {
background-color : #b0c4de ;
text-align: center;
}
/*テーブルの罫線の設定*/
table tr th, table tr td {
border: 1px #778899 solid;
margin: 0px;
padding: 10px;
}
/*以下、列毎の設定*/
table tr .id-field {
min-width : 50px;
width : 50px;
}
table tr td.id-field {
text-align: right;
}
table tr .name-field{
min-width : 150px;
width : 150px;
}
table tr .age-field {
min-width : 50px;
width : 50px;
}
table tr td.age-field {
text-align: right;
}
table tr .result-field {
min-width : 200px;
width : 200px;
}
※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。
入力されていないコメントには返信しませんのであらかじめご了承くださいませ。