Grid.js、半角スペースの連続がHTML的に表示で1つに問題、ゆえ検索機能不整合問題。解決
正式名称：Grid.jsでJSONから作った表の中身の連続した半角スペースがHTML的に1つになってしまい、検索機能はJSONデータから参照するために不整合が起きる問題のひとつの解決策
長いと怒られたから Resolved a problem in which consecutive one-byte spaces in the contents of a table created from JSON in Grid.js become one in HTML, causing inconsistencies because the search function refers to them from the JSON data.
Grid.js
フロントエンドでJSONとかから表を作ってくれる神JSライブラリ。ソート機能とか検索機能も簡単に実装できる神
前提
DBからPHPでテーブルのJSONを作り、フロントのGrid.jsで表にしてもらっている。
表の中身の連続した半角スペースがHTML的に1つになってしまい
HTML的にそうなる。 (2つ)も (3つ)も (1つ)になる
↑それみろ！原稿上はその数あるけどブラウザで見たら全部1つになっとる
Grid.jsは悪くない
解決するためには半角スペースを にすればよい
って昔から言われている
が、Grid.jsが使用するための元データのJSONで という文字列として扱われてしまい実際に描画される表にもそのまま表示されてしまう
ので、 のUnicodeの\u00A0にする
HTML上に表示される頃には になり として出ている
ちゃんと元の数を保って出てくれた
私はそのデータがPHPの頃に
$bbb = str_replace(" ", "\u00A0", $aaa);
(JSONにするデータの を\u00A0に置換する)
検索機能はJSONデータから参照するために不整合が起きる
JSONの中では\u00A0だが、検索窓(Grid.jsによる提供機能)から検索する際はスペースキー(キーボードの真ん中のなんにも書いてなくて横長のやつ)押して 入れるよね
HTMLに表示されている文字列ではなくJSONの中の文字列を参照して検索するため、 は\u00A0ではないので正しく検索できない
ので、Grid.jsの設定時のオブジェクトの中で検索時の検索元データ(JSONにあるやつ)をいじる定義をできるのがあるのでそれをする
search: {
selector: (cell, rowIndex, cellIndex) => cell.replace(/\u00A0/g, " ")
}
(検索時、JSNOの\u00A0を に置換して参照してもらう)
いらん気づき
原稿で文頭に (バックスラッシュ半スペバックスラッシュ)置くと中身消えるな↓
↓これは中身なし
``
準備はしていたものの今更はじめてのGitHubでZenn
ええやんええやん
Discussion