javascript - 尝试使用 Tablesorter 完全动态地构建表格

Question

我正在尝试使用 TableSorter jQuery 插件来完全动态地构建一个表(标题和数据)。

与大多数 Web 应用程序一样，用户输入一些数据/条件，单击按钮，然后返回数据。我构建了一个表来保存数据，用户可以对其进行排序。我已经很好地工作了，但是，我们决定需要用户能够指定他们想要的数据列以及这些列的顺序。

数据检索完成。我通过 Web 方法从 aspx 页面调用 javascript/jQuery 到 aspx.vb 代码隐藏。后面的代码与 DLL 交互它将其信息传回数据表。我从数据表构建一个字符串以传回 javascript/jQuery 代码。在 javascript 中，字符串被拆分为字符串数组。

这是我之前构建表格的方式(在用户指定列和列顺序的要求之前):

HTML:

<table id="mytable" class="tablesorter" border="1">
       <thead title="Click to sort">
        <tr>
        <th style="color:#A7C942;" title="Click for default order"><div class="1"></div></th>
        <th><div id="div1" class="2">Column2</div></th>
        <th><div class="3">Column3</div></th>
        <th><div class="4">Column4</div></th>
        <th><div class="5">Column5</div></th>
        <th><div class="6">Column6</div></th>
        <th><div class="7">Column7</div></th>
        <th><div class="8">Column8</div></th>
        <th><div class="9">Column9</div></th>
        <th><div class="10">Column10</div></th>
        <th><div class="11">Column11</div></th>
        <th><div class="12">Column12</div></th>
        <th><div class="13">Column13</div></th>
        <th><div class="14">Column14</div></th>
        <th><div class="15">Column15</div></th>
        <th><div class="16">Column16</div></th>
        <th><div class="17">Column17</div></th>
        </tr>
        </thead>
           <tbody>

           </tbody>
       </table>

Javascript:

var table = '';

for (var i = 1; i <= NumberOfRecords; i++) { //for each record
   if (i % 2 == 0) { table += '<tr class="even">'; } else {
       table += '<tr>';
   }


   table += '<td><div class="1"><img src="/resources/ic_menu_search.png" alt="" height="20" width="20" style="cursor: pointer;" id="' + i + '" ></img></div></td>';
   table += '<td><div class="2">' + TableResults[((i - 1) * 459) + 1] + '</div></td>';
   table += '<td><div class="3">' + TableResults[((i - 1) * 459) + 4] + '</div></td>';
   table += '<td><div class="4">' + TableResults[((i - 1) * 459) + 5] + '</div></td>';
   table += '<td><div class="5">' + TableResults[((i - 1) * 459) + 6] + '</div></td>';
   table += '<td><div class="6">' + TableResults[((i - 1) * 459) + 9] + '</div></td>';
   table += '<td><div class="7">' + "$" + TableResults[((i - 1) * 459) + 12] + ".00" + '</div></td>';
   table += '<td><div class="8">' + TableResults[((i - 1) * 459) + 15] + '</div></td>';
   table += '<td><div class="9">' + TableResults[((i - 1) * 459) + 16] + '</div></td>';
   table += '<td><div class="10">' + TableResults[((i - 1) * 459) + 37] + '</div></td>';
   table += '<td><div class="11">' + TableResults[((i - 1) * 459) + 38] + '</div></td>';
   table += '<td><div class="12">' + TableResults[((i - 1) * 459) + 39] + "%" + '</div></td>';
   table += '<td><div class="13">' + TableResults[((i - 1) * 459) + 45] + '</div></td>';
   table += '<td><div class="14">' + TableResults[((i - 1) * 459) + 66] + '</div></td>';
   table += '<td><div class="15">' + TableResults[((i - 1) * 459) + 78] + '</div></td>';
   table += '<td><div class="16">' + "$" + TableResults[((i - 1) * 459) + 81] + ".00" + '</div></td>';
   table += '<td><div class="17">' + TableResults[((i - 1) * 459) + 109] + '</div></td>';
   table += '</tr>';


  } 



$('#mytable').append(table);

表格排序器:

$('#mytable').tablesorter({
              theme: 'default',
              widgets: ['zebra', 'reorder'],
              widgetOptions: {
                  reorder_axis: 'x', // 'x' or 'xy'
                  reorder_delay: 300,
                  reorder_helperClass: 'tablesorter-reorder-helper',
                  reorder_helperBar: 'tablesorter-reorder-helper-bar',
                  reorder_noReorder: 'reorder-false',
                  reorder_blocked: 'reorder-block-left reorder-block-end',
                  reorder_complete: null // callback
              }

          })

我为每个设置了 div 类，因为标题和数据没有正确排列，因为它们是在不同时间创建的。这工作正常，但由于用户需要能够确定他们看到的列以及按什么顺序，我将不得不以不同的方式处理它。我遇到了为 TableSorter 构建表格小部件并尝试按如下方式实现它:

HTML:

   <div id="mytable">
   </div>

