当前位置:主页 > JavsScript库 > 表单 >

带有单选按钮的分层树 - ninotree
栏目分类:表单   发布日期:2021-08-15   浏览次数:

ninotree 是一个超小型的 JavaScript 树视图 UI 库,它可以从 JavaScript 数组和对象动态呈现分层树。 

每个树节点的开头都显示一个单选按钮,它使您可以像处理表单一样处理节点选择。

如何使用它:

1. 该库需要 Bootstrap 和 Font Awesome 以获得更好的 UI。

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />

<link rel="stylesheet" href="/path/to/cdn/fontawesome.min.css" />

2. 在文档中加载样式表 ninotree.css 和 JavaScript ninotree.js。

<link rel="stylesheet" href="ninotree.css" />

<script src="ninotree.js"></script>

3. 创建一个容器来容纳树。

<div id='tree'></div>

4. 覆盖默认的树数据。

data: [

  {

      id: 1,

      name: 'A',

      selected: false,

      childs: [

          {

              id: 5,

              name: 'A-1',

              selected: true,

              childs: []

          },

          {

              id: 6,

              name: 'A-2',

              selected: false,

              childs: [

                  {

                      id: 7,

                      name: 'A2-1',

                      selected: false,

                      childs: []

                  }

              ]

          },

          {

              id: 8,

              name: 'A-3',

              selected: false,

              childs: []

          }

      ]

  },

  {

      id: 2,

      name: 'B',

      selected: false,

      childs: [

          {

              id: 3,

              name: 'B-1',

              selected: false,

              childs: []

          },

          {

              id: 4,

              name: 'B-2',

              selected: false,

              childs: []

          }

      ]

  }

],

官方网站:https://github.com/nvaghari/ninotree

相关热词: ninotree分层树

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库