fc2ブログ

記事一覧

ListViewのヘッダーを固定する方法 | asp.net


今回はasp.netのListViewで行と列のヘッダーを固定する方法をご紹介いたします。
ヘッダーとデータ部分にそれぞれDivを設置してそれぞれにoverflowを設定しても列幅の同期がとれずに、構築することが困難です。
そこでヘッダー固定に有名なFixedMidashi.jsを使用します。数行のソースで設定が簡単なところと、最適化される前のjsが含まれていますので、何か不具合があっても対応が可能なところが良いですね。
FixedMidashiをHtmlに適用する基本的な方法はVectorの公式ページに紹介されていますので、ご確認ください。
http://hp.vector.co.jp/authors/VA056612/fixed_midashi/manual/index.html


aspnet_fixedmidashi.png



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



1.JavaScriptを設定する

<script src="/Scripts/fixed_midashi.js"></script>



2.FixdMidashiの初期化メソッドを設定する

<body onload="FixedMidashi.create();">

またはjQueryでも良い
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script>
$(window).on('load', function () {
FixedMidashi.create();
});
</script>


3.ListViewをDivで囲む

<div class="table-area">
    <asp:ListView ID="ListView1" runat="server" ItemPlaceholderID="itemPlaceHolder1">

※注意点として、ListView内には不要なDivを設定しないことが重要です。



4.tableタグに固定したい行列番号を指定する

<LayoutTemplate>
    <table _fixedhead="rows:1; cols:2; div-auto-size: none;">

列ヘッダー(タイトル部分)が2行ある場合は rows:2
行ヘッダー(データの左側)の固定が要らない場合は cols:0 とします。



5.CSSを設定する

ListViewを囲んでいるDivのセレクタにoverflow:autoを設定することと、各列の幅を設定することがポイントです。
.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;
}



6.サンプルコード

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 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>

※入力項目がある場合、FixedMidashi.syncValueで値を同期しないとスクロールした際に元に戻ってしまいます。

※2019/09/13修正
 JSが正しく動作していない様でしたので、jQueryでのスクリプトに変更しています。

css
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;
}





最後までお読みいただきありがとうございます。
いかがでしたでしょうか。他にも asp.net に関連する記事を投稿しておりますのでよろしければご参考くださいませ。


関連記事

コメント

コメントの投稿

※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。

 入力されていないコメントには返信しませんのであらかじめご了承くださいませ。

※ニックネームでも良いので必ずご入力ください。

    

※必ずご入力ください。

    
    

※必ずご入力ください。

※技術的な質問には環境やエラーについて正確かつ詳細にお教えください。

・正確なエラーの内容

・Windowsのバージョン番号

・Visual Studioのバージョン

・機器の型番

・アプリやソフトのバージョン

    

カテゴリ別記事一覧

広告

プロフィール

石河 純


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

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Catalina 10.15 / Mojave 10.14 / High Sierra 10.13 / Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
【データベース】
Oracle 10g/9i
SQLServer 2016/2008R2/2005/2000
SQLAnywhere 16/11/8
【BI/レポートツール】
Cognos ReportNet (IBM)
Microsoft PowerBI
ActiveReport (GrapeCity)
CrystalReport
【OCX関連】
GrapeCity InputMan SPREAD MultiRow GridView
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS jQuery IIS6/7 apache2

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