❤
npm
Sign UpSign In

@ctmobile/ui-tree

1.0.4 • Public • Published

Tree

基本布局

  • ct-tree - 整体容器

初始化


import TreeFactory from '@ctmobile/ui-tree';
import '@ctmobile/ui-tree/lib/tree.less';
import '@ctmobile/ui-tree/lib/themes/default/tree.less';
TreeFactory.create(document.getElementById('tree'),{
  nodeConfig: {
    config: {
      loadType: 'local',
      expand: true,
      type: 'normal',
    },
    data: [
      {
        label: '节点1',
        leaf: false,
        expand: true,
        attr: {
          id: '1',
        },
        children: [
          {
            label: '节点1.1',
            leaf: true
          },
          {
            label: '节点1.2',
            leaf: true
          }
        ],
      }
    ]
});
名称 说明
{HtmlElement} - el 整体元素
{object} - config

配置

listeners {Object} - 事件

nodeConfig {Object} - 节点的配置

| {object} - config 节点的全局配置 |

label {String} - 节点文本

icon {String} - 节点的icon(font-awesome)

iconColor {String} - 节点icon颜色

attr {Object} - 节点的自定义属性

leaf {boolean} - [true | false] 是否是叶子节点

leaf {boolean} - [true | false] 是否是叶子节点

loadType {String} - [local | remote] 节点的数据类型 local本地数据，remote远程数据

expand {boolean} - [true | false] true 展开, false 关闭 默认展开, 如果loadType为remote

type {String} - [normal | checkbox | radio] 节点的input类型

checked {boolean} - [true | false] 如果type是checkbox 是否选中

children {Array} - 子节点 | | {Array} - data 节点的配置 | | |

例子

js

normal(普通)


TreeFactory.create(document.getElementById('tree-normal'), {
  nodeConfig: {
    config: Object.assign({}, globalConfig),
    data: [{
      label: '节点1',
      expand: true,
      leaf: false,
      children: [{
        label: '节点1.1',
        expand: true,
        leaf: true,
      }, {
        label: '节点1.2',
        expand: true,
        leaf: true,
      }],
    }, {
      label: '节点2',
      expand: true,
      leaf: true,
    }],
  },
});

icon


TreeFactory.create(document.getElementById('tree-icon'), {
  nodeConfig: {
    config: Object.assign({}, globalConfig),
    data: [{
      label: '节点1',
      icon: 'folder',
      expand: true,
      leaf: false,
      children: [{
        label: '节点1.1',
        icon: 'folder',
        expand: true,
        leaf: true,
      }, {
        label: '节点1.2',
        icon: 'folder',
        expand: true,
        leaf: true,
      }],
    }, {
      label: '节点2',
      icon: 'folder',
      expand: true,
      leaf: true,
    }],
  },
});

iconColor


TreeFactory.create(document.getElementById('tree-iconColor'), {
  nodeConfig: {
    config: Object.assign({}, globalConfig),
    data: [{
      label: '节点1',
      icon: 'folder',
      iconColor: '#ccc',
      expand: true,
      leaf: false,
      children: [{
        label: '节点1.1',
        icon: 'folder',
        iconColor: '#ccc',
        expand: true,
        leaf: true,
      }, {
        label: '节点1.2',
        icon: 'folder',
        iconColor: '#ccc',
        expand: true,
        leaf: true,
      }],
    }, {
      label: '节点2',
      icon: 'folder',
      iconColor: '#ccc',
      expand: true,
      leaf: true,
    }],
  },
});

remoteLoad


TreeFactory.create(document.getElementById('tree-remoteLoad'), {
  listeners: {
    loadRemote: (n, success, error, complete) => {
      setTimeout(() => {
        success([{
          label: 'remote1',
          icon: 'folder',
          iconColor: '#ccc',
          leaf: false,
          loadType: 'remote',
        },
        {
          label: 'remote2',
          icon: 'folder',
          iconColor: '#ccc',
          loadType: 'remote',
          leaf: false,
        }]);
      }, 2000);
    },
  },
  nodeConfig: {
    config: Object.assign({}, globalConfig),
    data: [{
      label: '节点1',
      icon: 'folder',
      iconColor: '#ccc',
      loadType: 'remote',
      expand: true,
      leaf: false,
    }, {
      label: '节点2',
      icon: 'folder',
      iconColor: '#ccc',
      expand: true,
      leaf: true,
    }],
  },
});

checkbox


TreeFactory.create(document.getElementById('tree-checkbox'), {
  nodeConfig: {
    config: Object.assign({}, globalConfig),
    data: [{
      label: '节点1',
      icon: 'folder',
      iconColor: '#ccc',
      type: 'checkbox',
      expand: true,
      leaf: false,
      children: [{
        label: '节点1.1',
        icon: 'folder',
        iconColor: '#ccc',
        type: 'checkbox',
        checked: true,
        leaf: true,
      }, {
        label: '节点1.2',
        icon: 'folder',
        iconColor: '#ccc',
        type: 'checkbox',
        checked: false,
        leaf: true,
      }],
    }, {
      label: '节点2',
      icon: 'folder',
      iconColor: '#ccc',
      expand: true,
      type: 'checkbox',
      checked: false,
      leaf: true,
    }],
  },
});

checkbox-remote


TreeFactory.create(document.getElementById('tree-checkbox-remote'), {
  listeners: {
    loadRemote: (n, success, error, complete) => {
      setTimeout(() => {
        success([{
          label: 'remote1',
          icon: 'folder',
          iconColor: '#ccc',
          leaf: false,
          loadType: 'remote',
          type: 'checkbox',
          checked: true,
          expand: true,
        },
        {
          label: 'remote2',
          icon: 'folder',
          iconColor: '#ccc',
          loadType: 'remote',
          leaf: false,
          type: 'checkbox',
          checked: false,
          expand: true,
        }]);
      }, 2000);
    },
  },
  nodeConfig: {
    config: Object.assign({}, globalConfig),
    data: [{
      label: '节点1',
      icon: 'folder',
      iconColor: '#ccc',
      loadType: 'remote',
      type: 'checkbox',
      expand: true,
      leaf: false,
    }, {
      label: '节点2',
      icon: 'folder',
      iconColor: '#ccc',
      expand: true,
      type: 'checkbox',
      checked: false,
      leaf: true,
    }],
  },
});

appendChildren


TreeFactory.create(document.getElementById('tree-appendChildren'), {
  listeners: {
    click: (treeNode) => {
      const config = {
        label: 'newNode',
        leaf: true,
        expand: true,
        icon: 'folder',
        iconColor: '#ccc',
      };
      treeNode.appendByConfig(config);
    },
  },
  nodeConfig: {
    config: Object.assign({}, globalConfig),
    data: [{
      label: 'root',
      icon: 'folder',
      iconColor: '#ccc',
      expand: true,
      leaf: true,
    }],
  },
});

appendRoot


const appendRootTree = TreeFactory.create(document.getElementById('tree-appendRoot'), {
  listeners: {
    click: () => {
      const config = {
        label: 'newRootNode',
        leaf: true,
        expand: true,
        icon: 'folder',
        iconColor: '#ccc',
      };
      appendRootTree.appendByConfig(config);
    },
  },
  nodeConfig: {
    config: Object.assign({}, globalConfig),
    data: [{
      label: 'root',
      icon: 'folder',
      iconColor: '#ccc',
      expand: true,
      leaf: true,
    }],
  },
});

prependChildren


TreeFactory.create(document.getElementById('tree-prependChildren'), {
  listeners: {
    click: (treeNode) => {
      const config = {
        label: 'newNode',
        leaf: true,
        expand: true,
        icon: 'folder',
        iconColor: '#ccc',
      };
      treeNode.prependByConfig(config);
    },
  },
  nodeConfig: {
    config: Object.assign({}, globalConfig),
    data: [{
      label: 'root',
      icon: 'folder',
      iconColor: '#ccc',
      expand: true,
      leaf: true,
    }],
  },
});

prependRoot


const prependRootTree = TreeFactory.create(document.getElementById('tree-prependRoot'), {
  listeners: {
    click: () => {
      const config = {
        label: 'newRootNode',
        leaf: true,
        expand: true,
        icon: 'folder',
        iconColor: '#ccc',
      };
      prependRootTree.prependByConfig(config);
    },
  },
  nodeConfig: {
    config: Object.assign({}, globalConfig),
    data: [{
      label: 'root',
      icon: 'folder',
      iconColor: '#ccc',
      expand: true,
      leaf: true,
    }],
  },
});

insert


const insertChildrenTree = TreeFactory.create(document.getElementById('tree-insertChildren'), {
  listeners: {
    click: (treeNode) => {
      const config = {
        label: 'newRootNode',
        leaf: true,
        expand: true,
        icon: 'folder',
        iconColor: '#ccc',
      };

      const parentNode = treeNode.getParentNode();
      if (parentNode) {
        parentNode.insertBeforeByConfig(treeNode, config);
      } else {
        insertChildrenTree.insertBeforeByConfig(treeNode, config);
      }
    },
  },
  nodeConfig: {
    config: Object.assign({}, globalConfig),
    data: [{
      label: 'root',
      icon: 'folder',
      iconColor: '#ccc',
      expand: true,
      leaf: false,
      children: [{
        label: 'node1',
        icon: 'folder',
        iconColor: '#ccc',
        leaf: true,
      }, {
        label: 'node2',
        icon: 'folder',
        iconColor: '#ccc',
        leaf: true,
      }],
    }],
  },
});

remove


const removeChildrenTree = TreeFactory.create(document.getElementById('tree-remove'), {
  listeners: {
    click: (treeNode) => {
      const parentNode = treeNode.getParentNode();
      if (parentNode) {
        parentNode.removeChildren(treeNode);
      } else {
        removeChildrenTree.removeChildren(treeNode);
      }
    },
  },
  nodeConfig: {
    config: Object.assign({}, globalConfig),
    data: [{
      label: 'root',
      icon: 'folder',
      iconColor: '#ccc',
      expand: true,
      leaf: false,
      children: [{
        label: 'node1',
        icon: 'folder',
        iconColor: '#ccc',
        leaf: true,
      }, {
        label: 'node2',
        icon: 'folder',
        iconColor: '#ccc',
        leaf: true,
      }],
    }],
  },
});

expand


TreeFactory.create(document.getElementById('tree-expand'), {
  listeners: {
    expand: (n, expand) => {
      alert(expand);
    },
  },
  nodeConfig: {
    config: Object.assign({}, globalConfig),
    data: [{
      label: 'root',
      icon: 'folder',
      iconColor: '#ccc',
      expand: true,
      leaf: false,
      children: [{
        label: 'node1',
        icon: 'folder',
        iconColor: '#ccc',
        leaf: true,
      }, {
        label: 'node2',
        icon: 'folder',
        iconColor: '#ccc',
        leaf: true,
      }],
    }],
  },
});

click


TreeFactory.create(document.getElementById('tree-click'), {
  listeners: {
    click: (n) => {
      alert(n);
    },
  },
  nodeConfig: {
    config: Object.assign({}, globalConfig),
    data: [{
      label: 'root',
      icon: 'folder',
      iconColor: '#ccc',
      expand: true,
      leaf: false,
      children: [{
        label: 'node1',
        icon: 'folder',
        iconColor: '#ccc',
        leaf: true,
      }, {
        label: 'node2',
        icon: 'folder',
        iconColor: '#ccc',
        leaf: true,
      }],
    }],
  },
});

方法

.Tree

renderChildren(params) - 渲染children

  • parentNode-TreeNodeparentNode
  • globalConfig-ObjectglobalConfig
  • config-Objectconfig

append(treeNode) - 添加节点

  • treeNode-TreeNode节点对象

appendByConfig(config) - 根据配置添加节点

  • config-Object节点配置

prepend(treeNode) - 向前添加节点

  • treeNode-TreeNode节点对象

prependByConfig(config) - 根据配置向前添加节点

  • config-Object节点配置

insertBefore( treeNode, newNode ) - 在指定节点之前插入节点

  • treeNode-TreeNode节点对象
  • newNode-TreeNode新节点对象

insertBeforeByConfig( treeNode, config ) - 根据配置在指定节点之前插入节点

  • treeNode-TreeNode节点对象
  • config-Object节点的配置

insertAfter( treeNode, newNode ) - 在指定节点之后插入节点

  • treeNode-TreeNode节点对象
  • newNode-TreeNode新节点对象

insertAfterByConfig( treeNode, config ) - 根据配置在指定节点之后插入节点

  • treeNode-TreeNode节点对象
  • config-Object节点的配置

replaceNode( treeNode, newNode ) - 替换指定的节点

  • treeNode-TreeNode被替换节点
  • newNode-TreeNode新节点对象

replaceNodeByConfig( treeNode, config ) - 根据配置替换指定节点

  • treeNode-TreeNode被替换节点
  • config-Object节点的配置

removeChildren(treeNode) - 删除孩子节点

  • treeNode-TreeNode要删除的节点

childrens - 返回孩子节点

  • childrens-Array返回的数据

getNodeByAttr( key, value ) - 根据attr获取节点

  • key-String属性
  • value-String值

on(type,handler) - 注册事件

  • type-string 事件类型
  • handler-Function 事件句柄

off(type,handler) - 注销事件

  • type-string 事件类型
  • handler-Function 事件句柄

.TreeNode

append( treeNode, refresh ) - 添加节点

  • treeNode-TreeNode节点对象
  • refresh-boolean是否刷新节点

appendByConfig(config) - 根据配置添加节点

  • config-Object节点配置

prepend(treeNode) - 向前添加节点

  • treeNode-TreeNode节点对象

prependByConfig(config) - 根据配置向前添加节点

  • config-Object节点配置

insertBefore( treeNode, newNode ) - 在指定节点之前插入节点

  • treeNode-TreeNode节点对象
  • newNode-TreeNode新节点对象

insertBeforeByConfig( treeNode, config ) - 根据配置在指定节点之前插入节点

  • treeNode-TreeNode节点对象
  • config-Object节点的配置

insertAfter( treeNode, newNode ) - 在指定节点之后插入节点

  • treeNode-TreeNode节点对象
  • newNode-TreeNode新节点对象

insertAfterByConfig( treeNode, config ) - 根据配置在指定节点之后插入节点

  • treeNode-TreeNode节点对象
  • config-Object节点的配置

replaceNode( treeNode, newNode ) - 替换指定的节点

  • treeNode-TreeNode被替换节点
  • newNode-TreeNode新节点对象

replaceNodeByConfig( treeNode, config ) - 根据配置替换指定节点

  • treeNode-TreeNode被替换节点
  • config-Object节点的配置

removeChildren(treeNode) - 删除孩子节点

  • treeNode-TreeNode要删除的节点

childrens - 返回孩子节点

  • childrens-Array返回的数据

expand - 展开或闭合节点

  • expand-boolean展开或闭合

resetRemoteNode - 重置loadType === 'remote' 的节点使其能够重新载入数据，并且先闭合节点

isExpand - 节点是否展开

  • expand-boolean节点是否展开

getAttr(attr) - 获取属性值

  • attr-String属性

setAttr( key, value ) - 设置属性值

  • key-String属性
  • value-String值

hasAttr( key, value ) - 是否有属性为key且值为value的属性

  • key-String属性
  • value-String值

getLabel - 获取节点label

  • label-String获取节点label

setLabel( label) - 设置节点的label

  • label-String节点的label

getIcon - 获取节点icon

  • icon-String节点的icon

setIcon( icon) - 设置节点的icon

  • icon-String节点的icon(font-awesome)

getIconColor - 获取节点iconColor

  • iconColor-String节点的iconColor

setIconColor(iconColor) - 设置节点的iconColor

  • iconColor-String节点的icon的颜色

isLeaf - 是否是叶子节点

isRoot - 是否是根节点

getEl - 获取节点el

isChecked - 如果节点类型为checkbox时是否选中

getType - 获取节点类型

getParentNode - 获取父节点

isCheckboxType - 是否是类型为checkbox的节点

checked(check) - 如果类型是checkbox时选中或反选此节点

  • check-boolean选中或反选

refresh - 刷新节点

checkboxDrillUp - 向上刷新

detailItemInputsRecursive - 向下刷新

事件

名称 说明
click 节点点击
expand 节点展开或闭合
checked 节点选中或反选
loadRemote 异步节点加载

Readme

Keywords

Package Sidebar

Install

Repository

github.com/playerljc/CTMobile-UI

Homepage

github.com/playerljc/CTMobile-UI#readme

Weekly Downloads

10

Version

1.0.4

License

MIT

Unpacked Size

130 kB

Total Files

14

Last publish

Collaborators

  • playerljc
Try on RunKit
Report malware