Element-React Tree 樹形控件

用清晰的層級結構展示信息，可展開或折疊。

基礎用法

基礎的樹形結構展示。

constructor(props) {
  super(props);


  this.state = {
    data: [{
      label: '一級 1',
      children: [{
        label: '二級 1-1',
        children: [{
          label: '三級 1-1-1'
        }]
      }]
    }, {
      label: '一級 2',
      children: [{
        label: '二級 2-1',
        children: [{
          label: '三級 2-1-1'
        }]
      }, {
        label: '二級 2-2',
        children: [{
          label: '三級 2-2-1'
        }]
      }]
    }, {
      label: '一級 3',
      children: [{
        label: '二級 3-1',
        children: [{
          label: '三級 3-1-1'
        }]
      }, {
        label: '二級 3-2',
        children: [{
          label: '三級 3-2-1'
        }]
      }]
    }],
    options: {
      children: 'children',
      label: 'label'
    }
  }
}


render() {
  return (
    <Tree
      data={this.state.data}
      options={this.state.options}
      highlightCurrent={true}
      onCheckChange={(data, checked, indeterminate)=>{
        console.debug('onCheckChange: ', data, checked, indeterminate)}
      }
      onNodeClicked={(data, reactElement,)=>{
        console.debug('onNodeClicked: ', data, reactElement)
      }}
    />
  )
}

可選擇

適用于需要選擇層級時使用。在下例中，由于在點擊時才進行該層數(shù)據(jù)的獲取，導致層級不可預知，如果沒有下層數(shù)據(jù)，則點擊后下拉按鈕會消失。

constructor(props) {
  super(props)
  this.state = {
    regions: [{
      'name': 'region1'
    }, {
      'name': 'region2'
    }]
  }


  this.options = {
    label: 'name',
    children: 'zones'
  }
  this.count = 1


}


handleCheckChange(data, checked, indeterminate) {
  console.log(data, checked, indeterminate);
}


loadNode(node, resolve) {


  if (node.level === 0) {
    return resolve([{ name: 'region1' }, { name: 'region2' }]);
  }
  if (node.level > 3) return resolve([]);


  var hasChild;
  if (node.data.name === 'region1') {
    hasChild = true;
  } else if (node.data.name === 'region2') {
    hasChild = false;
  } else {
    hasChild = Math.random() > 0.5;
  }


  setTimeout(() => {
    var data;
    if (hasChild) {
      data = [{
        name: 'zone' + this.count++
      }, {
        name: 'zone' + this.count++
      }];
    } else {
      data = [];
    }


    resolve(data);
  }, 500);
}


render() {
  const { regions } = this.state


  return (
    <Tree
      data={regions}
      options={this.options}
      isShowCheckbox={true}
      lazy={true}
      load={this.loadNode.bind(this)}
      onCheckChange={this.handleCheckChange.bind(this)}
      onNodeClicked={(data, nodeModel, reactElement, treeNode)=>{
        console.debug('onNodeClicked: ', data, nodeModel, reactElement)
      }}
    />
  )
}

默認展開和默認選中

可將 Tree 的某些節(jié)點設置為默認展開或默認選中

分別通過defaultExpandedKeys和defaultCheckedKeys設置默認展開和默認選中的節(jié)點。需要注意的是，此時必須設置nodeKey，其值為節(jié)點數(shù)據(jù)中的一個字段名，該字段在整棵樹中是唯一的。

constructor(props) {
  super(props);


  this.state = {
    data: [{
      id: 1,
      label: '一級 1',
      children: [{
        id: 4,
        label: '二級 1-1',
        children: [{
          id: 9,
          label: '三級 1-1-1'
        }, {
          id: 10,
          label: '三級 1-1-2'
        }]
      }]
    }, {
      id: 2,
      label: '一級 2',
      children: [{
        id: 5,
        label: '二級 2-1'
      }, {
        id: 6,
        label: '二級 2-2'
      }]
    }, {
      id: 3,
      label: '一級 3',
      children: [{
        id: 7,
        label: '二級 3-1'
      }, {
        id: 8,
        label: '二級 3-2'
      }]
    }],
    options: {
      children: 'children',
      label: 'label'
    }
  }
}


