4

ここでやりすぎているかどうかはわかりませんが、シナリオは次のとおりです。初めてロードするときに、mvc フレームワークの標準の foreach メカニズムを使用してビューにデータのテーブルを返す asp.net mvc ページがあります。ユーザーがJavaScriptを有効にしている場合、ノックアウトを使用してテーブルを更新したいと考えています。ノックアウトで dom テーブルからデータを読み取り、そのデータを最初の監視可能なコレクションとして使用する方法はありますか。それ以来、ノックアウトと ajax を使用して、データを追加、編集、または削除します。

一言で言えば、html テーブルを解析してノックアウト監視可能なコレクションにする必要があります。

4

2 に答える 2

0

私はこれをコーディングしてみました：

基本的なマークアップは次のとおりです。

<table id="table" data-bind="template: { name: 'table-template' }">
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Richard</td>
      <td>Willis</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Smith</td>
    </tr>
  </tbody>
</table>

<!-- Here is the template we'll use for re-building the table -->

<script type="text/html" id="table-template">
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: data">
    <tr>
      <td data-bind="text: name"></td>
      <td data-bind="text: surname"></td>
    </tr>
  </tbody>
</script>

Javascript:

(function() {

  function getTableData() {
    // http://johndyer.name/html-table-to-json/

    var table = document.getElementById('table');
    var data = [];
    var headers = [];

    for (var i = 0; i < table.rows[0].cells.length; i++) { 
      headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
    }
    // go through cells 
    for (var i = 1; i < table.rows.length; i++) {
      var tableRow = table.rows[i];
      var rowData = {};
      for (var j = 0; j < tableRow.cells.length; j++) {
        rowData[headers[j]] = tableRow.cells[j].innerHTML;
      }
      data.push(rowData);
    }

    return data;     
  }

  var Vm = function () {  
    this.data = ko.observableArray(getTableData());     
  };

  ko.applyBindings(new Vm(), document.getElementById('table'));
})();

マッピングプラグインを使用してこの概念を拡張し、各行のオブザーバブルを作成できます: http://knockoutjs.com/documentation/plugins-mapping.html

ここでデモを見る: http://jsfiddle.net/CShqK/1/

編集:データを取得するために大きなテーブルをトラバースするのはコストがかかる可能性があるため、これが最善のアプローチであると言っているわけではありません。このスレッドの他の人が提案したように、おそらくページに JSON を出力するだけです。

于 2013-01-11T17:00:22.807 に答える
0

HTMLテーブルを解析する代わりに、観測可能な配列にデータを供給するだけではどうですか

myArray: ko.observableArray(@Html.Raw(Json.Encode(Model.myTableData)))

本当にHTMLの方法で解析する必要がある場合は、次のコードを使用できます

var tableData = $('#myTable tr').map(function(){
return [
    $('td,th',this).map(function(){
        return $(this).text();
    }).get()
];
}).get();
$(document).ready(function() {
    var myData = JSON.stringify(tableData);
    alert(myData)
});

コードの動作を示すフィドルは次のとおりです。 http://jsfiddle.net/FWCXH/

于 2013-01-11T14:56:03.290 に答える