jQuery

Bootstrap Modal のデータ受け渡し

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>

Handsontable フィルタを使用中かどうかを判断する

原始的な方法であるが思いつくのは、afterFilter イベントをフックして、 条件配列の数を記録しておくことだろう。 var conditionsStackLength = 0; var hot = new Handsontable(document.getElementById("table"), { data: data, language: 'ja-JP', column…

Handsontable 必須チェックバリデーション

columns でセットする validator に、以下のように callbaclk を呼べば 空なら、エラーになる。 var hot = new Handsontable(document.getElementById("table"), { data:data, columns: [ { type:'text', validator: function(value, callback){ callback(!!…

Handsontable AutoFil の結果で処理を行う場合

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 の再描画メソッド

Handsontable の再描画メソッドは、 インスタンスのメソッド render() で、できると思ってましたが、 うまくいかず再描画されません。loadData( array ) を使うと再描画されます。dataSchema を使うケース、、、 var hot = new Handsontable(document.getEle…

Handsontableの dropMenu 及び、条件フィルタメニューの日本語化

Handsontableの dropMenu 及び、条件フィルタは、バージョン 7.0.0 以降から利用可能で かなり Excel 同様の条件フィルタに操作性が近づいている。 Handsontable インスタンス生成のオプションで、filters: true と dropdownMenu: true を付与する。 バージ…

Handsontable セルに配置するリンク

ボタンを配置するときと同様に、HtmlRenderer を使うのだが。。。 グリッドデータJSON に、URLを持って表示させる場合は、renderer の指定に、"html" を指定する。 で良かった。 var data = [ { link:'<a href="http://google.co.jp">google</a>' } ]; var hot = new Handsontable(document.get…

Handsontable に配置するボタンのサンプル

先日書いた、 oboe2uran.hatenablog.com このサンプル、押下したボタンの特定方法が良くない! Class属性ではなくて、ちゃんとボタンタグに割り当てる id で、特定させるべきで、 HTMLRenderer で生成時に、列番号を付与したIDにしておくべきだ。 var hot = …

Handsontable セルに配置したボタンのイベント

Handsontable で、セル内に配置したボタン押下にイベントから押された対象を参照するのは、 event.realTarget だと思っていたが、 Ver 8.0.0 以降では、この名称ではなく、 event.toElement であった。 以下のようにする。 カラム定義で 指定する Renderer …

clockpicker で、時(Hour)だけの入力にする

ClockPicker で、時(Hour)だけの入力にする方法、 つまり、時(Hour)の選択後、分(minute)を選択する表示をせずに、入力を終わらせて hh:00 が入力結果になるようにする方法 Option で、afterHourSelect のイベント捕捉の処理を書き、 data('clockpicke…

Handsontable で ClockPicker による時刻入力を行う(2)

前回の投稿、 Handsontable で ClockPicker による時刻入力を行う。 - Oboe吹きプログラマの黙示録 には、問題がある。 これは、Editor の beginEditing (編集開始)にならないと Clockpicker が画面に 現れない点だ。 表のセルをクリックした時は、focus …

Handsontable で ClockPicker による時刻入力を行う。

Handsontable の Cell type : time は、 書式による入力バリデーションチェックはあるものの、date type のように、 Date picker 同様、Time の picker までは標準で提供していない。 Handsontable セル入力として、ClockPicker http://weareoutman.github.i…

ClockPicker で分の選択を15分区切りに限定する

ClockPicker を利用で、 分の選択を15分区切り(=クォータ)に限定したい。 つまり、 時間の選択して、 分の選択が、、、 となって、0分、15分、30分、45分だけの入力にしたい。 元々、分の選択は、この分表示の間、8分など、間の入力は、、 でで…

Handsontable 行追加時のスタイルの引継ぎ?

セルに配置するテキストの alignment は、 Text alignment - Guide - Handsontable Documentation のとおりで、 行追加、セルの追加操作が行われない時、つまり表の再描画が行われない時、 水平方向のクラス名 htLeft , htCenter , htRight , htJustify 縦方…

Handsontable 後から行最大数を変える

行最大数 maxRows は、Handsontable インスタンス生成時に、オプション属性の1つとして 設定する。 var data = [ { A:false, B:0, C:'' } ]; var hot = new Handsontable(document.getElementById("table"), { data: data, columns:[ { data: 'A', type: 'c…

Handsontable CSV出力

無償版の Handsontable Ver6.2.2 を使ったとき、HandsontableからCSV出力 を簡単にできるものを探していた。https://github.com/juantascon/jquery-handsontable-csvを見つけた、MITライセンスである。 中身をよく見ると var csv = "sep=;\n" csv += headers…

deselect_node.jstree Event

jsTree で選択中のノードを解除する操作は、ctrl キーを押しながら 選択しているノードをマウスクリックする。このイベントを拾うイベント名は、deselect_node.jstreeよって、 選択が外れた時の処理を記述する場合は、、 $('#tree').jstree({ // 省略 }).on(…

jsTree描画オブジェクトを JSON にする

jsTree で描画するツリー構造イメージを、ノード名を JSON キー、JSON値は jsTreeデータオブジェクト のIDで、 JSON を作成する。 https://www.jstree.com/RUNボタンを押したら、とりあえず、JSON を生成してコンソールログ出力する。 HTML <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>…

Blob作成、dispatchEvent イベントの伝播でダウンロード

実現させていく例として2年程前に書いた oboe2uran.hatenablog.comoboe2uran.hatenablog.com↑で書いた、jsTree 編集データJSONのダウンロードする方法です。 今回は、Python eel を使いません。初期表示の JSON もURL指定読込みでなく、JSソースと…

vue-js-modal を試す

1年以上も前に、Vue.js Bootstrap のモーダルのサンプルを書いていた。 oboe2uran.hatenablog.comoboe2uran.hatenablog.comVue.js でモーダルウィンドウで、リサイズ可や dragable 等ができないことに不満があった。GitHub - euvl/vue-js-modal: Easy to us…

JWT ペイロードを解析(JavaScript)

JavaScript で、JWT のペイロードだけを Base64 で解析 以下のようなメソッドで充分 function parseJwt (token) { var base64Url = token.split('.')[1]; var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/'); var jsonPayload = decodeURICompon…

JavaScript JSON のパターン・キーの値が全て同じかどうか調べる

Java ではなくて JavaScript の処理です。(あまり書きたくない JavaScript です。様々な理由で書きます) お題:以下のJSON で、unit001~3 のキーの値が全て同じであるか調査します。 const obj = { unit001: '0_1_2', unit002: '0_1_2', unit003: '0_1_2',…

URL パラメータを取得するJavaScript

URL パラメータを取得するJavaScript コードは、結構いろんな書き方がネット検索すると紹介されてるが、 cool と思ったものを見つけました。 stackoverflow.comURL指定もしくは省略でキー名の値を取得 function getUrlParam(name, url) { if (!url) url = wi…

JSON のソート(Javascript)

Python 使用時の JSON ソートを書いたので、次は JavaScript ↓ oboe2uran.hatenablog.com同様のJSONデータとする。 var data = { "title": "サンプル", "records": [ {"item": "item 2", "point": 74.68, "date":"2020-02-01" , "memo":"う" }, {"item": "it…

JSONの整形

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…

Vue.js v-model で参照

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…

Vue.js で Bootstrap のモーダル

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>

Bootstrap 使用と併用するサイド(横)に設置するメニューナビゲーション

Webページデザインとして、サイド(横)に折りたたみするメニューをCSSだけで書いたことがある。 CSSだけでサイド開閉メニュー - Oboe吹きプログラマの黙示録 でもこれには、次の欠点がある。 ・メニュー開いた時に、スライドする方法の為にブラウ…

Bootstrap Datepicker カレンダーに、日本の祝日をマークする

元々、10年程前に 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>…