# 一覧画面にツリー表示したい

**URL:** <https://community.cybozu.dev/t/topic/7111>\
**Category:** kintone 開発相談\
**Created:** [2021 年 5 月 11 日午前 4:49 UTC](https://community.cybozu.dev/t/topic/7111 "2021-05-11T04:49:21Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account1355](https://avatars.discourse-cdn.com/v4/letter/l/eb9ed0/32.png) [@Legacy\_Account1355](https://community.cybozu.dev/u/Legacy_Account1355)\
**Post date:** [2021 年 5 月 11 日午前 4:49 UTC](https://community.cybozu.dev/t/topic/7111/1 "2021-05-11T04:49:21Z")

</div>

レコード一覧画面に下記のデータ形式のデータをツリー表示したい

カスタマイズでも良いので方法を教えてください。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1740](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)\
**Post date:** [2021 年 5 月 11 日午前 7:38 UTC](https://community.cybozu.dev/t/topic/7111/2 "2021-05-11T07:38:21Z")

</div>

岡原徹さん

お世話になっております。

一覧画面で複雑にカスタマイズしたデータを表示するには、カスタマイズビューを用いると良いです。  
[https://jp.cybozu.help/k/ja/user/app\_settings/view/set\_view.html#view\_set\_view\_2030](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](https://developer.cybozu.io/hc/ja/articles/202905604)

一般に、集計データを表示する場合はHTMLのtable要素を用いることが多いです。  
[https://developer.mozilla.org/ja/docs/Web/HTML/Element/table](https://developer.mozilla.org/ja/docs/Web/HTML/Element/table)

今回のやりたいことのように、セルを縦に結合したい場合はrowspanを用いると良いです。  
[https://programming-study.com/technology/html-rowspan/](https://programming-study.com/technology/html-rowspan/)

動的にデータを取得してHTMLに反映する必要があるので、JavaScriptからHTMLを操作できるDOMというものを勉強すると良いです。  
[https://eng-entrance.com/what-is-dom](https://eng-entrance.com/what-is-dom)

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1355](https://avatars.discourse-cdn.com/v4/letter/l/eb9ed0/32.png) [@Legacy\_Account1355](https://community.cybozu.dev/u/Legacy_Account1355)\
**Post date:** [2021 年 5 月 12 日午後 11:11 UTC](https://community.cybozu.dev/t/topic/7111/3 "2021-05-12T23:11:02Z")

</div>

@江田様

コメントありがとうございます。

カスタマイズは初心者のため参考になります。

素人ながら調べたところ「jsTree」というライブラリでツリー表示ができるみたいですが

kintone一覧画面で本ライブラリを利用してツリービューは実現できるのでしょうか？

なお、ツリー表示後は表示のみでデータの変更（追加・変更・削除）は求めておりません。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1740](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)\
**Post date:** [2021 年 5 月 13 日午前 12:13 UTC](https://community.cybozu.dev/t/topic/7111/4 "2021-05-13T00:13:37Z")

</div>

岡原徹さん

お世話になっております。

なるほど。ライブラリという選択肢がありましたね。

上でご提示いただいたやりたいこと通りの見た目にはならないと思いますが、公式デモのような見た目にはできるかと思います。  
[https://www.jstree.com/demo/](https://www.jstree.com/demo/)

下記を参考に、kintoneのレコードから整形すれば実装できるかと思います。  
[https://www.jstree.com/docs/json/](https://www.jstree.com/docs/json/)

もしくは、TISさんのプラグインでもありそうですね。  
紹介記事を見たところ「ルックアップ/ラジオボタン/ドロップダウンフィールド」のみでしか分類できないかもしれませんが。  
[https://www.tis2010.jp/treeviewer/](https://www.tis2010.jp/treeviewer/)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2025 年 4 月 25 日午前 6:04 UTC](https://community.cybozu.dev/t/topic/7111/5 "2025-04-25T06:04:29Z")

</div>

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。
