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

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

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

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

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

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

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

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

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

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

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

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

今更だけど、忘れそうなのでメモ。JavaScript 文字列置換、replace ( 対象文字列, 置換文字列 ) は、 最初に見つかるもの１個だけを置換するのは、非プログラマでないかぎり常識で 全てを置換するのは、 正規表現で replace( /pattern/g , 置換文字列 ) を使…

Wicket ばかり書いていると、Wicket の ModalWindow が便利で、jQuery UI の Dialog を書く機会が減り、 jQuery UI ダイアログの背景色を変更するの、どうやるんだっけ？ と少し気分が落ちる。。。（面倒くさいなあ！みたいな。。）jQuery UI ダイアログの背…

Tabulator のチェックONOFFデザインを持ってくる。（１） - Oboe吹きプログラマの黙示録Tabulator のチェックONOFFデザインを持ってくる。（２） - Oboe吹きプログラマの黙示録SVG でも、innerHTML できるようにする Polyfill - Oboe吹きプログラマの黙示録…

あるんですね。https://github.com/dnozay/innersvg-polyfill Polyfill 所謂、まだ機能が追いついてないブラウザに対して補うためのライブラリ、 これを使うと IE９以降でもSVGタグで、innerHTML を実行できます。 github サイトから、配布してる innersvg.j…

昨日書いた oboe2uran.hatenablog.comやはり、ＩＥ１１でも表示できるＪＳ版にします 原始的に、ＤＯＭの innerHTML を使います。HTML <h2>width × height : 24</h2> <div class="case1"></div> <h3>border</h3> <div class="case2"></div> <h2>width × height : 14</h2> <div class="case3"></div> CSS は前回と同じです。 svg.chk-on path { fill: #2dc214; clip-ru…

jQuery のプラグイン、Tabulator のチェックON/OFF のデザインは、ＳＶＧで作成されているので Tabulator サンプル等を表示して、ＳＶＧコードを抽出して他で利用できそうである。 このチェックＯＮ、ＯＦＦのＳＶＧコードのＨＴＭＬタグを抽出すると以下で…

jQuery ui ダイアログのタイトルバーが大きすぎると思ったので調整 通常は、、、 これが大きいと思うなら、、 .ui-dialog-titlebar{ padding: 0.3rem !important; font-size: 0.5rem; } タイトル文字列を指定しなければ、、

久々に jQuery UI ダイアログのコードを書きました。ちょっとしたメモとしてここに残します。 何も気にせずに、マニュアルどおりに書けば、、、 HTML・・・ダイアログ表示させる div <div id="dialog"></div> ＪＳ・・・ダイアログ var dlg = $('#dialog').dialog({ autoOpen: false…

Tabulator で表示した表から、BOM付きのCSVダウンロードするには、 ２通りの方法がある。 ・Custom File Formatter を使う方法 ・Format Data Before Download を定義する方法 いずれも、対策するためにカスタマイズする方法を示したマニュアルが http://tab…

jQuery を書いていて、今まで動いてたのは、 HTML に、iframe タグ、src は適当に何かを指すようにしてあって、表示サイズを０ （＝あえて、隠しておく） <iframe id="otherframe" src="xxxx" width="0px" height="0px"></iframe> 何からのイベントで、load(function(){} )で、印刷プレビューを表示していたのですが、、 $('#otherf…

jQuery 2.x → 3.3.1 upgrade した時、jquery-ui エラー Uncaught TypeError: Cannot read property 'step' of undefined StackoverFlow に書いてあるように、 https://stackoverflow.com/questions/45356723/jquery-ui-cannot-read-property-step-of-undefin…

JavaScript で抑制します。 window.addEventListener('dragover', function(ev){ ev.preventDefault(); }, false); window.addEventListener('drop', function(ev){ ev.preventDefault(); ev.stopPropagation(); }, false); これで、マウスでＰＣのローカル…

Python で年の週、を取得するのは、datetime の isocalendar 3 要素のタプル (ISO 年、ISO 週番号、ISO 曜日) が返ってきます。 import datetimetoday = datetime.datetime.today() weekNumber = today.isocalendar()[1] print(weekNumber)しかし、月曜始ま…

stackoverflow.com

chart.js レスポンシブ指定で描いたグラフが、ウィンドウのリサイズで canvas の縦横比での リサイズがうまくいかなくてグラフが揺れるように振動してしまうことがある。 表示サイズ(canvas.style.width、canvas.style.height)に対して、 キャンバスのレンダ…

Chart.js で折れ線グラフの交点単純な Ｘ軸：double 値、Ｙ軸：double 値 のパターンを先日書いたので、 今回は、Ｘ軸：時刻、Ｙ軸：double 値 の線グラフの交点である。 プロットするデータの型は、先日書いた中の Ploter クラスである。ｘ軸である x は、d…

表題に挙げた Wicket で捕捉して処理する前に、そもそも jQuery ui Datepicker の change イベントは 通常の change イベントハンドラでは処理できず、オプション onSelect でハンドラ指定するのはマニュアルに書いてあるとおり有名である。 onSelect で指定…

jQuery AJAX通信でHTTPリクエストヘッダに任意のコードを付与するには、 headers{ }, を付ければ良いのだが、 折角なので、Wicket でページ表示のタイミング＝Page コンストラクタ実行で付与する値を決めて 送るようにする。 ページが読込む JavaScript は、…