一个dataTable的简单实现思路

项目中原本是使用了easyUI，但是实际使用的过程中遇到了很多问题，一时心血来潮就自己构思了一个实现，测试没有明显的bug之后应用在了项目中。

现将其记录在这里，算是对自己姿势水平的一个记录。

要实现数据表格，必不可少的参数有二：

• 容器元素
• 数据源

对于数据表格的实现，其核心就是按行循环获取到的数据生成DOM元素并插入页面：
我们假设获取到的数据如下：

{
    rows: [
        {
            "col1": "aaa",
            "col2": "bbb",
            "col3": "ccc"
        },
        {
            "col1": "ddd",
            "col2": "eee",
            "col3": "fff"
        }
    ]
}

对于这组数据我们的核心处理方法大致如下：

function DTable (container, data) {
    var table = document.createElement('div');
    if(Array.isArray(data.rows) && data.rows.length){
        for (var i = 0; i < data.rows.length; i++) {
            var row = document.createElement('div');
            for (var col in data.rows[i]) {
                var cell = document.createElement('div');
                cell.innerHTML = data.rows[i][col];
                cell.className = 'td';
                row.appendChild(cell);
            }
            row.className = 'tr';
            table.appendChild(row);
        }
    }
    else {
        table.innerHTML = '未获取到数据';
    }
    table.className = 'table';
    container.appendChild(table);
}

对应的CSS如下：

.table {
    display: table;
    table-layout: fixed;
}

.tr {
    display: table-row;
}

.td {
    display: table-cell;
}

这样我们就成功地将数据以表格的形式呈现出来了。但是仅仅这样显然是远远不够的，我们需要对这个最基本的表格进行扩展，这样就需要引入新的参数：

• 选项

一般来说作为可选参数传入的options参数，我倾向于传入一个对象，在这里规定我们需要的其他所有可选参数，例如，我们可能需要将表格的第一行作为表头，还需要让表格隔行条纹状显示，我们还可能想要自己决定请求到的数据中哪些是显示的，哪些是不显示的：

{
    "tableHeader": true,
    "stripled": true,
    "cols": ['col1', 'col2', 'col3']
    //...
}

与此对应，我们的函数主体和CSS也要作出相应扩展：

function DTable (container, data, options) {
    var table = document.createElement('div');
    if(Array.isArray(data.rows) && data.rows.length){
        if (options.tableHeader) {
            var th = document.createElement('div');
        }
        for (var i = 0; i < data.rows.length; i++) {
            var row = document.createElement('div');
            options.cols.forEach(function (col){
                var cell = document.createElement('div');
                if (data.rows[i][col]) {
                    cell.innerHTML = data.rows[i][col];
                }
                cell.className = 'td';
                row.appendChild(cell);
            });
            if (options.stripled && !(i % 2)) {
                row.className = 'tr stripled';
            }
            else {
                row.className = 'tr';
            }
            table.appendChild(row);
        }
    }
    else {
        table.innerHTML = '未获取到数据';
    }
    table.className = 'table';
    container.appendChild(table);
}

除此之外，我们或许还期待这个数据表格不仅仅是一个数据视图而是可编辑的，等等。具体代码暂时不再详细列出，仅写明思路：

• 编辑工具栏默认配置一些按钮的同时，额外提供一些可自定义按钮的方法；
• 增加修改表格数据的方法不内置处理，而是传入函数内部调用执行；
• 在自定义显示列的基础上，可以增加请求的数据中没有的列，传入一个formatter函数来控制其中显示的内容；
• 将函数主体封装，将需要外部调用的方法暴露出来，返回一个table对象。

以上，暂时仅将主体函数之外的想法简单记录。若有机会，再来将完善后的代码贴出。