搞了一个大工程datatables实现合并
2021-02-04 本文已影响0人
江江简书
最近在搞一个勾选项目参数的问题这其中涉及父子级关系同时,还要根据datatable布局返回格式样式,因此前端数据驱动后端的组合
最终的效果
image.png前端datatable设置片段
// 这里是datatable初始化时候需要设置合并的参数
columnDefs: [{
targets: [1],
createdCell: function (td, cellData, rowData, row, col) {
//第0列需要合并的行数然后移除未设置num的行
var rowspan = rowData.merge1; //拿到第一列需要合并的数据,merge1参数需要后端组装好直接返回的
if (rowspan == rowData.merge1) {
$(td).attr('rowspan', rowspan)
}
if (rowspan == 0) {
$(td).remove();
}
}
},
{
targets: [2],
createdCell: function (td, cellData, rowData, row, col) {
//第0列需要合并的行数然后移除未设置num的行
var rowspan = rowData.merge2; //拿到第一列需要合并的数据
if (rowspan == rowData.merge2) {
$(td).attr('rowspan', rowspan)
}
if (rowspan == 0) {
$(td).remove();
}
}
},
{
targets: [3],
createdCell: function (td, cellData, rowData, row, col) {
//第0列需要合并的行数然后移除未设置num的行
var rowspan = rowData.merge3; //拿到第一列需要合并的数据
if (rowspan == rowData.merge3) {
$(td).attr('rowspan', rowspan)
}
if (rowspan == 0) {
$(td).remove();
}
}
}
]
后端代码片段(较为复杂)
/*
1.首先递归获取到所有递归树
2.根据递归树返回当前最后一级以上的所有父级
3.设置merge参数
4.返回数据
*/
class Test{
//获取递归树
public function assettreedata(array $treedata, $pId)
{
$tree = array();
foreach ($treedata as $k => $v) {
if ($v['id_parentitem'] == $pId) {
$v['cate_ParentId'] = $this->assettreedata($treedata, $v['id_repair_item']);
$tree[] = $v;
}
}
return $tree;
}
//剩余的部分省略了代码有些杂有一些敏感数据源,如果你有同样的需求不妨可以私聊我
}
``
结束语:做完这个项目感觉后端的数据格式是根据前端驱动的,前端要什么数据后端就得根据实际情况组装返回
回头看:其实layer merge组件可以很好解决这个合并问题,不用datatable那么麻烦