デモ
リストコントロール
選択

選択

このサンプルではリストコントロールにドロップダウンリストから複数のアイテムを同時に選択する場合の表示を示しています。

リストコントロールでは、リストアイテムの中から複数のアイテムを同時に選択することができます。 概要 リストコントロールの場合、リストアイテムの選択方法には以下の２つの方法があります。 リストアイテムをクリックして選択（選択されたアイテムは反転表示） チェックボックスによる選択 選択モード setSelectionModeメソッドを使用してリストアイテムを選択する時の動作を設定できます。setSelectionModeメソッドは、以下の3つの動作から選択します。既定値はListBoxSelectionMode.Singleです。 値 説明 Multiple 複数のアイテムを選択できます。 MultipleExt CtrlキーとShiftキーを押しながらクリックすることで複数のアイテムを選択できます。 Single 一つのアイテムのみ選択できます。 setSelectedIndexメソッドを使用することで特定のアイテムを選択でき、setSelectedIndicesメソッドを使用することで複数のアイテムをまとめて選択することができます。また、clearSelectedメソッドを使用することでアイテムの選択状態を解除することができます。 選択されているアイテムを取得するメソッドとしては、以下のようなメソッドが用意されています。 メソッド 説明 getSelectedIndex 選択されたアイテムのインデックスを取得します。 getSelectedIndices 選択されたアイテムのインデックスを取得します。取得結果は配列として返され、複数のアイテムを選択している場合、すべてのインデックスを返します。 getSelectedItem 選択されたアイテムを取得します。 getSelectedItems 選択されたアイテムを取得します。取得結果は配列として返され、複数のアイテムを選択している場合、すべてのアイテムを返します。 getSelectedValue valueMemberPathを使用して選択されたアイテムの値を取得します。 getSelectedValues valueMemberPathを使用して選択されたアイテムの値を取得します。取得結果は配列として返され、複数のアイテムを選択している場合、すべてのアイテムの値を返します。 チェックボックス showCheckBoxプロパティをtrueに設定することでリストアイテムの左端にチェックボックスが表示されます。リストアイテムを複数列で校正している場合、一番左端の列にチェックボックスが表示されます。 setCheckedIndexメソッドを使用することで特定のアイテムをチェックすることができ、setCheckedIndicesメソッドを使用することで複数のアイテムをまとめてチェックすることができます。また、clearCheckedメソッドを使用することでアイテムのチェックをすべてクリアすることができます。 チェックされているアイテムを取得するメソッドとしては、以下のようなメソッドが用意されています。 メソッド 説明 getCheckedIndices チェックしたアイテムのインデックスを取得します。取得結果は配列として返され、複数のアイテムをチェックしている場合、すべてのインデックスを返します。 getCheckedItems チェックしたアイテムを取得します。取得結果は配列として返され、複数のアイテムをチェックしている場合、すべてのアイテムを返します。
<template> <div> <div class="flexbox"> <div> <GcListBoxComponent @oninitialized='oninitialized' @selectedchanged='selectedchanged' @checkedchanged='checkedchanged' :key="Date.now()" :items='products' :show-check-box='showCheckBox' :selection-mode='selectionMode' /> </div> <div> 選択された項目：<div id="selectedItems"></div> </div> <div> チェックされた項目：<div id="checkedItems"></div> </div> </div> <table class="sample"> <tbody> <tr> <th>選択モード</th> <td> <select v-model='selectionMode'> <option value='single'>1つの項目のみ選択</option> <option value='multiple'>クリックで複数の項目を選択</option> <option value='multipleExt'>Ctrl／Shift+クリックで複数の項目を選択</option> </select><br> <button id="selectAll" :disabled='selectionMode == "single"' @click='handleAction("selectAll")'>すべて選択</button> <button id="unselectAll" @click='handleAction("unselectAll")'>すべて選択解除</button> </td> </tr> <tr> <th>チェックボックス</th> <td> <label><input type="checkbox" v-model='showCheckBox'> チェックボックスを表示</label> <br> <button id="checkAll" :disabled='!showCheckBox' @click='handleAction("checkAll")'>すべてチェック</button> <button id="uncheckAll" :disabled='!showCheckBox' @click='handleAction("uncheckAll")'>すべてチェック解除</button> </td> </tr> </tbody> </table> </div> </template> <script setup> import '@mescius/inputman/CSS/gc.inputman-js.css'; import './styles.css'; import {ref} from 'vue'; import '@mescius/inputman.vue'; import { InputMan } from '@mescius/inputman'; import {products, allIndecies} from './data.mjs'; import {GcListBoxComponent} from '@mescius/inputman.vue'; InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern; var showCheckBox = ref(true); var selectionMode = ref('single'); var gcListBox = null; const oninitialized = function(arg1) { gcListBox = arg1; } function handleAction (type) { switch(type) { case 'selectAll': gcListBox.setSelectedIndices(allIndecies) break; case 'unselectAll': gcListBox.clearSelected(); break; case 'checkAll': gcListBox.setCheckedIndices(allIndecies); break; case 'uncheckAll': gcListBox.clearChecked(); break; } } const selectedchanged = function(sender){ document.getElementById('selectedItems').innerText = sender.getSelectedValues().join('\n'); } const checkedchanged = function(sender){ document.getElementById('checkedItems').innerText = sender.getCheckedItems().map(item => item.Text).join('\n'); } </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>
.flexbox > div { width: 200px; }
[gcim-control-appearance="modern"] .flexbox > div { width: 200px; }
(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/inputman.richtexteditor/JS/plugins/advlist': 'npm:@mescius/inputman.richtexteditor/JS/plugins/advlist/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/all': 'npm:@mescius/inputman.richtexteditor/JS/plugins/all/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/autosave': 'npm:@mescius/inputman.richtexteditor/JS/plugins/autosave/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/charmap': 'npm:@mescius/inputman.richtexteditor/JS/plugins/charmap/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/directionality': 'npm:@mescius/inputman.richtexteditor/JS/plugins/directionality/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/emoticons': 'npm:@mescius/inputman.richtexteditor/JS/plugins/emoticons/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/fullscreen': 'npm:@mescius/inputman.richtexteditor/JS/plugins/fullscreen/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/htmlcode': 'npm:@mescius/inputman.richtexteditor/JS/plugins/htmlcode/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/image': 'npm:@mescius/inputman.richtexteditor/JS/plugins/image/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/link': 'npm:@mescius/inputman.richtexteditor/JS/plugins/link/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/lists': 'npm:@mescius/inputman.richtexteditor/JS/plugins/lists/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/media': 'npm:@mescius/inputman.richtexteditor/JS/plugins/media/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/pagebreak': 'npm:@mescius/inputman.richtexteditor/JS/plugins/pagebreak/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/preview': 'npm:@mescius/inputman.richtexteditor/JS/plugins/preview/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/save': 'npm:@mescius/inputman.richtexteditor/JS/plugins/save/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/searchreplace': 'npm:@mescius/inputman.richtexteditor/JS/plugins/searchreplace/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/table': 'npm:@mescius/inputman.richtexteditor/JS/plugins/table/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/template': 'npm:@mescius/inputman.richtexteditor/JS/plugins/template/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/wordcount': 'npm:@mescius/inputman.richtexteditor/JS/plugins/wordcount/plugin.js', "@mescius/inputman.comment": 'npm:@mescius/inputman.comment/index.js', "@mescius/inputman.comment.vue": 'npm:@mescius/inputman.comment.vue/lib/gc.inputman.comment.plugin.vue.js', "@mescius/inputman.comment/CSS": "npm:@mescius/inputman.comment/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);