搞了一个大工程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那么麻烦
上一篇下一篇

猜你喜欢

热点阅读