一个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对象。

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