手记

基于Reactjs的ztree 组件开发

基于Reactjs的ztree 组件开发
开发目的

项目中经常会用到树形控件,而且数据量较大,通常会达到上万的数据量,之前用的jQuery ztree 可以很好的满足以上要求,而自己目前也没有能力造一个满足这样要求的轮子,所以还是延用之前的ztree,然后在其之上封装成react component形式。

开发过程

首先我们新建一个项目目录,这里我们采用webpack umd打包方式,使其可以用于amd,cmd和全局引用.
项目目录是这样滴~

src 中ztree-for-react.js 是源码,经过webpack编译打包后的文件会保存到lib目录中

webpack 配置如下图所示:

接下来我们编写核心代码:

import React,{Component} from 'react';
import $ from 'jquery';   //加载jQuery
import 'ztree';  //加载ztree
let ztreeIndex=0;
export default class ReactZtree extends Component{
  constructor(props){
    super(props);
  }
  componentDidMount(){
    this.renderZtreeDom();
  }
  componentDidUpdate(){
    this.renderZtreeDom();
  }
  componentWillUnmount(){
    this.ztreeObj.destory();
  }
  renderZtreeDom(){
    let ztreeObj = this.ztreeObj=$.fn.zTree.init(this.getTreeDom(),this.getTreeSetting(),this.props.nodes);
    return ztreeObj;
  }
  getTreeDom(){
    return $(this.refs.ztree);
  }
  getTreeSetting(){
    let props=this.props;
    return {
      treeId:props.treeId,
      treeObj:props.treeObj,
      async:props.async,
      callback:props.events,
      check:props.check,
      data:props.data,
      edit:props.edit,
      view:props.view
    }
  }
  getTreeObj(){
    return this.ztreeObj;
  }
  render(){
    return (
      <div className="ztree" ref="ztree" id={`ztree_${ztreeIndex++}`}>

      </div>
    )
  }
}

我们在componentDidMount 钩子函数中初始化ztree,利用getTreeSetting方法写入ztree的配置,将ztree的配置转换为React组件的props,当树节点或者配置更新时我们调用ztree distroy方法销毁ztree对象并且重新初始化ztree,这样就达到了当外部props属性改变是ztree可以自动刷新的效果,这样一个ztree组件就大功告成啦~

最后附上这个项目的github地址,喜欢的童鞋可以star或者fork,也非常欢迎提issues来帮忙进一步改进和完善这个组件。目前npm包也已经发布,有需要的同学可以使用npm安装:

npm install ztree-for-react
2人推荐
随时随地看视频
慕课网APP

热门评论

在create-react-app脚手架下暴露文件后怎么配,解决jQuery没有定义的问题?

有人做出来吗,求帮助,急急急

问题是,你在github上的那个工程demo根本运行不起来

查看全部评论