リストコントロールでは、動的な列幅を設定することが可能です。
概要
動的な列幅を設定するには、列幅の割合を示す数値（整数、もしくは小数点第一位までの少数）とアスタリスク(*)をセットにして記述します。
例えば、それぞれの列を「* 、1.5* 、2.5* 」と設定した場合、列の横幅は可能な限り「1：1.5：2.5」の比率となるように自動調整されます。
また、動的列幅は固定幅と組み合わせることもできます。
「* 、1.5* 、100」と設定した場合、全体幅から100pxを引いた残りの部分の列幅が可能な限り「1：1.5」の比率となるように自動調整されます。
また、動的な列幅を設定すると、以下のような動作となります。
リストコントロールに列の挿入/削除を行うと、動的に設定されている列幅は自動で変更され、スクロールバーは表示されない
リストコントロールをドラッグしてコントロールの幅をリサイズすると、動的に設定されている列幅は自動で変更される
リストコントロールの列幅は最小幅が設定されています。この最小幅は、表示されている列が多く、各列に割り当てられた幅が十分にないとき、列幅が小さくなりすぎないように設定されています。
なお、表示されている列の列幅の合計がコントロールの幅を超える場合はスクロールバーが表示されます。
なお、列ヘッダーの境界線をダブルクリックして列幅を自動調整したり、列幅をドラッグして幅を設定した場合に、動的な列幅は通常の列幅に変更されます。
import '@mescius/inputman/CSS/gc.inputman-js.css';
import { InputMan } from '@mescius/inputman';
InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern;
var column = [
{ name: 'name', label: '製品名', width: '*' },
{ name: 'category', label: '製品カテゴリー', width: '1.5*' },
{ name: 'description', label: '製品紹介', width: '2.5*' }
];
var gcListBox = new InputMan.GcListBox(document.getElementById('listbox1'), {
items: [
{ name: 'ActiveReports', category: '帳票・レポート', description: '日本仕様の帳票開発に必要な機能を搭載したコンポーネント' },
{ name: 'SPREAD', category: '表計算・グリッド', description: 'Excel風のビューと表計算機能を実現するUIコンポーネント' },
{ name: 'ComponentOne', category: 'コンポーネントセット', description: 'Visual Studioで利用する.NET Framework用コンポーネント' },
{ name: 'InputMan', category: '入力支援', description: '快適な入力を実現する日本仕様入力コンポーネントセット' },
{ name: 'MultiRow', category: '多段明細', description: '1レコード複数行&日付表示に最適なグリッドコンポーネント' },
{ name: 'DioDocs', category: 'ドキュメントAPI', description: 'ドキュメントを生成、更新するAPIライブラリ' },
],
columns: column,
width: '500',
allowResize: true,
allowColumnResize: true,
overflow: 'both',
});
document.getElementById('addColumn').addEventListener('click', (e) => {
column.push({ name: 'sample', label: '追加列', width: '*' });
gcListBox.setColumns(column);
});
document.getElementById('deleteColumn').addEventListener('click', (e) => {
var columnName = column.length !== 0 ? column.pop().name : '';
gcListBox.deleteColumn(columnName)
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>リストコントロール - 動的列幅</title>
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
window.onload = function() {
System.import('./src/app');
}
</script>
</head>
<body>
<select id="listbox1"></select>
<table class="sample">
<tr>
<th>列の操作</th>
<td>
<button id="addColumn">列を追加する</button>
<button id="deleteColumn">列を削除する</button>
</td>
</tr>
</table>
</body>
</html>
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/inputman': 'npm:@mescius/inputman/index.js',
'@mescius/inputman/CSS': 'npm:@mescius/inputman/CSS',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
