jQuery

jsTree ツリーを折りたたみ時、選択していたノードが存在したかチェックする

jsTree でノードを折りたたみをした時に 折りたたんだ中に選択していたノードが存在したかチェックして処理したい場合がある。”折りたたみ”のイベントを探して処理を書く。 →ここで、探す。。 https://www.jstree.com/api/#/?q=.jstree%20Event&f=after_clos…

jsTree 新規作成と名称変更を区別した処理

jsTree の contextmenu プラグイン と dnd (ドラッグ&ドロップ)プラグインの処理で イベントによる処理を書く場合、基本的には各イベント名で、 on の bind関数を書けばよいのだが、、 .on( Eventname , function(ev, data){ } https://www.jstree.com/ap…

jsTree 検索でHit だけでなく下の階層も表示する

jsTree search プラグインで検索した結果、Hitしたノードの階層の下も 表示させるには、 以下の属性、default : false を true にする。https://www.jstree.com/api/#/?f=$.jstree.defaults.search.show_only_matches_children$.jstree.defaults.search.s…

html2canvas+jsPDF で1ページに入りきらない時、

html2canvas+jsPDF で表示したHTML ページの中の任意の領域をPDFに作成する方法は、 以下のようにするが、 (入りきらない場合の対策をしていない) $('#outpdf').click(function(){ html2canvas(document.querySelector("#content")).then(function(can…

jsTree ノード選択時の処理を整理する

jsTreeでノード選択時の処理、 jQuuery on メソッドで、select_node.jstree でイベントと結合 $('#tree').jstree({ 'plugins': [ 'contextmenu','dnd' ], 'core':{ data':{ "url":"./tree.json", "dataType":"json" }, 'check_callback' : true, } }).on('se…

アイコン無し=区別ない jsTree での保存

編集可能 jsTree の編集結果を Pyhon で、JSON 保存 - Oboe吹きプログラマの黙示録 の続き、アイコン無し、フォルダ等の区別がない、自由にツリーを組み立てるようにする jsTree 編集可能 jsTree の編集結果を Pyhon で、JSON 保存 - Oboe吹きプログラマの黙…

編集可能 jsTree の編集結果を Pyhon で、JSON 保存

「jsTree 描画→Treeの編集操作→ 編集結果を次回表示の為に保存」 (ここでいうTreeの編集操作は、ツリーアイテムを移動したり新規作成・削除・名称変更をツリー図上で実行することです) 通常は、ブラウザで表示した jsTree → JavaScript で JSON 変換、→ サ…

Python eelで jsTree の AJAX load を確かめる

jsTree の AJAX による URL指定の描画は、わざわざ Webサイトを立てないと 確認できません。 ↑のGIF画像になってしまいます。 サーバを立てなくても描画させるのに、 Python の eel パッケージを使って、手元のWindows PC上で、HTML と JS + Pythonスクリプ…

Wicket full size ModalWindow

昔、Wicket の ModalWindow の caption を非表示にする css を書いたり、 Wicketモーダルウィンドウの外観を変更する - Oboe吹きプログラマの黙示録 CSS の記述で、画面いっぱいの ModalWindow 表示を書いたことがありました。 Wicket ModalWindow full scre…

jQuery ui Datepicker 年月プルダウンにした時の調整

Datepicker は jQuery ui 以外にも沢山あるのでまだ、jQuery ui を使うなんてという批判はさておき、 使い慣れてもいるので。。。 年月セレクタをプルダウンにした時、、 jquery-ui-1.12.1.min.js と、 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script> で、以下のようにdatepicker を設定して表示した時、…

Wicket Bootstrap用の Pagenation

昨日の投稿、WicketのPagingNavigatorで、先頭(first)と末尾(last)を表示させない方法 - Oboe吹きプログラマの黙示録 に続いて、Wicket で、Bootstrap用の PagingNavigator を作りました。 ↓ 以下のような描画になります。(色は別にCSSで指定) まず、Bo…

IE11 でもHTMLに動的描画のエリアを画像として保存

先日、html2canvas を使って表示HTMLを画像変換してダウンロード - Oboe吹きプログラマの黙示録 を書いて、IE11では不可能と書きましたが、方法があったのです。 html2canvas を実行した時に、Promise が認識できなくてダメだったのですが、 Polyfil…

jsTree で作成したツリー図をPDFにする

jsTree jsTree で作成したツリー図をPDFで出力するのは、jsTreeがHTML表示としたものを 画像データにして、PDF作成のツールで出力ということをしなければなりません。 PDF作成でテンプレートによる作成というのは無理があります。=できない。【大…

html2canvas を使って表示HTMLを画像変換してダウンロード

html2canvas - Screenshots with JavaScript を使います。 HTMLが以下の様に、画像抽出されるエリアと抽出実行制御するボタンがあります。 <div id="tree">この中が画像として抽出される</div> <div> <ul> <li><button id="preview" type="button">prev Image</button></li> <li><button id="outImage" type="button">Download</button> <a id="download" href="#"></a> </li> </ul>…</div>

html2canvas onrendered option is deprecated

表示中HTMLのスクリーンショットを canvas tag にイメージ貼り付けしようと html2canvas を使おうと思い、、 html2canvas - Screenshots with JavaScript 最新バージョンで試すと、 html2canvas: onrendered option is deprecated, html2canvas returns a Pr…

JavaScriptコードの中で、日付データのJSONとDateオブジェクトの相互変換

JavaScriptコードの中で日付データのJSONとDateオブジェクトの変換をどうしようと悩んでたら、 なるほどと思う記事を見つけた。 【JavaScript】JSON.stringify/parse をカスタマイズしてDate型とかを使えるようにする - 藤 遥のブログ ありがたく書いて頂い…

jsTree の types プラグインの li_attr と a_attr の使い方が解りにくい

https://www.jstree.com/api/#/?f=$.jstree.defaults.types types プラグインの li_attr と a_attr は、HTMLの li タグと a タグに追加する属性ということぐらいしか 書いてなくて、、どう書けば良いか?書いたらどうなるか?がどうも見えてこない。 結…

jsTree の types プラグインを使う

https://www.jstree.com/api/#/?f=$.jstree.defaults.typesこれを使えば、コンテキスメニューにおける _disabled の判定も、 以前書いた jsTree のコンテキストメニューをカスタマイズ - Oboe吹きプログラマの黙示録 も、get_node した icon を問い合わせる…

jsTree で下のツリー階層を開く時にもAJAX通信で読み込む方法

jsTree配布デモを見ても、ツリー全体JSONをAJAXで読み込む方法はあるが、 静的に書いたJSON から下の階層を開く時や、AJAX読込み後さらに下の階層を読み込む方法が、 なかなか解らなかった。massload とかプラグインあるみたいだが、どうもできない。。。 ク…

jQuery3 から load関数は注意

jQuery 3から、画面ロード時の処理を $(function(){ $(window).on("load", function(){ // TODO }); }); と書いたら動かない。もともと .load() や .unload() は、jQuery 3 のRC版が出た時の changelog で もう無くなると書いてある。 https://blog.jquery.…

編集可能にしたTabulator で、ALL check のチェックBOXを設置する

Tabulator は、編集用に設置した場合、 チェック(tickcross)に対する、ALL check ON/OFF を切り替える=入力する為の 機能または部品というのは標準で用意されていない。 ALL check ON/OFF の部品は、普通のUI感覚では、表のヘッダにある。 しかし、Tabu…

jsTree JSON データの変換

ツリービューの情報を管理するのに、ノードの親子関係の処理を新たにコーディングするのは、どんな言語であれ 労力が必要です。 できれば、画面でツリーの描画操作の結果をそのまま管理するのが楽です。 せっかく JSON というオブジェクトで表現するのですか…

jsTreeのドラッグアンドドロップの制御

jsTree のドラッグアンドドロッププラグイン は、 単に、dnd だけを書くと、 $('#tree').jstree({ 'core':{ : }, "plugins":[ "dnd" ] )); なんでもかんでも、どこの移動先にもドラッグアンドドロップで移動ができてしまう。 ファイルの下に、ぶら下げるよ…

jsTree のコンテキストメニューにアイコンを設定

jsTree のコンテキストメニューをカスタマイズ - Oboe吹きプログラマの黙示録 に続き、CSS疑似要素で、フォントアイコンを書く - Oboe吹きプログラマの黙示録 を書いたことを利用して、コンテキストメニューにアイコンを設定します。 今回も、Fontello - ico…

jsTree のコンテキストメニューをカスタマイズ

jsTree のプラグイン contextmenu は、デフォルトのままではフォルダとファイルのように、 ある種類のノードの配下にノードを作成することができない =ファイルの下に、フォルダ/ファイルは作れてはいけないはずだ。。 つまり、ツリー構造を作成できるのは…

jsTree 初期表示で全て展開表示

open_all というメソッドが用意されてるとのことだが、jsTree の マニュアルを見ても どう呼び出すのか解りにくい。loaded.jstree イベントにバインドして実行させるそうだ。 $('#tree').jstree({ 'core':{ 'data':[ {"id":1, "icon":"jstree-folder", "text…

jsTree のクリックイベント捕捉の書き方

Webページに Tree 描画させるのに、Wicket が提供しているものは、Java Object で要素&ツリー体系を作らなくてはならず、 これは手間もかかって非常に辛い。巨大なツリーで children が大量の時、結果表示スピードも心配だ。 だから Wicket の Tree 機能は…

Tabulator のカスタムフィルタ

Tabulator のチェック値のフィルタは、標準ではONを抽出するフィルタである。 サンプル $('#example-table').tabulator({ layout:"fitDataFill", columns:[ { title:"名前", field:"name", sortable:true, headerFilter:true, headerFilterPlaceholder:"名…

Tabulator ウィンドウの高さに合わせる

Tabulator は、レスポンシブだが、ウィンドウの高さに合わせた表の高さ height までは 調整してくれない。 自前でやるしかないのか。。 サンプル $('#example-table').tabulator({ height: window.innerHeight - 70, layout:"fitDataFill", columns:[ // 行…

Tabulator 右clickコンテキストは、stopPropagationでなくてpreventDefault

jQuery のイベント伝播の制御は、、 preventDefault() = 対象の要素のイベントをキャンセル stopPropagation() = 親要素への伝播をキャンセル return false = 対象と親要素への伝播をキャンセル であるから、Tabulator 右click時、ブラウザのコンテキストメ…