jQuery
show 実行の引数、JSON で渡す。例） <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> : 省略 $('#exampleModal').modal('show', { 'dvalue': 'i001' }…</div></div></div>
原始的な方法であるが思いつくのは、afterFilter イベントをフックして、 条件配列の数を記録しておくことだろう。 var conditionsStackLength = 0; var hot = new Handsontable(document.getElementById("table"), { data: data, language: 'ja-JP', column…
columns でセットする validator に、以下のように callbaclk を呼べば 空なら、エラーになる。 var hot = new Handsontable(document.getElementById("table"), { data:data, columns: [ { type:'text', validator: function(value, callback){ callback(!!…
afterAutofill イベントフックの処理を定義する。例） var data = [ [ "a", 1, ], [ "b", 2, ], [ "c", 3, ], [ "d", ], [ "e", ], [ "f", ], ]; var hot = new Handsontable(document.getElementById("table"), { data:data, columns: [ { type: 'text', },…
Handsontable の再描画メソッドは、 インスタンスのメソッド render() で、できると思ってましたが、 うまくいかず再描画されません。loadData( array ) を使うと再描画されます。dataSchema を使うケース、、、 var hot = new Handsontable(document.getEle…
Handsontableの dropMenu 及び、条件フィルタは、バージョン 7.0.0 以降から利用可能で かなり Excel 同様の条件フィルタに操作性が近づいている。 Handsontable インスタンス生成のオプションで、filters: true と dropdownMenu: true を付与する。 バージ…
ボタンを配置するときと同様に、HtmlRenderer を使うのだが。。。 グリッドデータJSON に、URLを持って表示させる場合は、renderer の指定に、"html" を指定する。 で良かった。 var data = [ { link:'<a href="http://google.co.jp">google</a>' } ]; var hot = new Handsontable(document.get…
先日書いた、 oboe2uran.hatenablog.com このサンプル、押下したボタンの特定方法が良くない！ Class属性ではなくて、ちゃんとボタンタグに割り当てる id で、特定させるべきで、 HTMLRenderer で生成時に、列番号を付与したIDにしておくべきだ。 var hot = …
Handsontable で、セル内に配置したボタン押下にイベントから押された対象を参照するのは、 event.realTarget だと思っていたが、 Ver 8.0.0 以降では、この名称ではなく、 event.toElement であった。 以下のようにする。 カラム定義で 指定する Renderer …
ClockPicker で、時（Hour）だけの入力にする方法、 つまり、時（Hour）の選択後、分（minute）を選択する表示をせずに、入力を終わらせて hh:00 が入力結果になるようにする方法 Option で、afterHourSelect のイベント捕捉の処理を書き、 data('clockpicke…
前回の投稿、 Handsontable で ClockPicker による時刻入力を行う。 - Oboe吹きプログラマの黙示録 には、問題がある。 これは、Editor の beginEditing （編集開始）にならないと Clockpicker が画面に 現れない点だ。 表のセルをクリックした時は、focus …
Handsontable の Cell type : time は、 書式による入力バリデーションチェックはあるものの、date type のように、 Date picker 同様、Time の picker までは標準で提供していない。 Handsontable セル入力として、ClockPicker http://weareoutman.github.i…
ClockPicker を利用で、 分の選択を１５分区切り（＝クォータ）に限定したい。 つまり、 時間の選択して、 分の選択が、、、 となって、０分、１５分、３０分、４５分だけの入力にしたい。 元々、分の選択は、この分表示の間、8分など、間の入力は、、 でで…
セルに配置するテキストの alignment は、 Text alignment - Guide - Handsontable Documentation のとおりで、 行追加、セルの追加操作が行われない時、つまり表の再描画が行われない時、 水平方向のクラス名 htLeft , htCenter , htRight , htJustify 縦方…
行最大数 maxRows は、Handsontable インスタンス生成時に、オプション属性の１つとして 設定する。 var data = [ { A:false, B:0, C:'' } ]; var hot = new Handsontable(document.getElementById("table"), { data: data, columns:[ { data: 'A', type: 'c…
無償版の Handsontable Ver6.2.2 を使ったとき、HandsontableからCSV出力 を簡単にできるものを探していた。https://github.com/juantascon/jquery-handsontable-csvを見つけた、MITライセンスである。 中身をよく見ると var csv = "sep=;\n" csv += headers…
jsTree で選択中のノードを解除する操作は、ctrl キーを押しながら 選択しているノードをマウスクリックする。このイベントを拾うイベント名は、deselect_node.jstreeよって、 選択が外れた時の処理を記述する場合は、、 $('#tree').jstree({ // 省略 }).on(…
jsTree で描画するツリー構造イメージを、ノード名を JSON キー、JSON値は jsTreeデータオブジェクト のＩＤで、 JSON を作成する。 https://www.jstree.com/RUNボタンを押したら、とりあえず、JSON を生成してコンソールログ出力する。 ＨＴＭＬ <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>sampl</title></meta></meta></head></html>…
実現させていく例として２年程前に書いた oboe2uran.hatenablog.comoboe2uran.hatenablog.com↑で書いた、jsTree 編集データＪＳＯＮのダウンロードする方法です。 今回は、Python eel を使いません。初期表示の JSON もＵＲＬ指定読込みでなく、ＪＳソースと…
１年以上も前に、Vue.js Bootstrap のモーダルのサンプルを書いていた。 oboe2uran.hatenablog.comoboe2uran.hatenablog.comVue.js でモーダルウィンドウで、リサイズ可や dragable 等ができないことに不満があった。GitHub - euvl/vue-js-modal: Easy to us…
JavaScript で、JWT のペイロードだけを Base64 で解析 以下のようなメソッドで充分 function parseJwt (token) { var base64Url = token.split('.')[1]; var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/'); var jsonPayload = decodeURICompon…
Java ではなくて JavaScript の処理です。（あまり書きたくない JavaScript です。様々な理由で書きます） お題：以下のJSON で、unit001~3 のキーの値が全て同じであるか調査します。 const obj = { unit001: '0_1_2', unit002: '0_1_2', unit003: '0_1_2',…
URL パラメータを取得するJavaScript コードは、結構いろんな書き方がネット検索すると紹介されてるが、 cool と思ったものを見つけました。 stackoverflow.comURL指定もしくは省略でキー名の値を取得 function getUrlParam(name, url) { if (!url) url = wi…
Python 使用時の JSON ソートを書いたので、次は JavaScript ↓ oboe2uran.hatenablog.com同様のJSONデータとする。 var data = { "title": "サンプル", "records": [ {"item": "item 2", "point": 74.68, "date":"2020-02-01" , "memo":"う" }, {"item": "it…
JavaScript , Python, Java(gson) それぞれのJSON整形JSON 素材 {"a":1,"b":"ABC","c":[1,2,3],"d":{"A":"x", "e":{ "B":23, "C":45},"f":null}} JavaScript JSON.stringify で充分、詳細は、JSON.stringify() - JavaScript | MDN をよく読むこと。 const da…
oboe2uran.hatenablog.comモーダルで表示する input の値を参照するのに、 jQuery で書いてしまったが、 Vue.js としては、v-model で指定した名称で 参照するのが正しいのだろう。。モーダルの中で書いた、input に、v-model で参照キーを指定⇒ "uname" <input type="text" name="userName" id="userName" v-model="uname" class="col-3 form-control"> Vu…
bootstrap-vue.js を使わずに、Vue.js で動かす Bootstrap のモーダル でも、、bootstrap-vue.min.css を使う。。head タグに書くもの （サンプルなのでCDN） <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> </link>
Ｗｅｂページデザインとして、サイド（横）に折りたたみするメニューをＣＳＳだけで書いたことがある。 ＣＳＳだけでサイド開閉メニュー - Oboe吹きプログラマの黙示録 でもこれには、次の欠点がある。 ・メニュー開いた時に、スライドする方法の為にブラウ…
元々、１０年程前に Java で日本の祝日を求めるものを作って公開したのだが、 数年前に JavaScript 版も作っていた。jQuery - UI の datepicker で祝日をマークする為だった。JavaScript 版も、バージョン 1.4 では、JHoliday.descriptionDate(date) にバグ…
HTML5 input の webkitdirectory 付与は、Google chrome と Fire Fox しか今のところ使えないが、、 Wicket でこれを受信するのは、FileUploadField コンポーネントの getFileUploads() で List<FileUpload> を受け取ることになる。 <input wicket:id="uploadfile" id="uploadfile" type="file" webkitdirectory> Wikcet final FileUploadField fileu</fileupload>…
