八寿のナレッジベース

ユーザ用ツール

サイト用ツール

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

差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン		前のリビジョン
it技術:web開発:handsontable [2019/06/02 01:00] – [セルの文字色を変更する] 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) {
行 514: 行 514:
 }; };
  
-var  table = new Handsontable(grid,xxx);+let table = new Handsontable(grid,xxx);
  
 cells: function (row, col, prop) { cells: function (row, col, prop) {
行 537: 行 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.countRows() == 0) return;     if (this.instance.countRows() == 0) return;
行 554: 行 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);
  
 // リサイズ完了時 // リサイズ完了時
行 569: 行 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);
  
行 606: 行 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));
     }     }
行 621: 行 621:
 // ストアをプルダウンリスト // ストアをプルダウンリスト
 function store_list() { function store_list() {
-    var list = [];+    let list = [];
  
     jQuery.ajax({     jQuery.ajax({
行 693: 行 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)
行 741: 行 741:
 } }
  
-var  table = new Handsontable(grid, {+let table = new Handsontable(grid, {
  
     cells: function(row, col) {     cells: function(row, col) {
-        var cellPrp = {};+        let cellPrp = {};
         if (col === 5) {         if (col === 5) {
             cellPrp.renderer = myBtns;             cellPrp.renderer = myBtns;
行 756: 行 756:
         }         }
  
-        var time = table.getDataAtCell(selectedRow, selectedCol);+        let time = table.getDataAtCell(selectedRow, selectedCol);
         if (time === null) time = "00:00";         if (time === null) time = "00:00";
         $('#datetimepicker1').data("datetimepicker").defaultDate(moment(moment().format('L') + ' ' + time));         $('#datetimepicker1').data("datetimepicker").defaultDate(moment(moment().format('L') + ' ' + time));
行 782: 行 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"   },
行 894: 行 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.1559404829.txt.gz · 最終更新: 2019/06/02 01:00 by yajuadmin