建议为数据表格的cols参数增加function函数返回数组

建议 已结 6 186
琢玉
琢玉 VIP4 2020-2-19
悬赏:20飞吻
由于电脑端屏幕尺寸较大,而手机端屏幕较小,因此需要根据是否为手机的判断返回表头数据,手机端的表头个数肯定要少一点,如:

,title: '用户数据表'
,cols: function(d){
console.log(isMobile);
return isMobile ? [[
{field: 'id', checkbox: true, unresize: true, align:"center"}
,{field: 'cn', title: '班级', sort: true, align:"center"},
,{field: 'sn', title: '姓名', align:"center"}
]] : [[ //表头
{field: 'id', checkbox: true, unresize: true, align:"center"}
,{field: 'cn', title: '班级', sort: true, align:"center"},
,{field: 'sn', title: '姓名', align:"center"},
,{field: 'sex', title: '性别', align:"center", templet: function(d){return "<div>"+(d.sex ? '男' : '女')+"</div>";}}
,{field: 'ymd', title: '出生年月', align:"center"},
,{field: 'ng', title: '民族', align:"center"},
,{field: 'pn', title: '家长姓名', align:"center"},
,{field: 'area', title: '籍贯', align:"center"},
,{field: 'sid', title: '身份证号',unresize: true, align:"center"},
,{field: 'address', title: '家庭住址', align:"center"},
,{field: 'tel', title: '联系电话'}
,{fixed: 'right', title: '相关操作', width:100, align:'center', toolbar: '#toolBar'} //这里的toolbar值是模板元素的选择器
]];
}
但我调试结果显示表头和数据区均未显示任何内容。