Javascript(前两列是静态的，其余的将由用户在设置屏幕上设置):

   var table = [];

   table += '[ [' + ['', 'Column2', 'Column3', 'Column4', 'Column5', 'Column6', 'Column7', 'Column8', 'Column9', 'Column10', 'Column11', 'Column12', 'Column13', 'Column14', 'Column15', 'Column16', 'Column17'] + '],';

   for (var i = 1; i <= NumberOfRecords; i++) { //for each record
      table += '[' + [i, TableResults[((i - 1) * 459) + 1], TableResults[((i - 1) * 459) + 4], TableResults[((i - 1) * 459) + 5], TableResults[((i - 1) * 459) + 6], TableResults[((i - 1) * 459) + 9], TableResults[((i - 1) * 459) + 12], TableResults[((i - 1) * 459) + 15], TableResults[((i - 1) * 459) + 16], TableResults[((i - 1) * 459) + 37], TableResults[((i - 1) * 459) + 38], TableResults[((i - 1) * 459) + 39], TableResults[((i - 1) * 459) + 45], TableResults[((i - 1) * 459) + 66], TableResults[((i - 1) * 459) + 78], TableResults[((i - 1) * 459) + 81], TableResults[((i - 1) * 459) + 109]] + ']';

      if (i != NumberOfRecords) {
          table += ',';
      }
   }

   table += '];'

表格排序器:

   $('#mytable').tablesorter({
              theme: 'default',
              widgets: ['zebra', 'reorder', 'stickyHeaders'],//, 'resizable'],
              widgetOptions: {
                  build_source: table,
                  build_headers: {
                      rows: 1,
                      classes: [],
                      text: [],
                      widths : ['3%', '8%', '7%', '7%', '7%', '7%', '6%', '7%', '7%', '7%', '7%', '7%', '7%', '7%', '6%']
                  }

              }

          })

但是，这不会做任何事情。如果我添加“$('#mytable').append(table);”它会附加文本，但我仍然没有表格。我已经确定了构建表的代码小部件包含在项目中，如果我设置断点，它会在加载时命中。

最终目标是从数据库中读取用户的列首选项(这很容易)并使用选定的列完全动态地生成一个表。然后该表需要可排序，具有可重新排序的列(我也有一个 TableSorter 小部件)，并且列需要可调整大小(另一个 TableSorter 小部件)。

如何即时构建此表，才能实现上述目标，并使列与数据对齐？我究竟做错了什么？提前感谢您提供的任何帮助!

Answer 1

在我看来，表格的 tbody 需要定位。

好吧，看起来 $('#mytable') 实际上是针对一个表元素；由于 javascript 没有 thead 或 tbody 元素，附加代码应如下所示:

$('#mytable tbody').append(table);

至于用户构建的修改后的 header ，我没有看到上面的代码。

如果你想使用构建小部件，上面的table 数组应该包含一个行数组的数组，目前它正在构建一个大字符串的数组。试试这个(未经测试):

var table = [];
table.push(['', 'Column2', 'Column3', 'Column4', 'Column5', 'Column6', 'Column7', 'Column8', 'Column9', 'Column10', 'Column11', 'Column12', 'Column13', 'Column14', 'Column15', 'Column16', 'Column17']);

for (var i = 1; i <= NumberOfRecords; i++) { //for each record
    table.push([
        '<div class="1"><img src="/resources/ic_menu_search.png" alt="" height="20" width="20" style="cursor: pointer;" id="' + i + '" ></div>',
        '<div class="2">' + TableResults[((i - 1) * 459) + 1] + '</div>',
        '<div class="3">' + TableResults[((i - 1) * 459) + 4] + '</div>',
        '<div class="4">' + TableResults[((i - 1) * 459) + 5] + '</div>',
        '<div class="5">' + TableResults[((i - 1) * 459) + 6] + '</div>',
        '<div class="6">' + TableResults[((i - 1) * 459) + 9] + '</div>',
        '<div class="7">$' + TableResults[((i - 1) * 459) + 12] + '.00</div>',
        '<div class="8">' + TableResults[((i - 1) * 459) + 15] + '</div>',
        '<div class="9">' + TableResults[((i - 1) * 459) + 16] + '</div>',
        '<div class="10">' + TableResults[((i - 1) * 459) + 37] + '</div>',
        '<div class="11">' + TableResults[((i - 1) * 459) + 38] + '</div>',
        '<div class="12">' + TableResults[((i - 1) * 459) + 39] + '%</div>',
        '<div class="13">' + TableResults[((i - 1) * 459) + 45] + '</div>',
        '<div class="14">' + TableResults[((i - 1) * 459) + 66] + '</div>',
        '<div class="15">' + TableResults[((i - 1) * 459) + 78] + '</div>',
        '<div class="16">$' + TableResults[((i - 1) * 459) + 81] + '.00</div>',
        '<div class="17">' + TableResults[((i - 1) * 459) + 109] + '</div>'
    ]);
}

$('#myTable').tablesorter({
    theme: 'default',
    widgets: ['zebra', 'stickyHeaders'],
    widgetOptions : {
        build_source : table,
        build_headers : {
            rows    : 1,
            classes : [],
            text    : [],
            widths : ['3%', '8%', '7%', '7%', '7%', '7%', '6%', '7%', '7%', '7%', '7%', '7%', '7%', '7%', '6%']
        },
        build_footers : {
            rows    : 0
        }
    }
});

最后，我不建议使用重新排序小部件，因为它仍处于测试阶段，并且在投入生产之前还有一些 Unresolved 问题。如果您需要在列更改后添加、删除或更新表，请使用 updateAll option .