Enhanced by Google
Back
レコード一覧画面に下記のデータ形式のデータをツリー表示したい
カスタマイズでも良いので方法を教えてください。
岡原徹さん
お世話になっております。
一覧画面で複雑にカスタマイズしたデータを表示するには、カスタマイズビューを用いると良いです。https://jp.cybozu.help/k/ja/user/app_settings/view/set_view.html#view_set_view_2030https://developer.cybozu.io/hc/ja/articles/202905604
一般に、集計データを表示する場合はHTMLのtable要素を用いることが多いです。https://developer.mozilla.org/ja/docs/Web/HTML/Element/table
今回のやりたいことのように、セルを縦に結合したい場合はrowspanを用いると良いです。https://programming-study.com/technology/html-rowspan/
動的にデータを取得してHTMLに反映する必要があるので、JavaScriptからHTMLを操作できるDOMというものを勉強すると良いです。https://eng-entrance.com/what-is-dom
@江田様
コメントありがとうございます。
カスタマイズは初心者のため参考になります。
素人ながら調べたところ「jsTree」というライブラリでツリー表示ができるみたいですが
kintone一覧画面で本ライブラリを利用してツリービューは実現できるのでしょうか?
なお、ツリー表示後は表示のみでデータの変更(追加・変更・削除)は求めておりません。
なるほど。ライブラリという選択肢がありましたね。
上でご提示いただいたやりたいこと通りの見た目にはならないと思いますが、公式デモのような見た目にはできるかと思います。https://www.jstree.com/demo/
下記を参考に、kintoneのレコードから整形すれば実装できるかと思います。https://www.jstree.com/docs/json/
もしくは、TISさんのプラグインでもありそうですね。紹介記事を見たところ「ルックアップ/ラジオボタン/ドロップダウンフィールド」のみでしか分類できないかもしれませんが。https://www.tis2010.jp/treeviewer/
3件のコメント
岡原徹さん
お世話になっております。
一覧画面で複雑にカスタマイズしたデータを表示するには、カスタマイズビューを用いると良いです。
https://jp.cybozu.help/k/ja/user/app_settings/view/set_view.html#view_set_view_2030
https://developer.cybozu.io/hc/ja/articles/202905604
一般に、集計データを表示する場合はHTMLのtable要素を用いることが多いです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/table
今回のやりたいことのように、セルを縦に結合したい場合はrowspanを用いると良いです。
https://programming-study.com/technology/html-rowspan/
動的にデータを取得してHTMLに反映する必要があるので、JavaScriptからHTMLを操作できるDOMというものを勉強すると良いです。
https://eng-entrance.com/what-is-dom
@江田様
コメントありがとうございます。
カスタマイズは初心者のため参考になります。
素人ながら調べたところ「jsTree」というライブラリでツリー表示ができるみたいですが
kintone一覧画面で本ライブラリを利用してツリービューは実現できるのでしょうか?
なお、ツリー表示後は表示のみでデータの変更(追加・変更・削除)は求めておりません。
岡原徹さん
お世話になっております。
なるほど。ライブラリという選択肢がありましたね。
上でご提示いただいたやりたいこと通りの見た目にはならないと思いますが、公式デモのような見た目にはできるかと思います。
https://www.jstree.com/demo/
下記を参考に、kintoneのレコードから整形すれば実装できるかと思います。
https://www.jstree.com/docs/json/
もしくは、TISさんのプラグインでもありそうですね。
紹介記事を見たところ「ルックアップ/ラジオボタン/ドロップダウンフィールド」のみでしか分類できないかもしれませんが。
https://www.tis2010.jp/treeviewer/