リストコントロールでは複数列の一覧（マルチカラムリスト）をリストアイテムとして表示することができます。
概要
リストコントロールのcolumnsプロパティに、列ごとの定義情報を設定したcolumnオブジェクトの配列を設定することで、リストアイテムに複数列の一覧を表示することが可能です。
たとえば、以下のようなコードになります。
なお、リストアイテムに複数列の一覧を表示する場合、ソートや列幅のリサイズなどの機能を使用できます。詳しくは、以下の説明をご覧ください。
ソート
リストアイテムに表示されている内容は、ヘッダをクリックすることでソートすることが可能です。ソートの可否は、columnsプロパティに設定したcolumnオブジェクトのclickSortプロパティによって決定されます。したがって、列ごとにソートの可否を設定可能です。（clickSortプロパティの既定値は、falseです。）
たとえば、「受注日」の列のみソート可能にする場合、以下のような配列をリストコントロールのcolumnsプロパティに設定します。
リサイズ
リストアイテムに表示されている列の幅は、columnsプロパティに設定したcolumnオブジェクトのwidthプロパティによって決定されます。また、ヘッダ上で列の境界線をドラッグすることで列幅を変更することも可能です。
なお、リストコントロールのsetAllowColumnResizeメソッドを使用することで、列幅の変更可否を設定することも可能です。（デフォルトの状態では、変更可能です。）列幅の変更を不可にする場合、以下のようなコードになります。
列幅の自動調整
列の境界線をダブルクリックすると、リストの列幅が自動的に調整されます。
コードでリストの列幅を自動的に調整するには、updateColumnAutoFitメソッドを実行して、nameプロパティ（列名）とautofitプロパティ（自動調整するかどうか）を持つオブジェクト配列を引数に指定します。
また、columnオブジェクトのwidthプロパティに'auto'という文字列を設定することもできます。
<template>
<div>
<GcListBoxComponent ref="listbox" :items='items' :columns='columns' :allow-column-resize='allowColumnResize' />
<table class="sample">
<tbody>
<tr>
<th>ソート</th>
<td>
<label><input type="checkbox" v-model="columnClickSort">ヘッダをクリックしてソート</label>
</td>
</tr>
<tr>
<th>リサイズ</th>
<td>
<label><input type="checkbox" v-model="allowColumnResize">列のリサイズを許可</label>
</td>
</tr>
<tr>
<th>列幅の自動調整</th>
<td>
<label><input type="checkbox" v-model="autoWidth">列幅を自動調整する</label>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script setup>
import '@mescius/inputman/CSS/gc.inputman-js.css';
import {ref, watch} from 'vue';
import '@mescius/inputman.vue';
import { InputMan } from '@mescius/inputman';
import orders from './data.mjs';
import {GcListBoxComponent} from '@mescius/inputman.vue';
InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern;
var items = ref(orders);
var autoWidth = ref(false);
var allowColumnResize = ref(true);
var columnClickSort = ref(false);
var listbox = ref(null);
var columns = [
{ name: 'id', label: '商品コード', width: 80 },
{ name: 'product', label: '商品名', width: 200 },
{ name: 'date', label: '受注日', width: 120 },
{ name: 'price', label: '単価', width: 80 },
{ name: 'amount', label: '数量', width: 80 },
]
watch(autoWidth, (newVal, oldVal) => {
var gcList = listbox.value.getNestedIMControl();
if(newVal){
gcList.updateColumnAutoFit([
{ name: 'id', autofit: true },
{ name: 'product', autofit: true },
{ name: 'date', autofit: true },
{ name: 'price', autofit: true },
{ name: 'amount', autofit: true }
]);
}else{
gcList.setColumns(columns);
}
})
watch(columnClickSort, (newVal, oldVal) => {
columns.forEach(c => c.clickSort = newVal);
listbox.value.getNestedIMControl().setColumns(columns);
})
</script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>リストコントロール - 複数列</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script src="compiler.js" type="module"></script>
<script>
window.onload = function() {
var System = SystemJS;
System.import("./src/app.js");
}
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
"@mescius/inputman": 'npm:@mescius/inputman/index.js',
"@mescius/inputman.vue": 'npm:@mescius/inputman.vue/lib/gc.inputman.plugin.vue.js',
"@mescius/inputman/CSS": "npm:@mescius/inputman/CSS",
"@mescius/inputman.richtexteditor": "npm:@mescius/inputman.richtexteditor/index.js",
"@mescius/inputman.richtexteditor.vue": "npm:/@mescius/inputman.richtexteditor.vue/lib/gc.inputman.richtexteditor.plugin.vue.js",
"@mescius/inputman.richtexteditor/CSS": "npm:@mescius/inputman.richtexteditor/CSS",
'@mescius/wijmo': 'npm:@mescius/wijmo/index.js',
'@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles',
'@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures/wijmo.culture.ja.js',
'@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js',
'@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js',
'@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js',
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-ja': 'npm:@mescius/spread-sheets-resources-ja/index.js',
'@mescius/spread-sheets/styles': 'npm:@mescius/spread-sheets/styles',
'css': 'npm:systemjs-plugin-css/css.js',
},
meta: {
'*.css': { loader: 'css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
