複数列

<p>リストコントロールでは複数列の一覧(マルチカラムリスト)をリストアイテムとして表示することができます。</p> <h2 id="概要">概要</h2> <p>リストコントロールのcolumnsプロパティに、列ごとの定義情報を設定したcolumnオブジェクトの配列を設定することで、リストアイテムに複数列の一覧を表示することが可能です。</p> <p>たとえば、以下のようなコードになります。</p> <pre><code class="hljs js language-js"><span class="hljs-comment">// リストアイテムに表示する値</span> <span class="hljs-keyword">var</span> data = [ { <span class="hljs-attr">id</span>: <span class="hljs-number">15</span>, <span class="hljs-attr">product</span>: <span class="hljs-string">'ピュアデミグラスソース'</span>, <span class="hljs-attr">date</span>: <span class="hljs-string">'2017/01/10'</span>, <span class="hljs-attr">price</span>: <span class="hljs-number">200</span>, <span class="hljs-attr">amount</span>: <span class="hljs-number">30</span> }, { <span class="hljs-attr">id</span>: <span class="hljs-number">17</span>, <span class="hljs-attr">product</span>: <span class="hljs-string">'だしこんぶ'</span>, <span class="hljs-attr">date</span>: <span class="hljs-string">'2017/01/08'</span>, <span class="hljs-attr">price</span>: <span class="hljs-number">290</span>, <span class="hljs-attr">amount</span>: <span class="hljs-number">50</span> }, { <span class="hljs-attr">id</span>: <span class="hljs-number">18</span>, <span class="hljs-attr">product</span>: <span class="hljs-string">'ピリカラタバスコ'</span>, <span class="hljs-attr">date</span>: <span class="hljs-string">'2017/01/12'</span>, <span class="hljs-attr">price</span>: <span class="hljs-number">200</span>, <span class="hljs-attr">amount</span>: <span class="hljs-number">20</span> }, { <span class="hljs-attr">id</span>: <span class="hljs-number">84</span>, <span class="hljs-attr">product</span>: <span class="hljs-string">'なまわさび'</span>, <span class="hljs-attr">date</span>: <span class="hljs-string">'2017/01/21'</span>, <span class="hljs-attr">price</span>: <span class="hljs-number">200</span>, <span class="hljs-attr">amount</span>: <span class="hljs-number">40</span> }, { <span class="hljs-attr">id</span>: <span class="hljs-number">85</span>, <span class="hljs-attr">product</span>: <span class="hljs-string">'なまからし'</span>, <span class="hljs-attr">date</span>: <span class="hljs-string">'2017/01/13'</span>, <span class="hljs-attr">price</span>: <span class="hljs-number">200</span>, <span class="hljs-attr">amount</span>: <span class="hljs-number">40</span> }, { <span class="hljs-attr">id</span>: <span class="hljs-number">86</span>, <span class="hljs-attr">product</span>: <span class="hljs-string">'なましょうが'</span>, <span class="hljs-attr">date</span>: <span class="hljs-string">'2017/01/20'</span>, <span class="hljs-attr">price</span>: <span class="hljs-number">200</span>, <span class="hljs-attr">amount</span>: <span class="hljs-number">40</span> }, ]; <span class="hljs-comment">// リストアイテムとして表示する列の情報(columnオブジェクトの配列)</span> <span class="hljs-keyword">var</span> cols = [ { <span class="hljs-attr">name</span>: <span class="hljs-string">'id'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'商品コード'</span>, <span class="hljs-attr">width</span>: <span class="hljs-number">80</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'product'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'商品名'</span>, <span class="hljs-attr">width</span>: <span class="hljs-number">200</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'date'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'受注日'</span>, <span class="hljs-attr">width</span>: <span class="hljs-number">120</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'price'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'単価'</span>, <span class="hljs-attr">width</span>: <span class="hljs-number">80</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'amount'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'数量'</span>, <span class="hljs-attr">width</span>: <span class="hljs-number">80</span> }, ]; <span class="hljs-keyword">var</span> gcListBox = <span class="hljs-keyword">new</span> GC.InputMan.GcComboBox(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'gcListBox'</span>), { <span class="hljs-attr">items</span>: data, <span class="hljs-attr">columns</span>: cols }); </code></pre> <p>なお、リストアイテムに複数列の一覧を表示する場合、ソートや列幅のリサイズなどの機能を使用できます。詳しくは、以下の説明をご覧ください。</p> <h2 id="ソート">ソート</h2> <p>リストアイテムに表示されている内容は、ヘッダをクリックすることでソートすることが可能です。ソートの可否は、columnsプロパティに設定したcolumnオブジェクトのclickSortプロパティによって決定されます。したがって、列ごとにソートの可否を設定可能です。(clickSortプロパティの既定値は、falseです。)</p> <p>たとえば、「受注日」の列のみソート可能にする場合、以下のような配列をリストコントロールのcolumnsプロパティに設定します。</p> <pre><code class="hljs js language-js"><span class="hljs-keyword">var</span> cols = [ { <span class="hljs-attr">name</span>: <span class="hljs-string">'id'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'商品コード'</span>, <span class="hljs-attr">width</span>: <span class="hljs-number">80</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'product'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'商品名'</span>, <span class="hljs-attr">width</span>: <span class="hljs-number">200</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'date'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'受注日'</span>, <span class="hljs-attr">width</span>: <span class="hljs-number">120</span>, <span class="hljs-attr">clickSort</span>: <span class="hljs-literal">true</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'price'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'単価'</span>, <span class="hljs-attr">width</span>: <span class="hljs-number">80</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'amount'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'数量'</span>, <span class="hljs-attr">width</span>: <span class="hljs-number">80</span> }, ]; </code></pre> <h2 id="リサイズ">リサイズ</h2> <p>リストアイテムに表示されている列の幅は、columnsプロパティに設定したcolumnオブジェクトのwidthプロパティによって決定されます。また、ヘッダ上で列の境界線をドラッグすることで列幅を変更することも可能です。</p> <p>なお、リストコントロールのsetAllowColumnResizeメソッドを使用することで、列幅の変更可否を設定することも可能です。(デフォルトの状態では、変更可能です。)列幅の変更を不可にする場合、以下のようなコードになります。</p> <pre><code class="hljs js language-js">gcListBox.setAllowColumnResize(<span class="hljs-literal">false</span>); </code></pre> <h2 id="列幅の自動調整">列幅の自動調整</h2> <p>列の境界線をダブルクリックすると、リストの列幅が自動的に調整されます。</p> <p>コードでリストの列幅を自動的に調整するには、updateColumnAutoFitメソッドを実行して、nameプロパティ(列名)とautofitプロパティ(自動調整するかどうか)を持つオブジェクト配列を引数に指定します。</p> <pre><code class="hljs js language-js">gcListBox.updateColumnAutoFit([ { <span class="hljs-attr">name</span>: <span class="hljs-string">'id'</span>, <span class="hljs-attr">autofit</span>: <span class="hljs-literal">true</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'product'</span>, <span class="hljs-attr">autofit</span>: <span class="hljs-literal">true</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'date'</span>, <span class="hljs-attr">autofit</span>: <span class="hljs-literal">true</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'price'</span>, <span class="hljs-attr">autofit</span>: <span class="hljs-literal">true</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'amount'</span>, <span class="hljs-attr">autofit</span>: <span class="hljs-literal">true</span> } ]); </code></pre> <p>また、columnオブジェクトのwidthプロパティに'auto'という文字列を設定することもできます。</p> <pre><code class="hljs js language-js"><span class="hljs-keyword">var</span> cols = [ { <span class="hljs-attr">name</span>: <span class="hljs-string">'id'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'商品コード'</span>, <span class="hljs-attr">width</span>: <span class="hljs-string">'auto'</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'product'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'商品名'</span>, <span class="hljs-attr">width</span>: <span class="hljs-string">'auto'</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'date'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'受注日'</span>, <span class="hljs-attr">width</span>: <span class="hljs-string">'auto'</span>, <span class="hljs-attr">clickSort</span>: <span class="hljs-literal">true</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'price'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'単価'</span>, <span class="hljs-attr">width</span>: <span class="hljs-string">'auto'</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'amount'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'数量'</span>, <span class="hljs-attr">width</span>: <span class="hljs-string">'auto'</span> }, ]; </code></pre>
import '@grapecity/inputman/CSS/gc.inputman-js.css'; import { InputMan } from '@grapecity/inputman'; import orders from './data'; const 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 }, ]; const gcListBox = new InputMan.GcListBox(document.getElementById('gcListBox'), { items: orders, columns: columns }); document.getElementById('columnClickSort').addEventListener('change', (e) => { let allowSort = e.target.checked; for (let i = 0; i < columns.length; i++) { columns[i].clickSort = allowSort; } gcListBox.setColumns(columns); }); document.getElementById('allowColumnResize').addEventListener('change', (e) => { let allowColumnResize = e.target.checked; gcListBox.setAllowColumnResize(allowColumnResize); }); document.getElementById('autoWidth').addEventListener('change', (e) => { if (e.target.checked) { gcListBox.updateColumnAutoFit([ { name: 'id', autofit: true }, { name: 'product', autofit: true }, { name: 'date', autofit: true }, { name: 'price', autofit: true }, { name: 'amount', autofit: true } ]); } else { gcListBox.setColumns(columns); } });
<!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>Multi Column</title> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <select id="gcListBox"></select> <table class="sample"> <tr> <th>ソート</th> <td> <label><input type="checkbox" id="columnClickSort">ヘッダをクリックしてソート</label> </td> </tr> <tr> <th>リサイズ</th> <td> <label><input type="checkbox" id="allowColumnResize" checked>列のリサイズを許可</label> </td> </tr> <tr> <th>列幅の自動調整</th> <td> <label><input type="checkbox" id="autoWidth">列幅を自動調整する</label> </td> </tr> </table> </body> </html>
module.exports = [ { id: 15, product: 'ピュアデミグラスソース', date: '2017/01/10', price: 200, amount: 30 }, { id: 17, product: 'だしこんぶ', date: '2017/01/08', price: 290, amount: 50 }, { id: 18, product: 'ピリカラタバスコ', date: '2017/01/12', price: 200, amount: 20 }, { id: 84, product: 'なまわさび', date: '2017/01/21', price: 200, amount: 40 }, { id: 85, product: 'なまからし', date: '2017/01/13', price: 200, amount: 40 }, { id: 86, product: 'なましょうが', date: '2017/01/20', price: 200, amount: 40 }, ];
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: { '@grapecity/inputman': 'npm:@grapecity/inputman/index.js', '@grapecity/inputman/CSS': 'npm:@grapecity/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' }, } });