八寿のナレッジベース

ユーザ用ツール

サイト用ツール

トレース:
it技術:web開発:handsontable

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン		前のリビジョン
it技術:web開発:handsontable [2018/09/22 23:06] – [列にボタン表示] yajuadminit技術:web開発:handsontable [2021/09/18 02:05] (現在) – [カスタムエディター] yajuadmin
行 125: 行 125:
  
 <code javascript> <code javascript>
-var  table = new Handsontable(grid,xxx);+let table = new Handsontable(grid,xxx);
  
 // changesには[[row, col, pretext, aftertext]] でセットされる。 // changesには[[row, col, pretext, aftertext]] でセットされる。
行 131: 行 131:
     if (source === 'loadData') return;     if (source === 'loadData') return;
  
-    for (var i = 0; i < changes.length; i++) { +    for (let i = 0; i < changes.length; i++) { 
-        var change = changes[i];+        let change = changes[i];
         // 編集と選択は対象外         // 編集と選択は対象外
         if (change[1] === 'Edit' || change[1] === 'Select') continue;         if (change[1] === 'Edit' || change[1] === 'Select') continue;
行 150: 行 150:
  
 <code javascript> <code javascript>
-var  table = new Handsontable(grid,xxx);+let table = new Handsontable(grid,xxx);
  
 afterValidate: function (isValid, value, row, prop, source) { afterValidate: function (isValid, value, row, prop, source) {
行 168: 行 168:
 'use strict'; 'use strict';
  
-var MaxLengthEditor = Handsontable.editors.TextEditor.prototype.extend();+let MaxLengthEditor = Handsontable.editors.TextEditor.prototype.extend();
  
 MaxLengthEditor.prototype.prepare = function () { MaxLengthEditor.prototype.prepare = function () {
行 182: 行 182:
  
 // 使い方 // 使い方
-var table = new Handsontable(grid, {+let table = new Handsontable(grid, {
     data: data,      data: data, 
     columns: [     columns: [
行 217: 行 217:
 const dtFormat = 'YYYY/MM/DD'; const dtFormat = 'YYYY/MM/DD';
          
-var isFuture = function (value, callback) {+let isFuture = function (value, callback) {
     if (moment(value, dtFormat).isValid() && value > moment(new Date()).format(dtFormat)) {     if (moment(value, dtFormat).isValid() && value > moment(new Date()).format(dtFormat)) {
         callback(false);         callback(false);
行 225: 行 225:
 }; };
  
-var  table = new Handsontable(grid, {+let table = new Handsontable(grid, {
     data: data,      data: data, 
     columns: [     columns: [
行 255: 行 255:
  
 <code javascript> <code javascript>
-var  table = new Handsontable(grid,xxx);+let table = new Handsontable(grid,xxx);
  
 table.validateCells(function(isValid) { table.validateCells(function(isValid) {
行 276: 行 276:
  
 <code javascript> <code javascript>
-var  table = new Handsontable(grid,xxx);+let table = new Handsontable(grid,xxx);
  
 function checkItem(item) { function checkItem(item) {
行 290: 行 290:
 } }
  
-var check0002 = function () { return checkItem(2) } +let check0002 = function () { return checkItem(2) } 
-var check0003 = function () { return checkItem(3) }+let check0003 = function () { return checkItem(3) }
  
 // 非同期チェック処理 // 非同期チェック処理
-var promise = Promise.resolve();+let promise = Promise.resolve();
  
 promise promise
行 312: 行 312:
  
 <code javascript> <code javascript>
-var  table = new Handsontable(grid,xxx);+let table = new Handsontable(grid,xxx);
  
-var result = { msg: '', row: 0, col: 0 };+let result = { msg: '', row: 0, col: 0 };
  
-var checkAllItem = function () {+let checkAllItem = function () {
     return new Promise(function (resolve, reject) {     return new Promise(function (resolve, reject) {
         table.validateCells(function (valid) {         table.validateCells(function (valid) {
行 345: 行 345:
  
 <code javascript> <code javascript>
-var  table = new Handsontable(grid,xxx);+let table = new Handsontable(grid,xxx);
  
-var isValid = table.getCellMeta(row, col).valid;+let isValid = table.getCellMeta(row, col).valid;
 if (isValid === false) { if (isValid === false) {
     alert("不正値");     alert("不正値");
行 365: 行 365:
  
 <code javascript> <code javascript>
-var selectedRow = 0; +let selectedRow = 0; 
-var selectedCol = 0;+let selectedCol = 0;
  
 afterSelection: function (r, c, r2, c2) { afterSelection: function (r, c, r2, c2) {
行 380: 行 380:
  
 <code javascript> <code javascript>
-var  table = new Handsontable(grid,xxx);+let table = new Handsontable(grid,xxx);
  
 table.selectCell(row, col); table.selectCell(row, col);
行 397: 行 397:
  
 <script type="text/javascript"> <script type="text/javascript">
- var grid = document.getElementById('grid'); +let grid = document.getElementById('grid'); 
- var table = new Handsontable(grid, {+let table = new Handsontable(grid, {
         data: [],         data: [],
         currentRowClassName: 'currentRow'         currentRowClassName: 'currentRow'
行 411: 行 411:
  
 <code javascript> <code javascript>
-var  table = new Handsontable(grid,xxx);+let table = new Handsontable(grid,xxx);
  
-var sel = table.getSelected();+let sel = table.getSelected();
 table.alter('insert_row', (sel[0][0]) + 1); table.alter('insert_row', (sel[0][0]) + 1);
 </code> </code>
行 421: 行 421:
  
 <code javascript> <code javascript>
-var  table = new Handsontable(grid,xxx);+let table = new Handsontable(grid,xxx);
  
 table.alter('insert_row', table.countRows()); table.alter('insert_row', table.countRows());
行 431: 行 431:
  
 <code javascript> <code javascript>
-var  table = new Handsontable(grid,xxx);+let table = new Handsontable(grid,xxx);
  
-for (var i = table.countRows() - 1; i >= 0; i--) {+for (let i = table.countRows() - 1; i >= 0; i--) {
     if (table.getDataAtCell(i, 0) === true)     if (table.getDataAtCell(i, 0) === true)
     {     {
行 446: 行 446:
  
 <code javascript> <code javascript>
-var  table = new Handsontable(grid,xxx);+let table = new Handsontable(grid,xxx);
  
-for (var i = 0; i < table.countRows() ; i++) {+for (let i = 0; i < table.countRows() ; i++) {
     table.setDataAtCell(i, 0, Checkbox.checked)     table.setDataAtCell(i, 0, Checkbox.checked)
 } }
行 455: 行 455:
 その後に調査した結果、populateFromArrayで高速化できることが分かった。 その後に調査した結果、populateFromArrayで高速化できることが分かった。
 <code javascript> <code javascript>
-var  table = new Handsontable(grid,xxx);+let table = new Handsontable(grid,xxx);
  
-var col = table.propToCol('Select');+let col = table.propToCol('Select');
 table.populateFromArray(0, col, [[Checkbox.checked]], table.countRows() - 1, col, null, null, 'down'); table.populateFromArray(0, col, [[Checkbox.checked]], table.countRows() - 1, col, null, null, 'down');
 </code> </code>
行 479: 行 479:
  
 loadData.addEventListener('click', function() { loadData.addEventListener('click', function() {
-    var tab = hot1.getData(); +    let tab = hot1.getData(); 
-    for(var i = 0; i < hot1.countRows(); i++){+    for(let i = 0; i < hot1.countRows(); i++){
         tab[i].shift();         tab[i].shift();
         tab[i].unshift('value');         tab[i].unshift('value');
行 499: 行 499:
 }; };
  
-var  table = new Handsontable(grid,xxx);+let table = new Handsontable(grid,xxx);
  
 cells: function (row, col, prop) { cells: function (row, col, prop) {
-    if (this.instance.getData().length == 0) return;+    if (this.instance.countRows() == 0) return;
     this.renderer = listRenderer;     this.renderer = listRenderer;
 }, },
行 514: 行 514:
 }; };
  
-var  table = new Handsontable(grid,xxx);+let table = new Handsontable(grid,xxx);
  
 cells: function (row, col, prop) { cells: function (row, col, prop) {
-    if (this.instance.getData().length == 0) return;+    if (this.instance.countRows() == 0) return;
     if (this.instance.getDataAtCell(row, 4) === 'エラー') {     if (this.instance.getDataAtCell(row, 4) === 'エラー') {
         this.renderer = listRenderer;         this.renderer = listRenderer;
行 524: 行 524:
 </code> </code>
  
 +データ0件の判定処理で「this.instance.getData().length == 0」としていたが、これだとデータ件数が多くなると遅い原因(特にIE11は数分かかるレベル)となっていたため、「this.instance.countRows() == 0」に変更した。
 ==== セルの文字色を変更する ==== ==== セルの文字色を変更する ====
 結果列に「エラー」のセルのみを赤色の文字にする。\\ 結果列に「エラー」のセルのみを赤色の文字にする。\\
行 536: 行 537:
 }; };
  
-var  table = new Handsontable(grid,xxx);+let table = new Handsontable(grid,xxx);
 cells: function (row, col, prop) { cells: function (row, col, prop) {
-    if (this.instance.getData().length == 0) return;+    if (this.instance.countRows() == 0) return;
     this.renderer = listRenderer;     this.renderer = listRenderer;
 }, },
行 553: 行 554:
 縦幅は最低限表示するサイズ(150)と、最大で表示するサイズ(400)を指定している。 縦幅は最低限表示するサイズ(150)と、最大で表示するサイズ(400)を指定している。
 <code javascript> <code javascript>
-var resizeTimer; +let resizeTimer; 
-var interval = Math.floor(1000 / 60 * 10);+let interval = Math.floor(1000 / 60 * 10);
  
 // リサイズ完了時 // リサイズ完了時
行 568: 行 569:
 // リサイズ // リサイズ
 function resize() { function resize() {
-    var client_w = document.getElementById('box').clientWidth; +    let client_w = document.getElementById('box').clientWidth; 
-    var client_h = window.parent.screen.height;+    let client_h = window.parent.screen.height;
     //alert("Resized client_w:" + client_w + " x client_h:" + client_h);     //alert("Resized client_w:" + client_w + " x client_h:" + client_h);
  
行 605: 行 606:
 function time_list() { function time_list() {
     list = [];     list = [];
-    for (i = 0 ; i < 24; i++) {+    for (let i = 0 ; i < 24; i++) {
         list.push(('0' + i).slice(-2));         list.push(('0' + i).slice(-2));
     }     }
行 620: 行 621:
 // ストアをプルダウンリスト // ストアをプルダウンリスト
 function store_list() { function store_list() {
-    var list = [];+    let list = [];
  
     jQuery.ajax({     jQuery.ajax({
行 692: 行 693:
  
 <code javascript> <code javascript>
-var table = new Handsontable(grid,xxx);+let table = new Handsontable(grid,xxx);
  
 if (table.getSourceDataAtCell(row,"DBRead") === true) if (table.getSourceDataAtCell(row,"DBRead") === true)
行 705: 行 706:
   * https://jsbin.com/heqijexeci/1/edit?html,js,output   * https://jsbin.com/heqijexeci/1/edit?html,js,output
  
-==== 列にカスタムHTML表示 ====+DateTimePickerの時間を組み合わせて、ボタンを押したら時間入力ダイアログを表示して時間をセットする。 
 + 
 +{{:it技術:web開発:starttime.png|}} 
 +{{:it技術:web開発:inputtime.png|}} 
 + 
 + 
 +<code html> 
 +<link href="../../Content/tempusdominus-bootstrap-4.min.css" rel="stylesheet">     
 +<script src="../../scripts/moment-with-locales.min.js"></script> 
 +<script src="../../scripts/tempusdominus-bootstrap-4.min.js"></script> 
 +     
 +<div class="modal" id="timeModal" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true"> 
 +    <div class="modal-dialog modal-dialog-centered modal-sm" role="document"> 
 +        <div class="modal-content"> 
 +            <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
 +                <span aria-hidden="true">&times;</span> 
 +            </button> 
 +            <div class='input-group justify-content-center' id='datetimepicker1'></div> 
 +        </div> 
 +    </div> 
 +</div> 
 +</code> 
 + 
 +<code javascript> 
 +$('#datetimepicker1').on('change.datetimepicker', function(e) { 
 +    if(selectedCol === 0) return; 
 +    table.setDataAtCell(selectedRow, selectedCol, e.date.format("HH:mm")); 
 +}); 
 + 
 +function myBtns(instance, td, row, col, prop, value, cellProperties) { 
 +    Handsontable.renderers.TextRenderer.apply(this, arguments); 
 +    if (value === null) value = "00:00"; 
 +    td.innerHTML = '<button class="myBtn bt-' + row + '">' + value + '</button>' 
 +} 
 + 
 +let table = new Handsontable(grid, { 
 + 
 +    cells: function(row, col) { 
 +        let cellPrp = {}; 
 +        if (col === 5) { 
 +            cellPrp.renderer = myBtns; 
 +            cellPrp.readOnly = true; 
 +        } 
 +        return cellPrp 
 +    }, 
 +    afterOnCellMouseDown: function(event, cords, TD) { 
 +        if (event.realTarget.className.indexOf('myBtn') < 0) { 
 +            return; 
 +        } 
 + 
 +        let time = table.getDataAtCell(selectedRow, selectedCol); 
 +        if (time === null) time = "00:00"; 
 +        $('#datetimepicker1').data("datetimepicker").defaultDate(moment(moment().format('L') + ' ' + time)); 
 +        $('#timeModal').modal(); 
 +    } 
 +    afterSelection: function (r, c, r2, c2) { 
 +        // ボタンとかおしてフォーカスがGridから離れると 
 +        // getSelected() では取れなくなるので、 
 +        // このタイミングで常に保持しておいたほうが無難 
 +        selectedRow = r2; 
 +        selectedCol = c2; 
 +    } 
 +  
 +} 
 +</code> 
 + 
 +==== セルにカスタムHTML表示 ====
 HTMLを表示できるので、リンクや画像を表示できる。\\ HTMLを表示できるので、リンクや画像を表示できる。\\
 [[https://www.connydado.at/inc/jquery/handsontable-master/demo/renderers_html.html|Rendering custom HTML in cells]] [[https://www.connydado.at/inc/jquery/handsontable-master/demo/renderers_html.html|Rendering custom HTML in cells]]
行 715: 行 782:
  
 <code javascript> <code javascript>
-var data = [+let data = [
     { "price": "1100"  , "mt": "7"  ,  "sts": "8316"  },     { "price": "1100"  , "mt": "7"  ,  "sts": "8316"  },
     { "price": "200"   , "mt": "3"  ,  "sts": "648"   },     { "price": "200"   , "mt": "3"  ,  "sts": "648"   },
行 827: 行 894:
 === 変更後イメージ === === 変更後イメージ ===
 {{:it技術:web開発:datapicker.png}} {{:it技術:web開発:datapicker.png}}
 +
 +===== EditorManager =====
 +EditorManagerを使用してカスタムエディターを作成することが出来る。
 +==== Tips ====
 +  * open時直後に、event.stopPropagation(); を入れるとマウスダウンされたままなのでセル移動すると領域選択された状態になってしまう。
 +
 +==== 参照 ====
 +  * [[https://anz-note.tumblr.com/post/133670437421/jshandsontable%E3%81%AEeditormanager%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F|[js]HandsontableのEditorManagerを使ってみた]]
 +  * [[https://gist.github.com/paulduran/e70a3084e925ce0ff27b|select2-editor.js - GithubGist]]
 +  * [[https://github.com/mydea/handsontable-chosen-editor|Handsontable-chosen-editor - Github]] 
it技術/web開発/handsontable.1537625216.txt.gz · 最終更新: 2018/09/22 23:06 by yajuadmin