datatable怎么隐藏列,行数据能不能根据名称而不是顺序赋值
2016-06-13 09:53:09
张小四
  • 访问次数: 6
  • 注册日期: 2016-06-01
  • 最后登录: 2016-07-28

请问:

一、datatable怎么隐藏列

二、 行数据能不能根据名称而不是顺序赋值


谢谢!

沙发
2016-06-13 20:29:12
sunhao
  • 访问次数: 277
  • 注册日期: 2015-04-20
  • 最后登录: 2023-12-13

隐藏列可以在定义列数据是设置 cssClass 为 'hidden';

行数据必须按顺序,你可以自己写一个转换函数来实现按名称;

板凳
2016-06-14 11:56:00
张小四
  • 访问次数: 6
  • 注册日期: 2016-06-01
  • 最后登录: 2016-07-28

谢谢回复

试了设置 cssClass 为 'hidden'后,只隐藏了列标题,数据没有一起隐藏,有什么办法?

#3
2016-06-16 15:12:47
sunhao
  • 访问次数: 277
  • 注册日期: 2015-04-20
  • 最后登录: 2023-12-13

经测试,数据是可以一起隐藏的。你可以在这里调试代码: https://jsfiddle.net/catouse/9k9dgyqx/

$(function() {
		// 准备数据
    var data = {
        cols: [ // 定义列
            { width: 50, text: '#', type: 'number', flex: false, colClass: 'text-center 
                      hidden' },
            { width: 'auto', text: '名称', type: 'string', flex: false, colClass: '' },
            { sort: 'down', width: 120, text: '时间', type: 'date', flex: true, colClass: '' },
            { width: 100, text: '类型', type: 'string', flex: true, colClass: 'text-center' },
            { sort: false, width: 400, text: '描述', type: 'string', flex: true, colClass: 'nobr' },
            { width: 'auto', text: '评分', type: 'number', flex: false, colClass: 'text-center text-important' },
            { width: 60, text: '操作', type: 'number', flex: false, colClass: 'text-center text-primary' }
        ],
        rows: [ // 定义行
        		/*此行中的每一列数据存放在数组中,注意与列定义的顺序一致*/
            { checked: false/*取消选中*/, data: [1, "张三", "2016-03-01", "任务", "例子文本...", 90, '
                      '] },
            { checked: false, data: [2, "李四", "2016-03-02", "待办", "例子文本例子文本例子文本例子文本...", 80, '
                      '] },
            { checked: false, data: [3, "王五", "2016-03-03", "项目", "例子文本例子文本例子文本例子文本例子文本例子文本例子文本...", 90, '
                      '] },
            { checked: false, data: [4, "赵六", "2016-03-04", "任务", "例子文本例子文本例子文本...", 70, '
                      '] },
            { checked: false, data: [5, "孙七", "2016-03-05", "项目", "例子文本例子文本...", 80, '
                      '] }
        ]
    };
    
    // 初始化数据表格,empty方法作用是清空占位内容
    $('#datatableExample').empty().datatable({
        data: data,
        checkable: true,
        sortable: true,
        fixedLeftWidth: '30%', // 左侧固定列总宽度
        fixedRightWidth: '30%' // 又侧固定列总宽度
    });
		// 当点击按钮时,调用 $().datatable('load', new Data|function) 来更新数据表格
    $('#updateDatatableBtn').on('click', function() {
        $('#datatableExample').datatable('load', function(originData, datatable) {
        		// 在此函数中返回更改后的数据,该函数的第一个参数为上次的原始数据,可以直接修改原始数据并返回它
            for (var i = 0; i < originData.rows.length; ++i) { originData.rows[i].data[5] = Math.round(Math.random() * 100); } return originData; }); }); }); 
Catouse 最后编辑, 2016-06-16 15:13:39
1/1