美文网首页
搞了一个大工程datatables实现合并

搞了一个大工程datatables实现合并

作者: 江江简书 | 来源:发表于2021-02-04 16:19 被阅读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那么麻烦
    

    相关文章

      网友评论

          本文标题:搞了一个大工程datatables实现合并

          本文链接:https://www.haomeiwen.com/subject/ckvbtltx.html