Alloy UI 现有数据表 html table

Question

是否可以从现有 html table 创建 AlloyUI 数据表？并像分页一样应用一些插件？

Answer 1

不幸的是，我认为没有通过 DataTable API 执行此操作的简单方法。但是，从现有的 <table> 中提取数据并将其插入新的并不难。您需要通过其 id 获得 table，如下所示：

var dataTable = Y.one('#dataTableId');

然后您可以通过获取 <th> 元素的 innerHTML 来提取列 header 文本：

tableHeaders = dataTable.one('thead').one('tr').all('th'),
columns = [], i = 0;
tableHeaders.each(function(node) {
    columns[i++] = node.get('innerHTML');
});

同样，您需要提取所有 <td> 元素的 innerHTML：

var tableRows = dataTable.one('tbody').all('tr'),
data = [], i = 0;
tableRows.each(function(node) {
    var row = node.all('td'), rowData = {}, j = 0;
    row.each(function(node) {
        rowData[columns[j++]] = node.get('innerHTML');
    });
    data[i++] = rowData;
});

然后删除旧的<table>:

dataTable.remove(true);

最终将此数据应用到 AlloyUI DataTable:

new Y.DataTable.Base({
    columnset: columns,
    recordset: data,
    render: true
});

注意：所有这些代码都需要在 AUI/YUI 沙箱 (YUI().use('node-core', 'aui-datatable', function(Y) { /* Your code here ... */ });) 中。

可运行示例（取自AlloyUI.com DataTable example）：

YUI().use('aui-node', 'aui-datatable', function(Y) {

  var dataTable = Y.one('#dataTable'),
    tableHeaders = dataTable.one('thead').one('tr').all('th'),
    columns = [],
    i = 0;
  tableHeaders.each(function(node) {
    columns[i++] = node.get('innerHTML');
  });

  var tableRows = dataTable.one('tbody').all('tr'),
    data = [],
    i = 0;
  tableRows.each(function(node) {
    var row = node.all('td'),
      rowData = {},
      j = 0;
    row.each(function(node) {
      rowData[columns[j++]] = node.get('innerHTML');
    });
    data[i++] = rowData;
  });

  dataTable.remove(true);
  new Y.DataTable.Base({
    boundingBox: '.yui3-skin-sam',
    columnset: columns,
    recordset: data,
    render: true
  });
});

<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet" />

<div class="yui3-skin-sam">
  <table id="dataTable" class="yui3-datatable-table" cellspacing="0">
    <thead class="yui3-datatable-columns">
      <tr>
        <th colspan="1" rowspan="1" class="yui3-datatable-header yui3-datatable-first-header yui3-datatable-col-name" scope="col" data-yui3-col-id="name">name</th>
        <th colspan="1" rowspan="1" class="yui3-datatable-header yui3-datatable-col-address" scope="col" data-yui3-col-id="address">address</th>
        <th colspan="1" rowspan="1" class="yui3-datatable-header yui3-datatable-col-city" scope="col" data-yui3-col-id="city">city</th>
        <th colspan="1" rowspan="1" class="yui3-datatable-header yui3-datatable-col-state" scope="col" data-yui3-col-id="state">state</th>
      </tr>
    </thead>
    <tbody class="yui3-datatable-data">
      <tr data-yui3-record="model_1" class="yui3-datatable-even">
        <td class="yui3-datatable-col-name  yui3-datatable-cell ">John A. Smith</td>
        <td class="yui3-datatable-col-address  yui3-datatable-cell ">1236 Some Street</td>
        <td class="yui3-datatable-col-city  yui3-datatable-cell ">San Francisco</td>
        <td class="yui3-datatable-col-state  yui3-datatable-cell ">CA</td>
      </tr>
      <tr data-yui3-record="model_2" class="yui3-datatable-odd">
        <td class="yui3-datatable-col-name  yui3-datatable-cell ">Joan B. Jones</td>
        <td class="yui3-datatable-col-address  yui3-datatable-cell ">3271 Another Ave</td>
        <td class="yui3-datatable-col-city  yui3-datatable-cell ">New York</td>
        <td class="yui3-datatable-col-state  yui3-datatable-cell ">NY</td>
      </tr>
      <tr id="yui_patched_v3_11_0_1_1424728454260_129" data-yui3-record="model_3" class="yui3-datatable-even">
        <td class="yui3-datatable-col-name  yui3-datatable-cell ">Bob C. Uncle</td>
        <td class="yui3-datatable-col-address  yui3-datatable-cell ">9996 Random Road</td>
        <td class="yui3-datatable-col-city  yui3-datatable-cell ">Los Angeles</td>
        <td class="yui3-datatable-col-state  yui3-datatable-cell ">CA</td>
      </tr>
      <tr data-yui3-record="model_4" class="yui3-datatable-odd">
        <td class="yui3-datatable-col-name  yui3-datatable-cell ">John D. Smith</td>
        <td class="yui3-datatable-col-address  yui3-datatable-cell ">1623 Some Street</td>
        <td class="yui3-datatable-col-city  yui3-datatable-cell ">San Francisco</td>
        <td class="yui3-datatable-col-state  yui3-datatable-cell ">CA</td>
      </tr>
      <tr data-yui3-record="model_5" class="yui3-datatable-even">
        <td class="yui3-datatable-col-name  yui3-datatable-cell ">Bob F. Uncle</td>
        <td class="yui3-datatable-col-address  yui3-datatable-cell ">9899 Random Road</td>
        <td class="yui3-datatable-col-city  yui3-datatable-cell ">Los Angeles</td>
        <td class="yui3-datatable-col-state  yui3-datatable-cell ">CA</td>
      </tr>
    </tbody>
  </table>
</div>

Alloy UI 现有数据表 html table

Alloy UI DataTable with existing html table

alloy-ui