layui.table如何设置某一列隐藏

提问 已结
30 711
軒總純屬悶墩
悬赏:10飞吻
最近想用layui.table作为系统的主要表格显示,但出现一个问题比较纠结,后端需要查询出带有主键ID的一组数据列表,但在表格上又不想显示出主键ID,看了文档,没有找到设置列显示/隐藏的属性,请大神指教一下,谢谢
回帖
  • shmilylee
    15天前
    昨天我也在做表格的功能,也在想着怎么样把id号作为隐藏列,后来在社区里搜索了一下,再看看文档,发现table本来就有id的属性可供使用,“闲心”已经考虑到了

    能够自动找到json里叫"ID"的列,并且界面上并不显示
    0 回复
  • simpleno
    16天前
    如果你的ID 没有其他用处可以直接此属性不展示,如果有用处那就没办法啦。或者用 tpl 方式吧你ID 这列处理下~~
    0 回复
  • 前提:你数据接口返回有id列
    1.layui的api:获取选中行数据、监听复选框点击、监听工具条点击这三个里面获取到的对象有id,即使页面上不写id列。
    2.如果你不用layui的api来获取数据,那么请可以手动设置css,然后再自己获取id。
        td[data-field=id],
    th[data-field=id], {
    display: none;
    }
    觉得对你有用请采纳。[微笑]
    0 回复
  • @simpleno 但是无论怎样,我设置的主键ID的表头都会显示出来,我是想实现,有这个列,但列不显示,包括列表头
    0 回复
  • Dick
    16天前
    表头不定义id也会显示?不至于吧?
    0 回复
  • @Dick 不定义表头,但会在控制台报错,后台返回的字段与table设置的列不匹配
    0 回复
  • @Absolutely 肯定是通过layui的api获取的,但如果后台返回的字段与table设置的列不一致的话,会控制台报错
    0 回复
  • simpleno
    16天前
    @Absolutely 他这个方法是可以的
    {field:'id',title:'ID', display:'none'}
    0 回复
  • @軒總純屬悶墩 我没遇见你那种情况,我都是直接不写那一列,会不会是你其他字段写错了。
    实在不行用第二种手动设置css,但是别人看源代码还是能看见id,只是说页面效果id列是隐藏的。
    0 回复
  • Dick
    16天前
    @軒總純屬悶墩 后台返回的的字段与表格列的关系我个人认为是这样的:
    表格定义的列必须得在返回的数据中找到,而后台返回的字段不一定全部需要在表格里显示吧
    也就是你显不显示id字段你都得返回id这个字段吧,因为layui的表格行数据渲染可能需要用id来标识吧
    有空我试试不显示id列
    0 回复
  • @simpleno {field: 'createTime', title: '操作时间', width: 120, display: 'none'},我这样设置了,还是显示了我想隐藏的列
    0 回复
  • @Absolutely 你不写那一列,可以看下控制台里,有一句不匹配的错误提示的
    0 回复
  • @Dick 你说的有道理,只要是如果后台返回的的字段与表格列的数量不一致,会在控制台报错,你可以看看
    0 回复
  •     td[data-field=id],
    th[data-field=id], {
    display: none;
    }
    这个是万能的
    0 回复
  • simpleno
    16天前
    @軒總純屬悶墩 恩我试了下确实列还是存在,他这个是相对静态表格的,你这个是动态表格,那就把这个列不要了, 可以用的。 我刚试了下可以,你在这行数据的编辑或其他按钮事件中打印下 data 会把本行数据打印出来。

    0 回复
  • @simpleno 你的意思是不管控制台的报错信息么?
    0 回复
  • simpleno
    15天前
    @軒總純屬悶墩

    下边是我的代码,你看下:
     table.render({
    page:false,
    elem:'#table_elms',
    cols:[[

    {field:'fileName',title:'文件名', width:200, sort: true, fixed: true,toolbar:'#filename_tpl'},
    {field:'md5Code',title:'MD5', width:280,toolbar:'#md5_code_tpl'},
    {field:'sourcesType', title:'来源类型',width:140,templet: '#busitype_tpl'},
    {field:'saveDir', title:'存储路径',width:260,templet:'#filesavedir_tpl'},
    {field:'fmtCreateTime',title:'上传时间',sort:true,fixed: 'right', width:190,toolbar:'#up_datetime_tpl'},
    {fixed: 'right', title:'操作',width:190, align:'center', toolbar: '#barButton'}
    ]],
    url:'/bg/busi/files/c_r_i_q_p_f'
    });
    我吧ID 那一列拿掉了
    table.on('tool(tmp_list)', function(obj){
    if(obj.event === 'edit'){
    console.log(obj.data;);
    }
    });
    这里做数据操作, 看下你的数据ID 是否存在,如果存在就可以正常使用了啊。你说的JS 错误是什么?
    贴出来看看。
    0 回复
  • @simpleno
    Layui hint: Table modules: Did not match to field
    0 回复
  • @shmilylee
    后端查询数据:
    {"amount":555.00,"createId":"Jef_Wang","createTime":"2017-09-08 17:05:00","incomeDate":"2017-09-09","incomeId":"6a5f6073-0699-4c58-925c-4c3784237e5f","remark":"555"
    表格定义:
    cols: [[
    {field: 'incomeId', title: '主键ID', width: 320},
    {field: 'incomeDate', title: '收入日期', width: 150},
    {field: 'amount', title: '收入金额', width: 120},
    {field: 'remark', title: '收入备注', width: 500},
    //{field: 'createId', title: '操作人', width: 120},
    //{field: 'createTime', title: '操作时间', width: 120},
    {title: '操作相关', fixed: 'right', width: 240, toolbar: '#btns'} //这里的toolbar值是模板元素的选择器
    ]]
    我注释掉两列后,确实在界面上没有显示了,但在控制台报错
    Layui hint: Table modules: Did not match to field
    0 回复
  • shmilylee
    15天前
    这就奇怪了,我的后端查询出来的数据比你还多,直接赋值给了data属性,我前端只显示了4列,控制台并没有报错
    0 回复
  • shmilylee
    15天前
    0 回复
  • @shmilylee 你用的layui版本是多少,我用的最新的
    0 回复
  • shmilylee
    15天前
    0 回复
  • @shmilylee 我用的是2.1.2
    0 回复
  • @shmilylee 可以把你的2.1.1的包发我一份么?wyzsss777@163.com,万分感谢
    0 回复
  • @shmilylee 我懂了,是因为你设置了id,所以有些列隐藏或不设置都不会报错,不是版本的问题,十分感谢
    0 回复
  • @shmilylee 额,刚才弄错了,还是会报不匹配的错
    0 回复
  • 小面包
    12天前
    @Absolutely 你这个怎么用的呢
    0 回复
  • @小面包 手动设置css样式 隐藏列
    0 回复
  • 小面包
    12天前
    @Absolutely 我测试了下 这里面加上id这栏就可以
    table.render({
    id:'id,status',
    url: postUrl,
    method: 'get',
    elem: elem,
    height: height,
    cols: cols,
    page: page,
    loading: loading,
    even:even
    });
    0 回复