Antd--表格之行/列合并
注意:antd官方行/列合并参考:https://1x.ant.design/components/table/#components-table-demo-colspan-rowspan, 感觉网上大多是直接复制的antd代码。大家可以从这个链接,直到antd,或者您可以搜素antd官网进行查看
表格行/列合并
表头只支持列合并,使用 column 里的 colSpan 进行设置。
表格支持行/列合并,使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时,设置的表格不会渲染。
合并关键词:rowSpan[行合并] colSpan[列合并]
以上是Antd原展示,以及说明,这里大家可以直接跳转上面的连接查看相关说明。
我遇到的问题是:对于可编辑表格的数据合并。
1.如何处理表格可编辑。
2.如何标记编辑了哪一行[特别是跨行的时候]
3.提交数据【数据保存】
问题1解决:如何处理表格可编辑
其实如果你留意antd说明,你大概就知道了,antd中对于数据每一列,有一个render方法
onst columns = [{
title: '姓名',
dataIndex: 'name',
render(text, row, index) { // *** 1:关键就是这个render方法 ***
if (index < 4) { return <a href="#">{text}</a>; }
return {
children: <a href="#">{text}</a>, //*** 2:可编辑关键就是这个
props: { colSpan: 5, }, // *** 3:合并行列关键
};
},
}]
注释1:表明我们可以通过这个方法任意扩展,需要的业务逻辑
注释2:表明我们可以返回任意的htm标签【当然包括input类,以及自己封装的组件】
注释3:这个对象我们可以设置colSpan,rowSpan用来合并行列【跨列,跨行】
代码实现【部分】:
const columns = [
{
title: <span> "节点名称"</span>,
dataIndex: "nodename",
render(value, row, index) { return that.fnGetRowSpanMerge(row, index, <span>{value}</span>); },
},
{
title: <span> "节点前附加操作"</span>,
dataIndex: "action_node_pre",
render(value, row, index) {
return that.fnGetRowSpanMerge(row, index, that.fnGetBrowBtn(row, getLabel(388414, "契约锁") + "action", "action_node_pre", true, false));
},
}]
/** 获取行并信息 @value 文本值 @row 整行的数据 @index 行下标 @children ta的数据格式具体 @ishow 是否显示空数据 */
fnGetRowSpanMerge = (row, index, children, ishow) => {//这个方法用来跨行跨列
const obj = {
props: {rowSpan: 1,},
children: children,
}
if (row.linksize > 1 && !ishow) {//包含跨行,且不显示多行相同数据
obj.props.rowSpan = row.rowspan;
}
return obj;
}
/** * 获取浏览按钮的信息 @param row 行信息 @param title 浏览框title @param id 数据源id @param isnode 是否是节点 @param islink 是否是出口 @returns {*} */
fnGetBrowBtn = (row, title, id, isnode, islink) => {//通过该方法返回表格数据, 可以是check,select, input,以及封装的组件
let replacedatas = toJS(row[id + "rep"]);
return (<WeaBrowser onChange={()=>{xxx}}/>);//目前是自己封装的组件 注意onchange时间
}
问题2解决:如何标记编辑了哪一行[特别是夸行的时候]
主要利用解决问题1时预留的onchange事件进行修改数据。
这里注意一点:既然你在合并这几行。那么标志着你不关心这些行,或者这些行数据一直。那么我们可以管理整个表单的数据,使这些行数据数据相同即可,
/**
* 附加操作onchange事件,这里主要是正对浏览按钮
* @param ids_value 改变后的ids值
* @param names_value 改变后的value值
* @param datas 改变数据的封装【可以传null】
* @param row 所属改变行的整体数据
* @param id 列id
* @param isnode 是否是节点
* @param islink 是否是出口
*/
fnAdditionalChange = (ids_value, names_value, datas, row, id, isnode, islink) => {
const {myCusIntSet} = this.props; //使用可编辑表格,那么肯定会有一个原始数据供我们操作,这里就是tabledata
const {tabledata, updateTableData} = myCusIntSet;
tabledata && tabledata.map(item => {
if (isnode && item.nodeid == row.nodeid) {//这里就是同步所有行的数据一致
item[id] = ids_value;
item[id + "span"] = names_value;
}
if (islink && item.linkid == row.linkid) {//这里是同步所有列的数据一致
item[id] = ids_value;
item[id + "span"] = names_value;
}
})
tabledata && updateTableData(toJS(tabledata));
}
解决关键:对于原始数据上操作时,相同的行列数据,给定特定的标识符【用同样的id,或者其他属性】
问题3解决:提交数据【数据保存】
这里我们可以通过set集合判断数据是否重复,从而去掉重复数据。或者执行数据持久时,先判断数据是否存在,存在相同数据则不保存即可。
特别注意:对于这种可编辑数据我们传递给后台需要做数据转换前端:JSON.stringify(tabledata), 后端: JSONArray.fromObject(tabledata);//转json数组.具体请参看我的另外一篇文章【我的JSON问题】
到此结束:欢迎大家指导。