• React表格操作 2017-05-08 17:09:01
    对于官网上的那个表格demo又进行了改造,记录一下其中的困难和解决思路,当然还有功能没有完善,会继续利用空余时间来实现一下。 在上篇的基础上http://blog.csdn.net/liuzijiang1123/article/details/66974630...

    对于官网上的那个表格demo又进行了改造,记录一下其中的困难和解决思路,当然还有功能没有完善,会继续利用空余时间来实现一下。


    github:https://github.com/liuzaijiang/React-text

    ——————————————————————————————————————————————————————

    在上一篇的基础上http://blog.csdn.net/liuzijiang1123/article/details/66974630 又做了一部分修改:

    1.利用webpack进行了打包压缩处理,并提取出了的第三方库文件;

    2.增加了按照价格排序的功能;新加商品后也能按照排序的方式来显示;

    3.增加了分页的功能;

    4.减少了组件不必要的render;

    ——————————————————————————————————————————————————————

    感悟:其实自己实现上面功能的过程也是比较“蛋疼的”,因为表格之间的状态交互比较多,经常要各个子组件之间通信,除了一些逻辑需要自己思考处理外,还有就是自己想实现一些不必要的render,这就需要用状态来判断,是否需要重新渲染组件,存在状态难找,和流向不是那么容易就容易理清楚的困难;随着表格的功能越来越复杂,后面觉得有必要学习一下Redux了~


    webpack

    webpack打包压缩我是参考这篇文章:http://www.jianshu.com/p/4df92c335617

    当然现在webpack都已经是2.X了,所以还是会有版本迭代的:https://doc.webpack-china.org/guides/migrating/


    然后我再稍微说几个需要注意的地方:

    1.babel的loader中的名字要写成'babel-loader'

    2.生成  .babelrc 文件需要写成  .babelrc.  这样的形式(前后各一个点)

    3.如何设置NODE_ENV=production(React切换成产品模式 )

    在cmd中直接敲set NODE_ENV=production

    然后在webpack.config.js中

    plugins: [
                 new webpack.DefinePlugin({
                    'process.env': {
                            NODE_ENV: JSON.stringify('production')
                               }
                         }),
              ]

    4.将第三方库另外打包一份(比如我们的react,react-dom这样的第三方js,最好和我们自己定义的js分开,这样webpack利用diff算法打包的时候也会快一点,毕竟这些第三方库我们基本不会去修改)

    entry: {
    	bundle:__dirname + "/app/main.js",
    	vendor:["react","react-dom"]
    	},
    我们需要再entry中定义好,然后再plugins中利用webpakc自带的插件进行打包

    plugins: [
    	   new webpack.optimize.UglifyJsPlugin({
    		output: {
    		    comments: false,  // remove all comments
    		 },
    		compress: {
    		    warnings: false
    		 }
    	     }),
    	   new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' }),
    	   new webpack.DefinePlugin({
    		 'process.env': {
    		   NODE_ENV: JSON.stringify('production')
    		  }
    		}),
        ]


    5.利用webpack-dev-server进行修改后实时刷新

    自从每次打包后我这边每改一次都要所有的重新打包,需耗费我10多秒的时间,真的是太....那个啥了;


    不过在使用过程中我遇到了一个困难,就是本地运行成功了,但是无法实时刷新;

    我的解决方法如下:(都是针对我自己的demo进行修改,实际情况实际讨论)

    首先在package.json这个文件中进行修改

    "scripts": {
        "start": "webpack",
        "dev":"webpack-dev-server --inline --content-base build/"
      },

    我们运行npm install start的时候是常规的打包,运行npm run dev是启动webpack-dev-server,--content-base 后面接的是index.html文件的路径,我是放在build/下面的

    然后修改一下webpack.config.js

    output: {
           path: __dirname + "/build/js",
           filename: "[name].js",
           publicPath: 'js/'
        },
    最后修改一下index.html

    <script src="js/vendor.js"></script>
    <script src="js/bundle.js"></script>

    这样就可以实现实时修改文件,然后浏览器会自己刷新了。

    最后我还是想说一下为什么会出现这个原因,我个人的理解是,开启webpack-dev-server后进行修改打包后生成的文件没有放在我的本地文件夹里面(Path指定的路径),而是在PublicPath指定的路径;

    path:用来存放打包后文件的输出目录 ;
    publicPath:指定资源文件引用的目录 ;

    而我原来的index.html引用的js是用的Path的路径,我也没有指定PublicPath的路径,所以它默认放在根路径,这个根路径就是http://localhost:8080/;

    如果我不指定路径,那么index.html中可以就直接这样xxx.js引用js;我这里指定了publicPath : js/" 其实是http://localhost:8080/js,然后引用的时候写成js/xx.js即可,这样做是为了和我本地编译打包的脚本路径一致,方便我本地的编译,不用去再更改脚本的引用路径了;

    6.如何配置多入口文件

    如果你是多页面应用,那样肯定就会有多个入口文件,在我们的webpack.config.js中的entry需要一个个列出来

    譬如:

    entry:{
    a:__dirname + "/app/a.js",
    b:__dirname + "/app/b.js",
    c:__dirname + "/app/b.js",
    ......
    }


    这样需要我们手动一个个去敲,肯定不方便,所以我们这边要“智能一点”

    我的解决方法如下:

    定义一个函数:

    function getEntry(){ 
    	var entry = {
    	bundle:__dirname + "/app/main.js",
    	vendor:["react","react-dom"],//将第三方的依赖放入一个模块包中,打包成一个模块,如果里面的文件还有依赖则依赖性最高的放最后
    	}; 
    
    	glob.sync(__dirname +'/app/settings/*.js') //读取开发目录,并进行路径裁剪 
    	    .forEach(function(name) 
    		{ 
    		  var start = name.lastIndexOf('/')+1, 
    		  end = name.length-3; //保存各个组件的入口 
    		  var n = name.slice(start, end);
    		  entry[n] = name; 
    		}); 
    	return entry; 
    };
    除了main.js和第三方库外,还有一些其他的js我写在了settings目录下,所以传的是__dirname +'/app/settings/*.js'    这里面的具体路径自己更换,我的app目录是和webapck.config.js在同一目录下


    然后:

    entry:getEntry(), 

    就可以把我们需要打包压缩的js全部包含进去,当前我的例子只是抛砖引玉。



    分页

    对于分页,这里我花了比较多的时间:

    以前做过jq的分页,知道了大体的思路,首先是需要知道一共有多少个数据,然后是每页显示多少行,然后就是求出一个页数,再对表格中的数据进行选择性的显示。


    但是刚接触到React分页的时候还是一头雾水,有点不知道从哪下手,毕竟React不能那么容易就能操作到每一个节点,轻松获取我们想要的数据。


    我这边的思路首先是从显示和隐藏每一行开始,因为每一行我这边封装成了一个小组件,我这边完全可以控制其display属性来显示,不过这里需要注意的就是不能用jq的那种方法,addClass,removeClass或者是.css来控制,我们需要用变量来控制,比如:

    var display="none" 
    <tr style={{display:display}} />

    这里通过改变display变量来控制显示。


    当我们能够去显示和隐藏每一行后,就需要来进行选择性显示了和隐藏了;

    if(this.props.index<this.props.currentPage*this.props.eachPage||this.props.index>(this.props.currentPage+1)*this.props.eachPage-1){
    			display="none";
    		}
    


    this.props.index是当前这一行的索引,即数据当前行数;

    this.props.currentPage是当前页数;

    this.props.eachPage是每一页显示行数;

    比如,我们要显示第一页的数据,每一页显示5个数据,那么显示的具体行数就是0--4,那么小于0的和大于4的我们就会去隐藏。

    这里的this.props.currentPage其实是个变量,是和另一个页面跳转的组件进行通信的,中间就需要用父组件当作一个媒介来传递。当我点击下一页,或者选择具体的页数进行跳转的时候,需要改变这个数据。



    当然我们还需要进行一些边界问题的处理:

    A.比如我们目前是第一页,那么我们的首页和上一页就要被灰掉,不能进行点击触发,我们处于最后一页的时候需要把下一页和尾页同样灰掉;

    我的做法如下:

    类似于前面的隐藏和显示,我这里给首页,前一页,下一页,尾页都添加了一个变量"ban"为它的className(ban设置的CSS是灰掉这个按钮);

    然后我们就进行判断,当前是首页还是尾页,相应的对这个ban变量进行赋值,如果不满足条件就赋值一个空值,满足就赋值我们定义好的css变量;

    到这里我们只是对css进行了灰掉,但是你点击的时候还是会触发函数,所以我这里又在点击的时候又进行了一次判断;由于我这里是利用的事件代理,所以对于这4个按钮我只是定义了一个click函数,然后判断他们的id,来进行判断到底是哪个按钮,在这个基础上我再判断是否className为ban ,如果是,则不会去触发。


    B.如果我现在处于最后一页,我需要去删除掉最后一个数据,那么表格应该会自动跳转到前一页。

    (这个问题对我来说也是具有挑战性的)

    我的思路如下:


    首先判断当前是不是最后一页(如果不是,你删除数据,表格会自动更新,后面的数据会补上)

           如果是最后一页,再判断是不是最后一个数据(这里的最后一个数据是所有数据的最后一个,那样这样删除跳转就没有意义,而且还会产生bug)

                 如果不是最后一个数据,再判断是不是最后一页的最后一个数据(如果不是,后面会数据会补齐)

                      如果是,就更新当前的页数为上一页


    ps:这里判断总页数的方法可以参考一下,我这里是用总商品除以每页显示的行数,pasreInt是去除小数部分,如果正好可以整除,那么除出来的数据正好可以当作页数,如果不能整除的话,那么就向上取舍。(具体情况还是具体分析吧,我这里的总页数是1,2,3但是我当前页是0,1,2)

    if(this.state.products.length/this.state.eachPage==parseInt(this.state.products.length/this.state.eachPage))
    	{
    		var page=parseInt(this.state.products.length/this.state.eachPage);
    	}
    	else
    	{
    		var page=Math.ceil(this.state.products.length/this.state.eachPage);
    	}
    		
    if(this.state.currentPage==page&&this.state.products.length!=0&&this.state.products.length%this.state.eachPage==0)
    	{
    	    this.setState({
    		products:this.state.products,
    		currentPage:this.state.currentPage-1
    	     })
    	}
    	else{
    	    this.setState({
    		products:this.state.products,
    	     })
    	}


    最后还需要注意的就是,我这里跳转具体页数是select选项和前一页它们按钮触发方式不一样,前者是onChange后者是onClick



    减少render

    其实组件更新的时候,很多相关组件也会同时更新渲染,有些组件是死的,有些是没必要更新的,所以这里我们可以选择性进行更新。

    这里就是当它的isAdd属性改变了我就进行更新,这个就是我们的添加商品的窗口,只有我点击添加了再进行组件渲染,其他时候没必要进行组件渲染。

    shouldComponentUpdate(nextProps, nextState) {
     if (this.props.isAdd !== nextProps.isAdd) {
    	return true;
    	}
     return false;
    }









    展开全文
  • NewUserTrackTable.js文件 /** * Created by Administrator on 2017/3/3 0003. ...import React, {Component} from "react" import "./NewUserTrackTable.less" var g_index = -1; export default class NewUserTra
  • vue,angular,react,这三个框架,本来打算学vue。图书馆资料就一本,就转向了React(图书馆突然买了好多。...TIPS:引入库文件(现在还没到jsx,了两个,一个核心,一个dom库) &lt;script src=...
  • 一般的做法都是在列表的上面,加几个搜索条件,然后最下面放一个搜索按钮,然后通过调用后台的Ajax进行过滤,然后调用JQuery等其他框架,进行 DOM书的更新,当然这个也是一个好的实现方法,但是就是有一点不太优雅。...
  • React Table - 一个快速、轻量级、固执己见的React数据表格
  • 一个基于React表格组件,demo实现了动态增删与全局提示,使用react:v16版与es6。、
  • react-React的电子表格组件 2020-05-15 10:09:06
    React的电子表格组件
  • Easy Mock 是一个可视化,并且能快速生成模拟数据的持久化服务。 react现今流行的前端开发框架 antd reactUI组件库,可以用于快速开发企业级后台平台。 效果: 代码: 展示部分: &lt;Card title=...
  • React 全自动数据表格组件——BodeGrid的实现思路 表格是在后台管理系统中用的最频繁的组件之,相关的功能有数据的新增和编辑、查询、排序、分页、自定义显示以及一些操作按钮。这篇文章主要介绍了React 全自动...
  • 绘画react-native表格一个小组件
  • rsuite-table 是一个 React 实现的表格(Table) 组件。支持固定表头,固定列(固定在左侧);支持自定义调整列宽;支持自定义单元格内容;支持显示树状表格;支持排序。
  • 一下是一个表格无缝滚动的封装组件 import React from 'react'; import { observer } from 'mobx-react'; import { Table, Input, InputNumber, Popconfirm, Form } from 'antd'; import './index.less'; @obser.....
  • react哲学
  • 用react实现对表格操作的demo
  • react使用Antd表格 2019-06-10 09:19:29
    表格中插入图标或者选择框 需要用到columns中的render回调 columns: [ { title: '姓名', dataIndex: 'name', key: 'name', align: "center" }, { title: '头像', dataIndex: 'img', key: 'img', align: "center" ...
  • 趁着项目间歇,试着了一下未接触的react,找了一下资料,决定使用ant-design组件库,因为基本是完全的react新手,因此对着官网教程及查询资料简单的实现了一下使用vue实现过的表格+弹窗。 准备 Ant-Design 环境...
  • react-native表格组件的使用 2019-06-11 14:04:20
    今天简单说一下react-native平台上比较好用的表格组件的使用方法: 组件地址:react-native-table-component 第步,添加依赖 yarn add react-native-table-component 复制代码第二步,在需要的功能页面导入组件 ...
  • 本系列的特色是从 需求分析、API 设计和代码设计 三个递进的过程中,由简到繁地开发一个 React 组件,并在讲解过程中穿插一些 React 组件开发的技巧和心得。 为什么从表格开始呢?在企业系统中,表格是最常见但功能...
  • BaseTable是一个react表格组件,能够以高性能和灵活性的显示大型数据集
  • 这只一个雏形,但是可以了。难点是如何点击每行后面的编辑按钮,让当前行的格子都变成input。 import {Component} from 'react' const Action = props =&gt; { console.log(props) return ( &lt;div&...
1 2 3 4 5 ... 20
收藏数 7,860
精华内容 3,144