@ctmobile/ui-tree

v1.0.4

Published

3 years ago

支持移动端的UI组件-Tree

Downloads

0High
0Medium
0Low

playerljc

tree CtMobile CTMibole-UI mobile webapp SPA Hybrid Cordova Android iOS Material playerljc WebFramework

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] 是否是叶子节点

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 | 异步节点加载 |