React 合并行 RowSpan
十年河东,十年河西,莫欺少年穷
学无止境,精益求精
今儿分享一篇关于React Table 组件合并单元行的方法!
实例效果如下:
原则就是遇到相同的供方名称,就要做行合并!
思路如下:后端计算合并的行数,前端绑定即可!注:此算法通用
后端方法如下(RowSpan是返回LIst<Model>数据中Model的属性,用于前端绑定即可):
if (data.list != null)
{
for(int i = ; i < data.list.Count; i++)
{
int index = GetIndex(data.list, i);
if (index == )
{
data.list[i].RowSpan = ;
}
else
{
data.list[i].RowSpan = index+;
i+= index;
}
}
//var lst = data.list.Select(A => A.RowSpan).ToList();
}
GetIndex()方法为:
private int GetIndex(List<V_SM_R_SpClassifyModel> list,int i)
{
int num = ;
for (int j = i + ; j < list.Count; j++)
{
if (list[i].SupplierName == list[j].SupplierName)
{
num++;
}
else
{
break;
}
}
return num;
}
根据以上算法,即可算出要合并的行\
前端绑定如下:
{
title: '供方名称',
dataIndex: 'SupplierName',
sorter: true,
render: (value, row, index) => { const obj = {
children: <a href='javascript:void(0)'>
<Link target='_blank' to={`/supplier/info/${row.SupplierId}/${row.SpClassifyId}`}>
{row.SupplierName}
{
row.IsDelayStorage
? <span style={{ color: 'red' }}>(后入库)</span>
: null
}
</Link>
</a>,
props: { rowSpan: row.RowSpan },
}
return obj
}
}
@陈卧龙的博客
React 合并行 RowSpan的更多相关文章
- Reapter合并行
html文件: <asp:Repeater ID="rptEmployee" runat="server"> <HeaderTemplate& ...
- Vim常用操作-合并行。
刚接触 Vim 会觉得它的学习曲线非常陡峭,要记住很多命令.所以这个系列的分享,不会教你怎么配置它,而是教你怎么快速的使用它. 在开发时为了代码美观,经常会把属性用换行的方式显示. <el-di ...
- easyui生成合并行,合计计算价格
easyui生成合并行,合计计算价格 注:本文来源: 原创 一:图样你效果图 二:代码实现 1:datagrid 列展示: window.dataGrid = $("#dataGrid&qu ...
- sed行处理详解(交换行,合并行,删除行等)
1.合并行 zj@zj:~/Script/blog_script$ cat test11234合并上下两行zj@zj:~/Script/blog_script$ sed '$!N;s/\n/\t/' ...
- 【editplus经常用的快捷键】Editplus 选中一行ctrl+r,Edit 合并行 Ctrl+Shift+J 合并选定行 删除当前行
Editplus 选中一行: ctrl+rEditplus 复制一行: ctrl+r选择行,然后ctrl+c复制.复制一行到下一行中:Editplus有:Ctrl+j 复制上一行的一个字符到当前行Ed ...
- easyui-datagrid自动合并行
1.目标 1.1表格初始化完成后,已经自动合并好需要合并的行: 1.2当点击字段排序后,重新进行合并: 2.实现 2.1 引入插件 /** * author ____′↘夏悸 * create dat ...
- js合并行
网上找了好久才找到,在这记录下. <script type="text/javascript" > function MergerRow(ID) { var tab = ...
- element-ui合并行:span-method
objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { if (rowIndex % 2 ...
- easyui------自动合并行
转载: http://www.cnblogs.com/xiangzhong/p/5088259.html#undefined 1.引入插件 $.extend($.fn.datagrid.methods ...
随机推荐
- 理解 docker 容器中的 uid 和 gid
默认情况下,容器中的进程以 root 用户权限运行,并且这个 root 用户和宿主机中的 root 是同一个用户.听起来是不是很可怕,因为这就意味着一旦容器中的进程有了适当的机会,它就可以控制宿主机上 ...
- 痞子衡嵌入式:常用的数据差错控制技术(3)- 和校验(Checksum)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家讲的是嵌入式里数据差错控制技术-和校验. 在系列前一篇文章里,痞子衡给大家介绍了比较简单的校验法-奇偶校验,该校验法主要是针对byte传输校验而 ...
- windows7安装MySQL-python遇到的坑
最近在windows环境上搭建flask使用环境,遇到过很多坑,这次就记录下安装flask-mysqldb所遇到的坑. 正常逻辑是使用pip install flask-mysqldb进行安装.但是会 ...
- JDK动态代理深入理解分析并手写简易JDK动态代理(下)
原文同步发表至个人博客[夜月归途] 原文链接:http://www.guitu18.com/se/java/2019-01-05/27.html 作者:夜月归途 出处:http://www.guitu ...
- [Css] css3的flex布局
flex思维导图 {"name":"flex","children":[{"name":"传统布局方式&quo ...
- 第26章 联合注销 - Identity Server 4 中文文档(v1.0.0)
联合注销是指用户使用外部身份提供程序登录IdentityServer,然后用户通过IdentityServer未知的工作流程注销该外部身份提供程序的情况.当用户注销时,对IdentityServer进 ...
- C# 创建EXCEL图表并保存为图片
数据表格能够清晰的呈现数据信息,但是我们对于一些繁杂多变的数据想要很直观的看到数据变化走势或者数据的占比时,数据图表会更具代表性,并且在呈现数据信息上也更形象,也能获取更多纯数字信息所不能直接展现的信 ...
- 散列表(has table、哈希表)
一. 散列表是什么 是包含映射关系的一种数据结构,可以提高查找效率. 二. 散列函数 1)必须是一致的.假设输入一个单词“banana”,映射的数字是1,那么以后每次输入banana都要映射到数字1, ...
- arcgis for js学习之Draw类
arcgis for js学习之Draw类 <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...
- iOS ----------NSDate 、CFAbsoluteTimeGetCurrent、CACurrentMediaTime 的区别
框架层: NSDate 属于Foundation CFAbsoluteTimeGetCurrent() 属于 CoreFoundatio CACurrentMediaTime() 属于 QuartzC ...