render() {
  const { data, options } = this.state


  return (
    <Tree
      data={data}
      options={options}
      isShowCheckbox={true}
      nodeKey="id"
      defaultExpandedKeys={[2, 3]}
      defaultCheckedKeys={[5]}
    />
  )
}

樹節(jié)點的選擇

通過 node 獲取通過 key 獲取通過 node 設置通過 key 設置清空

本例展示如何獲取和設置選中節(jié)點。獲取和設置各有兩種方式：通過 node 或通過 key。如果需要通過 key 來獲取或設置，則必須設置nodeKey。

constructor(props) {
  super(props);


  this.state = {
    data: [{
      id: 1,
      label: '一級 1',
      children: [{
        id: 4,
        label: '二級 1-1',
        children: [{
          id: 9,
          label: '三級 1-1-1'
        }, {
          id: 10,
          label: '三級 1-1-2'
        }]
      }]
    }, {
      id: 2,
      label: '一級 2',
      children: [{
        id: 5,
        label: '二級 2-1'
      }, {
        id: 6,
        label: '二級 2-2'
      }]
    }, {
      id: 3,
      label: '一級 3',
      children: [{
        id: 7,
        label: '二級 3-1'
      }, {
        id: 8,
        label: '二級 3-2'
      }]
    }],
    options: {
      children: 'children',
      label: 'label'
    }
  }
}


getCheckedNodes() {
  console.log(this.tree.getCheckedNodes());
}
getCheckedKeys() {
  console.log(this.tree.getCheckedKeys());
}
setCheckedNodes() {
  this.tree.setCheckedNodes([{
    id: 5,
    label: '二級 2-1'
  }, {
    id: 9,
    label: '三級 1-1-1'
  }]);
}
setCheckedKeys() {
  this.tree.setCheckedKeys([3]);
}
resetChecked() {
  this.tree.setCheckedKeys([]);
}


render() {
  const { data, options } = this.state


  return (
    <div>
      <Tree
        ref={e=>this.tree = e}
        data={data}
        options={options}
        isShowCheckbox={true}
        highlightCurrent={true}
        nodeKey="id"
        defaultExpandedKeys={[2, 3]}
        defaultCheckedKeys={[5]}
      />
      <div className="buttons">
        <Button onClick={()=>this.getCheckedNodes()}>通過 node 獲取</Button>
        <Button onClick={()=>this.getCheckedKeys()}>通過 key 獲取</Button>
        <Button onClick={()=>this.setCheckedNodes()}>通過 node 設置</Button>
        <Button onClick={()=>this.setCheckedKeys()}>通過 key 設置</Button>
        <Button onClick={()=>this.resetChecked()}>清空</Button>
      </div>
    </div>
  )
}

自定義節(jié)點內(nèi)容

節(jié)點的內(nèi)容支持自定義，可以在節(jié)點區(qū)添加按鈕或圖標等內(nèi)容

使用renderContent指定渲染函數(shù)，該函數(shù)返回需要的節(jié)點區(qū)內(nèi)容即可。渲染函數(shù)的用法請參考 Vue 文檔。注意：由于 jsfiddle 不支持 JSX 語法，所以本例在 jsfiddle 中無法運行。但是在實際的項目中，只要正確地配置了相關依賴，就可以正常運行。

constructor(props) {
  super(props);


  this.state = {
    data: [{
      id: 1,
      label: '一級 1',
      children: [{
        id: 4,
        label: '二級 1-1',
        children: [{
          id: 9,
          label: '三級 1-1-1'
        }, {
          id: 10,
          label: '三級 1-1-2'
        }]
      }]
    }, {
      id: 2,
      label: '一級 2',
      children: [{
        id: 5,
        label: '二級 2-1'
      }, {
        id: 6,
        label: '二級 2-2'
      }]
    }, {
      id: 3,
      label: '一級 3',
      children: [{
        id: 7,
        label: '二級 3-1'
      }, {
        id: 8,
        label: '二級 3-2'
      }]
    }],
    options: {
      children: 'children',
      label: 'label'
    }
  }
  this.id = 100;
}


