@ctmobile/ui-tree-sd

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

    Install

    npm i @ctmobile/ui-tree-sd

    DownloadsWeekly Downloads

    9

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    105 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar