ワークアラウンドを探ってそれをネタにしようかとゴニョってたのに、最新版では直っておった。
initialHeaderFilter の問題のせいで 4.9.3 にダウングレードせざるを得なかった話でやったことそのものは、まぁ無駄というほどでもないだろう。ワタシが気付いたのは initialHeaderFilter だけだが、きっと今後も似たようなことがあれば、再び「ダウングレードしてみたらどうか」の検討をするハメになるのであろうから。
で、「喜びいさもう」かと思ったのだけれど、「5.0 ならでは」のネタをまだ一つしか見つけらておらず、見つけたそれも用途をまだ思いついてなくてネタにならん。よって「5.0.7 に乗り換えたぜベイベー」と言うだけ、てなことに。それじゃぁあんまりなので、「5.0 ならではではないけれどワタシにとってはお初」ネタを書いとこうかと。
の前に、みつけた「5.0 ならでは」はこれね:
1 var table = new Tabulator("#actor_basinf", {
2 /* ... */
3 });
4 table.on("dataProcessed", function () { /* on が 4.9 までは使えない */
5 });
4.9 では on は使えない。これをネタにしようかと思ったのは、「initialHeaderFilter が壊れてる問題のワークアラウンドをこれを使って書けないだろうか?」と思ったから。出来なくて困ってたが、ふと 5.0.7 がリリース済であることに気付き、乗り換えてみたら直ってた、てのがオレ的な経緯。こういうことをしようと思ったんだけどダメだったんだわ:
1 var table = new Tabulator("#actor_basinf", {
2 /* ... */
3 });
4 table.on("dataProcessed", function () { /* on が 4.9 までは使えない */
5 /* field="redi" の input フィールドに値は入るが、フィルタは起動しない。 */
6 $("div").find("[tabulator-field=redi]").find("input").val("^$").change();
7
8 /*
9 * ここで setFilter("redi", "regex", "^$") すればこれは動くけれど、本物のヘッダ
10 * フィルタのほうがここで指定したフィルタを把握していないために redi の input を
11 * ユーザが操作してもこの "^$" が無効化されず、結果としてユーザがフィルタ操作
12 * 出来なくなる。
13 */
14 });
まぁこういうイベントハンドリングは、きっとそのうちお世話になるであろう。そのときでいいか。
「5.0 ならではではないがワタシにとってはお初で比較的特筆しても良い」部分に関係する部分だけ抽出するとこんな感じ:
1 <html>
2 <head jang="ja">
3 <meta charset="UTF-8">
4
5 <!--
6 Tabulator 公式ドキュメントのデモが書いているカスタムメニューが Font Awesome
7 を使ってる。アタシもそれにならう。
8 -->
9 <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
10 <link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.0.7/css/tabulator_site.min.css" rel="stylesheet">
11 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.0.7/js/tabulator.min.js"></script>
12 <script type="text/javascript" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>
13
14
15 <!-- Tabulator ではなく csv parser として jquery-csv を使いたくて、のための jquery -->
16 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
17 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.21/jquery.csv.js"></script>
18
19 <!-- オレのデータ -->
20 <script type="text/javascript" src="actor_basinf_data.js"></script>
21
22 </head>
23 <body>
24 <!-- ... -->
25 <div id="actor_basinf"></div>
26 <!-- ... -->
27 <script>
28 /* ... */
29 /*
30 * function headerMenu は公式サイトのデモからのほぼ丸パクリだが、
31 * (1)デモでは function headerMenu を headerMenu として使っているが
32 * ワタシのでは headerContextMenu に使っている。headerMenu だと
33 * メニューボタンと他のコンポーネント(ラベル、input、...)と重なって
34 * しまう問題を抱えている、少なくとも Tabulator 5.0.7 までのものは。
35 * (2)!column.getDefinition().title 判定はワタシが追加したが、これは
36 * columns 定義で title を省略している際に検討必要なコード。
37 * 「undefined」を出力してしまうので。ただ、ワタシは結局 title 省略の
38 * ほうをやめた。
39 * (3)コメントがはっきり言うように「using font awesome icons」だが
40 * 少なくとも Font Awesome 4.x ではなく 5+ を期待してるらしい。
41 */
42 /* define column header menu as column visibility toggle */
43 var headerMenu = function() {
44 var menu = [];
45 var columns = this.getColumns();
46
47 for (let column of columns) {
48 if (!column.getDefinition().title) {
49 continue;
50 }
51
52 /* create checkbox element using font awesome icons */
53 let icon = document.createElement("i");
54 icon.classList.add("fas");
55 icon.classList.add(column.isVisible() ? "fa-check-square" : "fa-square");
56
57 /* build label */
58 let label = document.createElement("span");
59 let title = document.createElement("span");
60
61 title.textContent = " " + column.getDefinition().title;
62
63 label.appendChild(icon);
64 label.appendChild(title);
65
66 /* create menu item */
67 menu.push({
68 label:label,
69 action: function (e) {
70 /* prevent menu closing */
71 e.stopPropagation();
72
73 /* toggle current column visibility */
74 column.toggle();
75
76 /* change menu item icon */
77 if (column.isVisible()) {
78 icon.classList.remove("fa-square");
79 icon.classList.add("fa-check-square");
80 } else {
81 icon.classList.remove("fa-check-square");
82 icon.classList.add("fa-square");
83 }
84 }
85 });
86 }
87
88 return menu;
89 };
90
91
92 var table = new Tabulator("#actor_basinf", {
93 /* ... */
94 "columns": [
95 /* ... */
96 {
97 "field": "nm",
98 "title": "名前",
99 "headerFilter": "input",
100 "headerFilterFunc": "regex",
101 "headerContextMenu": headerMenu,
102 },
103 /* ... */
104 {
105 "field": "tea",
106 "title": "共同作業者",
107 "headerFilter": "input",
108 "headerFilterFunc": "regex",
109 "headerContextMenu": headerMenu,
110 },
111 /* ... */
112 ],
113 /* Tabulator 5.0.6 では initialHeaderFilter を有効にすると動作しないの注意。*/
114 "initialHeaderFilter": [
115 {
116 "field": "redi",
117 "value": "^$",
118 },
119 ],
120 /*
121 * 日本語でフィルタする際、IME の切り替えなどによる時間が思った以上にかかっていて、
122 * デフォルトの 300ms では、へたすると「ゆみり」と打とうとして「IME 切り替え + y」
123 * くらいで反応し始めてしまい、これがなかなかに不愉快。想像よりずっと大きな値に
124 * しておいた方がよい。
125 */
126 "headerFilterLiveFilterDelay": 1800,
127
128 /*
129 * clipboard 機能は「download」機能に感じるのと同じ物足りなさがあるけれど、
130 * edittable でないテーブルではコピー機能があるとありがたいだろうとは思う。
131 * ただこれ、「感覚フィードバック」がない(Ctrl-c しても視覚効果や効果音がある
132 * わけではない)のが問題よのぉ。
133 */
134 "clipboard": "copy", /* ワタシのは読み取り専用なので copy でいい */
135 "clipboardCopyRowRange": "active", /* デフォルトが all なのはムゴい... */
136
137 "layout": "fitColumns",
138 "data": actor_basinf_data
139 });
Clipboard は「やってみた」以上のものではない。コメントした通り、機能的には「ないよりはマシ」程度のもの。それと「感覚フィードバック」の問題は地味にいやらしい。
headerFilterLiveFilterDelay はコメントに書いた通り。データ量が多くなるほどこういう細かい制御は大事。ハングアップしたかのように見える状態にすぐに陥る、措置しとかないと。
ワタシ的にめいんえべんとが メニューと列の表示非表示切り替え。ほんとはこれに手を出すなら「設定の永続化」も一緒に検討すべきなんだけど、まぁ今回は後回して、メニューと列非表示だけ試みた。いいよね使いやすい:
てなわけで「wikipedia をスクレイプして「声優世代表のおとも html」、な、ver 14 だと思う」:
