keep789
keep789

Ant-Design-Pro中Table组件使用总结

一、基本使用

一个Table表格主要由表头和表格内容（即数据）组成，所以最基本的Table就是由column、dataSource这两个属性组成。

const dataSource = [{
  key: '1',
  name: '胡彦斌',
  age: 32,
  address: '西湖区湖底公园1号'
}, {
  key: '2',
  name: '胡彦祖',
  age: 42,
  address: '西湖区湖底公园1号'
}];

const columns = [{
  title: '姓名',
  dataIndex: 'name',
  key: 'name',
}, {
  title: '年龄',
  dataIndex: 'age',
  key: 'age',
}, {
  title: '住址',
  dataIndex: 'address',
  key: 'address',
}];


上述列子来源于官网：ant-design之table组件
当然，实际需求中的表格多种多样，有的是动态生成表头及内容的，有的是可编辑表格的，有的是层级结构的等等，这些复杂的表格操作原型都在官网有所体现，剩下的就是灵活运用了。下面就说说自己在项目实际使用的一些坑。
二、Table组件属性中的坑及常用方法总结
    

  1.  
    rowSelection方法
     
    2. 

        






 组件中有 rowSelection={rowSelection} 方法，可以让Table的第一列成为联动的选择框。
      坑：API中表示通过 rowSelection.selectedRowKeys 来控制选中项，但selectedRowKeys 控制的只是dataSource当前的顺序编号。所以在table有分页的时候，可能会导致选择的明明是第一页，但其他几页也都处于选中状态，且如果选择的是第n页第m行，但实际选的内容也只是第一页的第m行。
     解决方案：加上rowKey="id"或者rowKey={record => record.id}。（注：id表示dataSource数组中每一组的某个值）
// 代码展示





 record.id} />
2.pagination方法
不设置时候，默认十条每页。
写分页的时候，搭配onChange方法来实现数据的改变
// 代码展示
handleTableChange = (pagination) => {
    const { onChange } = this.props;
    if (onChange) {
      onChange(pagination);    // 在model层改变当前页，传给后台更新当前页数据，即list和pagination，
    }
  };


const colums = [{...], {...},{....},...]
const list = [......],
const paginationProps = {
    current: 1,
    pageSize: 10,
    total: 100,
    totalPage: 10,
}







3.columns方法
（1）序号列：常需要知道表格多少行一共，在实际业务可表示为多少件商品、多少个订单等，所以有一列为’序号‘来计数。实际后台返回的dataSource里面没有这个字段，表头有这一列，那就需要前端来处理。
// 代码展示
const columns = [
      {
        title: '序号',
        dataIndex: 'number',
        key: 'number',
      },
      {
        title: '某某值',
        dataIndex: 'stringValue',
        key: 'stringValue',
      },
    ];

const { data } = this.props                // data为表格数据，后台请求而来
                                      // data格式 data = [{id: 'xxx', stringValue: 'aaa' }]
data.length > 0 && data.map(item => (item.number = number++));  // 处理data






(2). 关于多个值用逗号隔开展示及超长处理：业务里会碰到每行的某一列下面的这个值可能是个数组，要拿个这个数组里的某个属性用逗号隔开展示出来。而且有时候非常长，可以限制一下多长就用省略号，另外可以用Popover鼠标滑过提示一下这一格显示的内容，比较友好。
// 代码实现
const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: '已关联xx名称',
      dataIndex: 'xxname',
      key: 'xxname',
      align: 'center',
      render: val => {
        const sxm = val.map(item => {
          if (val[val.length - 1] === item) {
            return `${item.name}`;
          }
          return `${item.name},`;
        });

        return (
                              
            {sxm}
          
        );
      },
    },
    {
      title: '操作',
      align: 'center',
      render: (text, record) => (
        
           this.handleCheckInfo(record)}>编辑
          
          this.handleDelete(record)}>
            删除
          
        
      ),
    },
  ];





// 样式补充
.colSql {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  width: 300px;
}
坑：和react搭配使用时，放在不同的位置，table取的方式也不同。
解决方案：放在定义组件内，render外使用要加this，即columns={this.columns}。放在定义组件外为全局环境，定义在render内，都不用加this。放在render内的一个好处是，可以随时获取model和state的数据变化。
(3).关于table表格内显示图片，且可以放大查看图片的操作
// 代码展示
state = {
    previewVisible: false,
    previewImage: '',
}

handleCancel = () => {
    this.setState({
      previewVisible: false,
    });
  };

handlePreViewVisible = val => {
    this.setState({
      previewVisible: true,
      previewImage: val,
    });
  };


 columns = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: '图片',
      dataIndex: 'logoUrl',
      key: 'logoUrl',
      align: 'center',
      render: val => {
        const { previewVisible, previewImage } = this.state;
        if (val) {
          return (
            

               this.handlePreViewVisible(val)}
                alt="品牌logo"
              />
              
                example
              
            

          );
        }
        return '';
      },
    },
    {
      title: '操作',
      align: 'center',
      width: '15%',
      dataIndex: 'operation',
      key: 'operation',
      render: (text, record) => (
        
             this.handleUpdateModalVisible(true, record)}>编辑
          
             this.handleDelete(record.id)}>
              删除
            
        
      ),
    },
  ];
 





你可能感兴趣的:(Antd-Design-Pro)






    

  • 一、环境搭建
燃烧的土豆

      首先，介绍一下Antd-design-pro,以下简称Antd-pro（不想多敲那几个），好吧，进入正题，借用官方介绍：开箱即用的中台前端/设计解决方案（Antd-design-pro）,这是一个适用于中台管理框架搭建的方案，当然，用它搭建后台也是可以的，所谓的中台，引用搜狐的文章，感兴趣可以点上面的中台按钮去了解，这里不再赘述。总的来说，它就是一个中后台管理框架。  在开始开发之前，你需要先
    

    • 

  • antd-design-pro使用操作
livingbody
node.jsantd

    基本结构**脚手架通过结合一些配置文件、基本算法及工具函数，搭建好了路由和菜单的基本框架，主要涉及以下几个模块/功能：**路由管理通过约定的语法根据在router.config.js中配置路由。菜单生成根据路由配置来生成菜单。菜单项名称，嵌套路径与路由高度耦合。面包屑组件PageHeader中内置的面包屑也可由脚手架提供的配置信息自动生成。路由目前脚手架中所有的路由都通过router.config
    

    • 

  • Spring的注解积累
yijiesuifeng
spring注解

    用注解来向Spring容器注册Bean。
 
需要在applicationContext.xml中注册：
<context:component-scan base-package=”pagkage1[,pagkage2,…,pagkageN]”/>。
如：在base-package指明一个包   
<context:component-sc
    

    • 

  • 传感器
百合不是茶
android传感器

    android传感器的作用主要就是来获取数据,根据得到的数据来触发某种事件
 
下面就以重力传感器为例;
 
1,在onCreate中获得传感器服务
 
private SensorManager sm;// 获得系统的服务
private Sensor sensor;// 创建传感器实例
@Override
protected void 
    

    • 

  • [光磁与探测]金吕玉衣的意义
comsci

          这是一个古代人的秘密:现在告诉大家
      信不信由你们:
      穿上金律玉衣的人,如果处于灵魂出窍的状态,可以飞到宇宙中去看星星
      这就是为什么古代
    

    • 

  • 精简的反序打印某个数
沐刃青蛟
打印

    以前看到一些让求反序打印某个数的程序。
比如：输入123，输出321。
 
记得以前是告诉你是几位数的，当时就抓耳挠腮，完全没有思路。
 
似乎最后是用到%和/方法解决的。
 
而今突然想到一个简短的方法，就可以实现任意位数的反序打印（但是如果是首位数或者尾位数为0时就没有打印出来了）
 
代码如下：
long num, num1=0;
    

    • 

  • PHP：6种方法获取文件的扩展名
IT独行者
PHP扩展名

     
PHP：6种方法获取文件的扩展名
 
1、字符串查找和截取的方法
  1
$extension
=
substr
(
strrchr
(
$file
, 
'.'
), 1);
2、字符串查找和截取的方法二
  1
$extension
=
substr 
    

    • 

  • 面试111
文强chu
面试

     1事务隔离级别有那些 ，事务特性是什么（问到一次）
2 spring aop 如何管理事务的，如何实现的。动态代理如何实现，jdk怎么实现动态代理的，ioc是怎么实现的，spring是单例还是多例，有那些初始化bean的方式，各有什么区别（经常问）
3 struts默认提供了那些拦截器 （一次）
4 过滤器和拦截器的区别 （频率也挺高）
5 final，finally final
    

    • 

  • XML的四种解析方式
小桔子
domjdomdom4jsax

    在平时工作中，难免会遇到把 XML 作为数据存储格式。面对目前种类繁多的解决方案，哪个最适合我们呢？在这篇文章中，我对这四种主流方案做一个不完全评测，仅仅针对遍历 XML 这块来测试，因为遍历 XML 是工作中使用最多的（至少我认为）。 　　预 备 　　测试环境： 　　AMD 毒龙1.4G OC 1.5G、256M DDR333、Windows2000 Server 
    

    • 

  • wordpress中常见的操作
aichenglong
中文注册wordpress移除菜单

    1 wordpress中使用中文名注册解决办法
  1)使用插件
  2)修改wp源代码
     进入到wp-include/formatting.php文件中找到
      function sanitize_user( $username, $strict = false 
    

    • 

  • 小飞飞学管理-1
alafqq
管理

    项目管理的下午题，其实就在提出问题（挑刺），分析问题，解决问题。
今天我随意看下10年上半年的第一题。主要就是项目经理的提拨和培养。
结合我自己经历写下心得
对于公司选拔和培养项目经理的制度有什么毛病呢？
1，公司考察，选拔项目经理，只关注技术能力，而很少或没有关注管理方面的经验，能力。
2，公司对项目经理缺乏必要的项目管理知识和技能方面的培训。
3，公司对项目经理的工作缺乏进行指
    

    • 

  • IO输入输出部分探讨
百合不是茶
IO

    
 //文件处理  在处理文件输入输出时要引入java.IO这个包；
/*
1，运用File类对文件目录和属性进行操作
2，理解流，理解输入输出流的概念
3，使用字节/符流对文件进行读/写操作
4，了解标准的I/O
5，了解对象序列化
*/
 
//1，运用File类对文件目录和属性进行操作
 
//在工程中线创建一个text.txt
    

    • 

  • getElementById的用法
bijian1013
element

            getElementById是通过Id来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签，条件很简单，就是给每个标签分配一个ID号。
       返回具有指定ID属性值的第一个对象的一个引用。
       语法：
&n
    

    • 

  • 励志经典语录
bijian1013
励志人生

    经典语录1:
  哈佛有一个著名的理论：人的差别在于业余时间，而一个人的命运决定于晚上8点到10点之间。每晚抽出2个小时的时间用来阅读、进修、思考或参加有意的演讲、讨论，你会发现，你的人生正在发生改变，坚持数年之后，成功会向你招手。不要每天抱着QQ/MSN/游戏/电影/肥皂剧……奋斗到12点都舍不得休息，看就看一些励志的影视或者文章，不要当作消遣；学会思考人生，学会感悟人生
    

    • 

  • [MongoDB学习笔记三]MongoDB分片
bit1129
mongodb

    MongoDB的副本集(Replica Set)一方面解决了数据的备份和数据的可靠性问题，另一方面也提升了数据的读写性能。MongoDB分片(Sharding)则解决了数据的扩容问题，MongoDB作为云计算时代的分布式数据库，大容量数据存储，高效并发的数据存取，自动容错等是MongoDB的关键指标。
本篇介绍MongoDB的切片(Sharding)
  1.何时需要分片
&nbs
    

    • 

  • 【Spark八十三】BlockManager在Spark中的使用场景
bit1129
manager

    1. Broadcast变量的存储，在HttpBroadcast类中可以知道
2. RDD通过CacheManager存储RDD中的数据，CacheManager也是通过BlockManager进行存储的
3. ShuffleMapTask得到的结果数据，是通过FileShuffleBlockManager进行管理的，而FileShuffleBlockManager最终也是使用BlockMan
    

    • 

  • yum方式部署zabbix
ronin47
yum方式部署zabbix

    安装网络yum库#rpm -ivh http://repo.zabbix.com/zabbix/2.4/rhel/6/x86_64/zabbix-release-2.4-1.el6.noarch.rpm 通过yum装mysql和zabbix调用的插件还有agent代理#yum install zabbix-server-mysql zabbix-web-mysql mysql-
    

    • 

  • Hibernate4和MySQL5.5自动创建表失败问题解决方法
byalias
J2EEHibernate4

    今天初学Hibernate4，了解了使用Hibernate的过程。大体分为4个步骤：
①创建hibernate.cfg.xml文件
②创建持久化对象
③创建*.hbm.xml映射文件
④编写hibernate相应代码
在第四步中，进行了单元测试，测试预期结果是hibernate自动帮助在数据库中创建数据表，结果JUnit单元测试没有问题，在控制台打印了创建数据表的SQL语句，但在数据库中
    

    • 

  • Netty源码学习-FrameDecoder
bylijinnan
javanetty

    Netty 3.x的user guide里FrameDecoder的例子，有几个疑问：
1.文档说：FrameDecoder calls decode method with an internally maintained cumulative buffer whenever new data is received.
为什么每次有新数据到达时，都会调用decode方法？
2.Dec
    

    • 

  • SQL行列转换方法
chicony
行列转换

    
create table tb(终端名称 varchar(10) , CEI分值 varchar(10) , 终端数量 int)
insert into tb values('三星' , '0-5' , 74)
insert into tb values('三星' , '10-15' , 83)
insert into tb values('苹果' , '0-5' , 93)

    

    • 

  • 中文编码测试
ctrain
编码

    循环打印转换编码
String[] codes = {
"iso-8859-1",
"utf-8",
"gbk",
"unicode"
};
for (int i = 0; i < codes.length; i++) {
for (int j 
    

    • 

  • hive 客户端查询报堆内存溢出解决方法
daizj
hive堆内存溢出

    hive> select * from t_test where ds=20150323 limit 2;
OK
Exception in thread "main" java.lang.OutOfMemoryError: Java heap space
 
问题原因： hive堆内存默认为256M
 
这个问题的解决方法为：
修改/us
    

    • 

  • 人有多大懒，才有多大闲 (评论『卓有成效的程序员』)
dcj3sjt126com
程序员

     
卓有成效的程序员给我的震撼很大，程序员作为特殊的群体，有的人可以这么懒，  懒到事情都交给机器去做 ，而有的人又可以那么勤奋，每天都孜孜不倦得做着重复单调的工作。
 
在看这本书之前，我属于勤奋的人，而看完这本书以后，我要努力变成懒惰的人。
不要在去庞大的开始菜单里面一项一项搜索自己的应用程序，也不要在自己的桌面上放置眼花缭乱的快捷图标
    

    • 

  • Eclipse简单有用的配置
dcj3sjt126com
eclipse

    1、显示行号  Window -- Prefences -- General -- Editors -- Text Editors -- show line numbers
 
2、代码提示字符 Window ->Perferences，并依次展开 Java -> Editor -> Content Assist，最下面一栏 auto-Activation
    

    • 

  • 在tomcat上面安装solr4.8.0全过程
eksliang
Solrsolr4.0后的版本安装solr4.8.0安装

    转载请出自出处：
http://eksliang.iteye.com/blog/2096478
      首先solr是一个基于java的web的应用，所以安装solr之前必须先安装JDK和tomcat，我这里就先省略安装tomcat和jdk了
       
第一步：当然是下载去官网上下载最新的solr版本，下载地址
    

    • 

  • Android APP通用型拒绝服务、漏洞分析报告
gg163
漏洞androidAPP分析

    点评：记得曾经有段时间很多SRC平台被刷了大量APP本地拒绝服务漏洞，移动安全团队爱内测（ineice.com）发现了一个安卓客户端的通用型拒绝服务漏洞，来看看他们的详细分析吧。 
0xr0ot和Xbalien交流所有可能导致应用拒绝服务的异常类型时，发现了一处通用的本地拒绝服务漏洞。该通用型本地拒绝服务可以造成大面积的app拒绝服务。 
针对序列化对象而出现的拒绝服务主要
    

    • 

  • HoverTree项目已经实现分层
hvt
编程.netWebC#ASP.ENT

    HoverTree项目已经初步实现分层，源代码已经上传到 http://hovertree.codeplex.com请到SOURCE CODE查看。在本地用SQL Server 2008 数据库测试成功。数据库和表请参考：http://keleyi.com/a/bjae/ue6stb42.htmHoverTree是一个ASP.NET 开源项目，希望对你学习ASP.NET或者C#语言有帮助，如果你对
    

    • 

  • Google Maps API v3: Remove Markers 移除标记
天梯梦
google maps api

    Simply do the following:
 
I. Declare a global variable:
var markersArray = [];
 
II. Define a function:
function clearOverlays() {
for (var i = 0; i < markersArray.length; i++ )
    

    • 

  • jQuery选择器总结
lq38366
jquery选择器

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
    

    • 

  • 基础数据结构和算法六：Quick sort
sunwinner
AlgorithmQuicksort

    Quick sort is probably used more widely than any other. It is popular because it is not difficult to implement, works well for a variety of different kinds of input data, and is substantially faster t
    

    • 

  • 如何让Flash不遮挡HTML div元素的技巧_HTML/Xhtml_网页制作
刘星宇
htmlWeb

    今天在写一个flash广告代码的时候，因为flash自带的链接，容易被当成弹出广告，所以做了一个div层放到flash上面，这样链接都是a触发的不会被拦截，但发现flash一直处于div层上面，原来flash需要加个参数才可以。
让flash置于DIV层之下的方法，让flash不挡住飘浮层或下拉菜单，让Flash不档住浮动对象或层的关键参数：wmode=opaque。
方法如下：

    

    • 

  • Mybatis实用Mapper SQL汇总示例
wdmcygah
sqlmysqlmybatis实用

    Mybatis作为一个非常好用的持久层框架，相关资料真的是少得可怜，所幸的是官方文档还算详细。本博文主要列举一些个人感觉比较常用的场景及相应的Mapper SQL写法，希望能够对大家有所帮助。
不少持久层框架对动态SQL的支持不足，在SQL需要动态拼接时非常苦恼，而Mybatis很好地解决了这个问题，算是框架的一大亮点。对于常见的场景，例如：批量插入/更新/删除，模糊查询，多条件查询，联表查询，
    

    •