layui动态获取表头 原创

情况稍复杂，表头的列是动态的，且字段名称也不固定

思路：首先ajax获取表头及字段名称，拼接数组，传到前端

获取整体数据时按照表头列名赋值

例如我是将动态列设置为property_动态id的方式

具体代码：

（tp5实现）

ajax方法：

public function getDynamicHead(){
    if(Request::isPost() && Request::isAjax()){
        $courseId = Request::param('course_id');
        $properties = Queryproperties::where('course_id',$courseId)->field('id,name')->select();
        $header2 = array();
        if(count($properties) > 0){
            foreach ($properties as $k=>$v){
                $header2[] = array(
                    'field'=>  'property_'.$v['id'],
                    'width'=> '100',
                    'title'=> $v['name'],
                    'align'=>  'center'
                );
            }
        }
        $header1 = array(
            array('checkbox'=>true),
            array('title'=>'序号','type'=>'numbers'),
            array('field'=>'course_name','width'=>200,'title'=>'课程名称','align'=>'center'),
            array('field'=>'uid','width'=>150,'title'=>'用户名','align'=>'center'),
            array('field'=>'displayname','width'=>100,'title'=>'姓名','align'=>'center'),
        );
        $header3 = array(
            array('field'=>'total','width'=>70,'title'=>'总分','align'=>'center'),
            array('field'=>'notes','width'=>200,'title'=>'注释','align'=>'center'),
            array('fixed'=>'right','width'=>200,'title'=>'操作','align'=>'center','toolbar'=>'#barTool'),
        );
        $dynamicHead = array_merge($header1,$header2,$header3);
        return resMsg(1, array($dynamicHead), '');
    }else{
        return resMsg(-1, $this->_message['request_wrong'], '');
    }
}

获取完整数据方法：

public function userResultList(){
    // 搜索功能
    $courseId = Request::param('course_id');
    if (empty($courseId) ) {
        $courseId = Db::name('query_course_notes')->order('id')->limit(1)->value('course_id');
    }
    $map[] = ['course_id', '=',$courseId];

    $notes = Db::name('query_course_notes')->where($map)->select();
    $userData = array();
    $tablename = $this->getUserTablename($courseId); // 获取数据表名称
    foreach ($notes as $k=>$v){
        $total = 0;
        $uid = $v['uid'];
        $userData[$k]['uid'] = $uid;
        $userData[$k]['course_name'] = getQueryCourseName($courseId);
        $userData[$k]['displayname'] = getUserDisplayName($uid);
        $userData[$k]['notes'] = $v['content'];
        $userProperties = Db::name($tablename)->where('course_id',$courseId)->where('uid',$uid)->field('property_id,score')->select();
        foreach ($userProperties as $kk=>$vv){
            $total += $vv['score'];
            $userData[$k]['property_'.$vv['property_id']] = $vv['score'];
        }
        $userData[$k]['total'] = (String)$total; // 总分
    }
    $result = array("code" => 0, "msg" => $this->_message['query_success'], "count" => 0, "data" => $userData);
    return json($result);
}

前端：

let attrCols;
$.ajax({
    url: '{:url("getDynamicHead")}',
    type: 'POST',
    dataType: 'json',
    async: false,
    data: {
        course_id : courseId
    },
    success: function(res){
        if (res.status == 1) {
            attrCols = res.message;
        }
    }
});

table.render({
    elem : '#dataTable'
    ,url : '{:url("userResultList")}'
    ,cellMinWidth: 80
    ,page: {
        prev: '上一页',
        next: '下一页',
        layout: ['prev', 'page', 'next', 'skip', 'count', 'limit']
    }
    ,limit: 20 //每页默认显示的数量
    ,toolbar: '#toolbar' // 指定顶部工具栏模板
    ,title: '课程数据'  // 表格标题，用户导出数据文件名
    ,text: {  // 指定无数据或数据异常时的提示文本
        none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
    }
    ,id: 'dataTable'
    ,cols: attrCols
    , done:function() {
        // 搜索功能
        var $ = layui.$, active = {
            reload: function(){
                var course_id = $('#course_id');
                //执行重载
                table.reload('dataTable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        keywords: keywords.val(),
                        gid: gid.val()
                    }
                }, 'data');
                $('#course_id').val(course_id.val());
                bindTableToolbarFunction();
            }
        };
        $('.search-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    }
});

思路来源于以下链接分享：

https://blog.csdn.net/sinat_31986807/article/details/87007953

https://blog.csdn.net/u011456813/article/details/86484762

https://blog.csdn.net/qq_26814945/article/details/89356898

https://segmentfault.com/a/1190000038770849

https://blog.csdn.net/Rec_Mervyn/article/details/105367817