append(store, data) {
  store.append({ id: this.id++, label: `testtest_${this.id}`, children: [] }, data);
}


remove(store, data) {
  store.remove(data);
}


renderContent(nodeModel, data, store) {
  return (
    <span>
      <span>
        <span>{data.label}</span>
      </span>
      <span style={{float: 'right', marginRight: '20px'}}>
        <Button size="mini" onClick={ () => this.append(store, data) }>Append</Button>
        <Button size="mini" onClick={ () => this.remove(store, data) }>Delete</Button>
      </span>
    </span>);
}


render() {
  const { data, options } = this.state


  return (
    <Tree
      data={data}
      options={options}
      isShowCheckbox={true}
      nodeKey="id"
      defaultExpandAll={true}
      expandOnClickNode={false}
      renderContent={(...args)=>this.renderContent(...args)}
    />
  )
}

節(jié)點過濾

通過關鍵字過濾樹節(jié)點

在需要對節(jié)點進行過濾時，調(diào)用 Tree 實例的filter方法，參數(shù)為關鍵字。需要注意的是，此時需要設置filterNodeMethod，值為過濾函數(shù)。

constructor(props) {
  super(props);


  this.state = {
    data: [{
      id: 1,
      label: '一級 1',
      children: [{
        id: 4,
        label: '二級 1-1',
        children: [{
          id: 9,
          label: '三級 1-1-1'
        }, {
          id: 10,
          label: '三級 1-1-2'
        }]
      }]
    }, {
      id: 2,
      label: '一級 2',
      children: [{
        id: 5,
        label: '二級 2-1'
      }, {
        id: 6,
        label: '二級 2-2'
      }]
    }, {
      id: 3,
      label: '一級 3',
      children: [{
        id: 7,
        label: '二級 3-1'
      }, {
        id: 8,
        label: '二級 3-2'
      }]
    }],
    options: {
      children: 'children',
      label: 'label'
    }
  }
}


render() {
  const { data, options } = this.state


  return (
    <div>
      <Input placeholder="輸入關鍵字進行過濾" onChange={text=> this.tree.filter(text)} />
      <Tree
        ref={e=> this.tree = e}
        className="filter-tree"
        data={data}
        options={options}
        nodeKey="id"
        defaultExpandAll={true}
        filterNodeMethod={(value, data)=>{
          if (!value) return true;
          return data.label.indexOf(value) !== -1;
        }}
      />
    </div>


  )
}

手風琴模式

對于同一級的節(jié)點，每次只能展開一個

constructor(props) {
  super(props);


  this.state = {
    data: [{
      label: '一級 1',
      children: [{
        label: '二級 1-1',
        children: [{
          label: '三級 1-1-1'
        }]
      }]
    }, {
      label: '一級 2',
      children: [{
        label: '二級 2-1',
        children: [{
          label: '三級 2-1-1'
        }]
      }, {
        label: '二級 2-2',
        children: [{
          label: '三級 2-2-1'
        }]
      }]
    }, {
      label: '一級 3',
      children: [{
        label: '二級 3-1',
        children: [{
          label: '三級 3-1-1'
        }]
      }, {
        label: '二級 3-2',
        children: [{
          label: '三級 3-2-1'
        }]
      }]
    }],
    options: {
      children: 'children',
      label: 'label'
    }
  }
}


render() {
  const { data, options } = this.state


  return (
    <Tree
      ref={e=> this.tree = e}
      data={data}
      options={options}
      accordion={true}
      onNodeClicked={node=>console.log(node)}
    />
  )
}

Attributes

options

方法

Tree 擁有如下方法，返回目前被選中的節(jié)點數(shù)組：

Events

參數(shù)說明