使用Antd表格组件实现日程表

本文转载自微信公众号「神奇的程序员K」，作者神奇的程序员K 。转载本文请联系神奇的程序员K公众号。

 前言

20多天前，遇到一个日程表的业务需求，可以动态增加列、对单元格进行合并，结合公司的jsp项目的已有功能完成单元格的增、删、改操作。进行需求分析整理后，经过了一番查找，发现React版本的antd的表格组件功能很强大，可定制程度很高，可以助我完成这个业务需求的开发。

由于要和jsp进行交互，所以在实现过程中，遇到了一些难题踩了挺多坑，本文就跟大家分享下我从0到1实现这个需求的过程与思路，欢迎各位感兴趣的开发者阅读本文。

环境搭建

因为公司的项目是基于jsp的，antd本想用Vue版本的，无奈它与jsp的一些语法冲突了跑不起来，于是就尝试了react版本的antd，它跑起来了没有发现任何兼容性问题，一切正常。给React点个赞??。

由于要与项目中已有的功能进行交互，没法用脚手架，我只能以cdn的方式引入react，如下所示，按顺序引入react、axios、lodah以及antd所需要的文件。

<script crossOrigin type="text/javascript" src="lib/react.production.min.js"></script> 
   <script crossOrigin type="text/javascript" src="lib/react-dom.production.min.js"></script> 
   <script src="lib/babel.min.js"></script> 
   <script type="text/javascript" src="lib/moment.min.js"></script> 
   <script src="lib/lodash.min.js"></script> 
   <script type="text/javascript" src="lib/antd.min.js"></script> 
   <script type="text/javascript" src="lib/axios.min.js"></script> 
   <link rel="stylesheet" href="lib/antd.min.css"> 

上述用到的资源文件地址: react-antd-schedule/lib

我们需要把react相关代码写在text/babel标签中，如下所示，我们打印antd和react看看是否有值。

<script type="text/babel"> 
    console.log("react"); 
    console.log(React); 
    console.log("antd") 
    console.log(antd); 
</script> 

打开浏览器控制台，出现下述信息，代表我们的环境已经搭建成功。

image-20201119155715157

接下来，我们写个HelloWord来测试下效果。

<div id="root" style="width: 94%;overflow: hidden"></div> 
<script type="text/babel"> 
    // 自定义hook 
    const App = () => { 
        const onChange = (date, dateString) => { 
            console.log(date, dateString); 
        } 
        return ( 
            <div> 
                React+antd引入成功 
                <br /> 
                <antd.DatePicker onChange={onChange} /> 
            </div> 
        ); 
    }; 
    ReactDOM.render(<App />, document.getElementById("root")); 
</script> 

 
本文转载自网络，原文链接：https://mp.weixin.qq.com/s/0UmHoOAlMLLhEV9mFr7aRg
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！