帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

JS(Pickle Tree)可拖拽排序、下拉折叠树菜单特效插件

帝国模板之家 2020-11-17 网页特效 评论

Pickle Tree是一个JavaScript树视图插件,用于呈现可折叠、可排序(draggable)多级分层数据树状图,使用iOS风格切换开关,用户打开/关闭节点。

使用方法:

1.在文档中插入样式表pickletree.css和pickletree.js文件。

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

2.默认情况下,Pickle树使用字体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', // icon class
        title: '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_id: 3,
      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: 'Item 2-1',
      n_parentid: 2
      }, {
      n_id: 7,
      n_title: 'Item 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: {
        // options here
      },
      c_data: myData
});

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

const tree = new PickleTree({
      c_target: 'div_tree',
      c_config: {
        // logs open/close
        logMode: false,

        // enables switches
        switchMode: false,

        // auto selects parent & child nodes
        autoChild: true,
        autoParent: true,

        // custom fold icon
        foldedIcon: 'fa fa-plus',

        //unfold icon
        unFoldedIcon: 'fa fa-minus',

        // menu icon
        menuIcon: ['fa', 'fa-list-ul'],

        // collapse all nodes on page load
        foldedStatus: false,

        // enables sortable via drag and drop
        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方法

// get node
let myNode = tree.getNode('5');

// delete a node
myNode.deleteNode();

// toggle a node
myNode.toggleNode();

// get child nodes
myNode.getChilds();

// check / uncheck a node
myNode.toggleCheck(true / false);

// update a node
myNode.title = 'A new title for my node ';
old_node.updateNode();

// create a new node
let new_node = tree.createNode({
  n_value: 5,
  n_title: 'Item 5',
  n_id: 5,
  n_elements: [],
  n_parent: tree.getNode(4),
  n_checkStatus: false
});

会员登陆后即可下载资源文件。更多好用网站特效插件,请关注帝国模板之家

就像朝日会耀眼一样,有一颗明亮的心,一样会照亮人生。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

帝国手册

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言