为了账号安全,请及时绑定邮箱和手机立即绑定

基于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人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
35
获赞与收藏
64

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消