cols 默认接收Array数组,要是能支持函数返回的Array就更好了!
回帖
  • 你可以返回所有的列,然后在parsedata里根据你的业务逻辑和返回的res动态写你的cols
    0 回复
  • CrazyYi
    2020-2-19
    你这个是好的建议。但你这个,完全也可以实现。

    1、先判断当前是手机还是PC;
    2、定义一个cols(一维或者二维数组)。根据是否是手机,定义cols 里面具体的值。
    3、定义table options,给table options里面的cols 赋值刚才定义的cols。

    不就可以实现你的需求了
    0 回复
  • @HiTerry 目前确实只能这样做了,也暂时这样实现了。非常感谢!!
    0 回复
  • @CrazyYi 数据接口json数据是url动态获取的,外置判断模块和array数组维护上稍有不便,一体化可能会更好一点。目前实现方式还是采用全局cols+parseData判断手机动态修改的方式进行的,但需要table.reload()一次,需要限定首次加载触发,否则会无休止reload(),且属于Dom操作,对分页有一定影响。
    ,cols: [[ //表头
    {field: 'id', checkbox: true, unresize: true, align:"center"}
    ,{field: 'sc_name', title: '学校', align:"center", width:200}
    ,{field: 'cn', title: '班级', sort: true, align:"center"}
    ,{field: 'sn', title: '姓名', align:"center"}
    ,{field: 'sex', title: '性别', align:"center", templet: function(d){return "<div>"+(d.sex ? '男' : '女')+"</div>";}}
    ,{field: 'ymd', title: '出生年月', align:"center"}
    ,{field: 'ng', title: '民族', align:"center"}
    ,{field: 'pn', title: '家长姓名', align:"center"}
    ,{field: 'area', title: '籍贯', align:"center"}
    ,{field: 'sid', title: '身份证号',unresize: true, align:"center"}
    ,{field: 'address', title: '家庭住址', align:"center"}
    ,{field: 'tel', title: '联系电话'}
    ,{fixed: 'right', title: '相关操作', width:100, align:'center', toolbar: '#toolBar'} //这里的toolbar值是模板元素的选择器
    ]]
    ,parseData: function(res) { //res 即为原始返回的数据
    //console.log(res);
    //console.log(isMobile);
    if (this.first) { //首次
    var cols = this.cols; //当前表格的表头
    //console.log(cols);
    this.cols = isMobile ? [[
    {field: 'id', checkbox: true, unresize: true, align:"center"}
    ,{field: 'cn', title: '班级', width:100, sort: true, align:"center"}
    ,{field: 'sn', title: '姓名', width:100, align:"center"}
    ,{fixed: 'right', title: '相关操作', width:100, align:'center', toolbar: '#toolBar'} //这里的toolbar值是模板元素的选择器
    ]] : [[ //表头
    {field: 'id', checkbox: true, unresize: true, align:"center"}
    ,{field: 'sc_name', title: '学校', align:"center", width:200}
    ,{field: 'cn', title: '班级', width:100, sort: true, align:"center"}
    ,{field: 'sn', title: '姓名', width:100, align:"center"}
    ,{field: 'sex', title: '性别', width:60, align:"center", templet: function(d){return "<div>"+(d.sex ? '男' : '女')+"</div>";}}
    ,{field: 'ymd', title: '出生年月', width:120, align:"center"}
    ,{field: 'ng', title: '民族', width:100, align:"center"}
    ,{field: 'pn', title: '家长姓名', width:100, align:"center"}
    ,{field: 'area', title: '籍贯', width:100, align:"center"}
    ,{field: 'sid', title: '身份证号', width:180,unresize: true, align:"center"}
    ,{field: 'address', title: '家庭住址', align:"center"}
    ,{field: 'tel', title: '联系电话', width:120,}
    ,{fixed: 'right', title: '相关操作', width:100, align:'center', toolbar: '#toolBar'} //这里的toolbar值是模板元素的选择器
    ]];
    //console.log(cols);
    //console.log(this.id);
    this.first = false;
    table.reload(this.id); //重载一级表头
    }
    }
    0 回复
  • CrazyYi
    2020-2-20
    @琢玉 [泪] 为啥要这样做?

    是否是手机端,这个在页面加载的时候,就可以知道了。所以,你应该这样做:

    // 判断当前是否是手机端
    var isMobile = true; // 这里的判断就自己写

    // 设置cols 格式
    const colsMobile = [[
    {field: 'id', checkbox: true, unresize: true, align:"center"}
    ,{field: 'cn', title: '班级', width:100, sort: true, align:"center"}
    ,{field: 'sn', title: '姓名', width:100, align:"center"}
    ,{fixed: 'right', title: '相关操作', width:100, align:'center', toolbar: '#toolBar'}
    ]];
    const colsPC = [[
    {field: 'id', checkbox: true, unresize: true, align:"center"}
    ,{field: 'sc_name', title: '学校', align:"center", width:200}
    ,{field: 'cn', title: '班级', width:100, sort: true, align:"center"}
    ,{field: 'sn', title: '姓名', width:100, align:"center"}
    ,{field: 'sex', title: '性别', width:60, align:"center", templet: function(d){return "<div>"+(d.sex ? '男' : '女')+"</div>";}}
    ,{field: 'ymd', title: '出生年月', width:120, align:"center"}
    ,{field: 'ng', title: '民族', width:100, align:"center"}
    ,{field: 'pn', title: '家长姓名', width:100, align:"center"}
    ,{field: 'area', title: '籍贯', width:100, align:"center"}
    ,{field: 'sid', title: '身份证号', width:180,unresize: true, align:"center"}
    ,{field: 'address', title: '家庭住址', align:"center"}
    ,{field: 'tel', title: '联系电话', width:120,}
    ,{fixed: 'right', title: '相关操作', width:100, align:'center', toolbar: '#toolBar'}
    ]]

    // 初始化table options
    const tableOptions = {
    // 其他参数
    cols: isMobile? colsMobile: colsPC,
    // 其他参数
    };

    //渲染table
    table.render(tableOptions);
    0 回复
  • @CrazyYi 非常感谢您的回复,可能是代码洁癖吧,我想的是一体化实现,也就是在table.render代码段里实现所有功能,不想分崩离析,这样便于代码维护和修改,因为都在一块儿,这也是我在这里发建议的原因,不然完全可以用你的来实现的!很抱歉没有采纳你的回复,由于是给官方的建议,所以还是希望官方能有有这种一体化编程的实现机制。
    最后再说一次感谢,还有抱歉!![礼物]
    0 回复