今回は w2ui.grid のカラム名のグループ化を指示するプロパティである columnGroups ついて説明をします。
この columnGroups を宣言することでカラム名タイトルの上に1行追加してグループ化したタイトルが表示出来たり、タイトル2行を1行にして表示できます。
columnGroups プロパティのオブジェクトの構造は以下の通りです。
columnGroups = {
span : 1, // カラム結合数
caption : '', // グループの caption
master : false // true :カラムで宣言された caption を優先
// false:columnGroups の caption を優先(デフォルト)
}
以下に紹介したページのHTMLに columnGroups プロパティを追加します。
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理方法の紹介
<!DOCTYPE html>
<html>
<head>
<title>w2ui Grid-6 columnGroups</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="./dist/w2ui-1.5.rc1.css" />
<script type="text/javascript" src="./libs/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="./dist/w2ui-1.5.rc1.js"></script>
</head>
<body>
<div id="grid" style="width: 500px; height: 200px;"></div>
<script>
$(function () {
// id="grid" へのグリッド設定
$('#grid').w2grid({
name: 'grid',
columnGroups: [
{ span: 1, caption: '' , master: true },
{ span: 2, caption: 'Name' },
{ span: 1, caption: 'Email' },
{ span: 1, caption: '' , master: true }
],
columns: [
{ field: 'recid', caption: 'ID' , size: '40px' },
{ field: 'fname', caption: 'First Name', size: '30%' },
{ field: 'lname', caption: 'Last Name' , size: '30%' },
{ field: 'email', caption: 'Email' , size: '30%' },
{ field: 'sdate', caption: 'Start Date', size: '100px' }
],
records: [
{ recid: 1, fname: 'John' , lname: 'Doe' , email: 'jdoe@gmail.com', sdate: '2020/03/01' },
{ recid: 2, fname: 'Stuart' , lname: 'Motzart', email: 'smot@gmail.com', sdate: '2020/03/12' },
{ recid: 3, fname: 'Jin' , lname: 'Franson', email: 'jgra@gmail.com', sdate: '2020/03/13' },
{ recid: 4, fname: 'Susan' , lname: 'Ottie' , email: 'sott@gmail.com', sdate: '2020/03/24' },
{ recid: 5, fname: 'Kelly' , lname: 'Silver' , email: 'ksil@gmail.com', sdate: '2020/03/25' },
{ recid: 6, fname: 'Francis', lname: 'Gatos' , email: 'fgat@gmail.com', sdate: '2020/03/26' },
{ recid: 7, fname: 'Mark' , lname: 'Welldo' , email: 'mwel@gmail.com', sdate: '2020/03/27' },
{ recid: 8, fname: 'Thomas' , lname: 'Bahh' , email: 'tbah@gmail.com', sdate: '2020/03/28' }
]
});
});
</script>
</body>
</html>
これを実行させると以下の様な表示になります。
master:true のカラムは columns の caption がヘッダに表示され span: 2 の部分は2カラムが結合されます。
尚、今回読込んでいる w2ui の JavaScript ソースですが最新バージョンの w2ui-1.5.rc1.js に変更しました。
この w2ui-1.5.rc1 バージョンでないとブラウザのコンソールに以下の警告メッセージが表示される様です。 （皆さんもご注意ください。）
NOTICE: grid column.caption property is deprecated, please use column.text. Column ->
Object { field: "recid", caption: "ID", size: "40px", sizeCalculated: "40px", sizeType: "px", min: 20, text: "ID" }
w2grid.js:6751:32
NOTICE: grid column.caption property is deprecated, please use column.text. Column ->
Object { field: "fname", caption: "First Name", size: "30%", sizeType: "%", sizeCalculated: "114px", min: 20, text: "First Name", sizeCorrected: "33.33%" }
w2grid.js:6751:32
NOTICE: grid column.caption property is deprecated, please use column.text. Column ->
Object { field: "lname", caption: "Last Name", size: "30%", sizeType: "%", sizeCalculated: "113px", min: 20, text: "Last Name", sizeCorrected: "33.33%" }
w2grid.js:6751:32
NOTICE: grid column.caption property is deprecated, please use column.text. Column ->
Object { field: "email", caption: "Email", size: "30%", sizeType: "%", sizeCalculated: "113px", min: 20, text: "Email", sizeCorrected: "33.33%" }
w2grid.js:6751:32
NOTICE: grid column.caption property is deprecated, please use column.text. Column ->
Object { field: "sdate", caption: "Start Date", size: "100px", sizeCalculated: "100px", sizeType: "px", min: 20, text: "Start Date" }
w2grid.js:6751:32
NOTICE: grid columnGroup.caption property is deprecated, please use columnGroup.text. Group ->
Object { span: 1, caption: "", master: true, text: "" }
w2grid.js:6624:28
PR
コメント