当前位置:主页 > JavsScript库 > 其它 >

JavaScript 中可折叠、可排序、可切换的数据树 - Pickle Tree
栏目分类:其它   发布日期:2021-09-16   浏览次数:

Pickle Tree 是一个 JavaScript 树视图插件,用于从分层数据呈现可折叠、可排序(可拖动)的多级树视图,带有iOS 风格的开关,允许用户打开/关闭节点。

如何使用它:

1. 将样式表 pickletree.css 和 JavaScript pickletree.js 插入到文档中。

<link rel="stylesheet" href="src/pickletree.css" /> 
<script src="src/pickletree.js"></script>

2. 默认情况下,Pickle Tree 使用 Font Awesome 来展开/折叠/菜单图标。

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

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

<div id="div_tree"></div>

4. 树的示例数据。

const myData = [{ 
      n_id: 1, 
      n_title: 'Item 1', 
      n_parentid: 0, 
      n_checked: true, 
      n_elements: [{ 
        icon: 'fa fa-edit', // 图标类
        标题: 'Edit', 
        onClick: ( node) => { 
          console.log('edit - ' + node.id); 
        } 
      }, { 
        icon: 'fa fa-trash', 
        title: 'Delete', 
        onClick: (node) => { 
          console.log('delete - ' + node.id); 
        } 
      }], 
      }, { 
      n_id: 2, 
      n_title: 'Item 2', 
      n_parentid: 0 
      },
      n_title: 'Item 3', 
      n_parentid: 0 
      }, { 
      n_id: 4, 
      n_title: 'Item 1-1', 
      n_parentid: 1 
      }, { 
      n_id: 5, 
      n_title: 'Item 1-2', 
      n_parentid: 1 
      }, { 
      n_id: 10, 
      n_title: 'Item 1-2-1', 
      n_parentid: 5 
      }, { 
      n_id: 11, 
      n_title: 'Item 1-2-1-1', 
      n_parentid: 10 
      }, { 
      n_id: 6, 
      n_title : '项目 2-1', 
      n_parentid: 2 
      }, { 
      n_id: 7, 
      n_title: '项目 2-2', 
      n_parentid:2 
      }, {
      n_id: 8, 
      n_title: 'Item 2-3', 
      n_parentid: 2 
      }, { 
      n_id: 9, 
      n_title: 'Item 1-2-2', 
      n_parentid: 5 
}]

5. 在您刚刚创建的容器元素内渲染一个树视图。

const tree = new PickleTree({
      c_target: 'div_tree',
      c_config: {
        // 这里的选项
      },
      c_data: myData
});

6. 自定义树的可能选项。

const tree = new PickleTree({ 
      c_target: 'div_tree', 
      c_config: { 
        // 日志打开/关闭
        logMode: false, 
 
        // 启用开关
        switchMode: false, 
 
        // 自动选择父节点和子节点
        autoChild: true, 
        autoParent: true, 
 
        // 自定义折叠图标
        foldedIcon: 'fa fa-plus', 
 
        // 展开图标
        unFoldedIcon: 'fa fa-minus', 
 
        // 菜单图标
        menuIcon: ['fa', 'fa-list-ul'], 
 
        // 折叠页面上的所有节点都加载
        foldedStatus: false,
 
        // 通过拖放拖动启用排序
        drag: false
      }, 
      c_data: myData 
});

7. 回调函数。

const tree = new PickleTree({
      c_target: 'div_tree',
      rowCreateCallback: (node) => {
        //console.log(node)
      },
      switchCallback: (node) => {
        //console.log(node)
      },
      drawCallback: () => {
        //console.log('tree drawed ..');
      },
      dragCallback: (node) => {
        console.log(node);
      },
      dropCallback: (node) => {
        console.log(node);
      },
      c_data: myData
});

8. API 方法。

// 获取节点
let myNode = tree.getNode('5');
 
//删除一个节点
myNode.deleteNode();
 
// 切换节点
myNode.toggleNode();
 
// 获取子节点
myNode.getChilds();
 
// 选中/取消选中一个节点
myNode.toggleCheck(true / false);
 
// 更新节点
myNode.title = '我的节点的新标题';
old_node.updateNode();
 
// 创建一个新节点
let new_node = tree.createNode({
  n_value: 5,
  n_title: '项目 5',
  n_id: 5,
  n_elements: [],
  n_parent: tree.getNode(4),
  n_checkStatus: false
});

官方网站:https://github.com/freakazoid41/pickle_tree

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