Question

是否可以从现有的html表创建AlloyUI DataTable？并像分页那样应用一些插件吗？

Answer 1

不幸的是，我不认为通过DataTable API有一种简单的方法可以做到这一点。但是，从现有<table>中提取数据并将其插入新数据并不难。你需要通过id来获取表格，如下所示：

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

然后，您可以通过获取innerHTML元素的<th>来提取列标题文字：

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

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

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 DataTable与现有的html表

1 个答案: