Question

我有html表，我绑定到使用如下所示的knockout observable array TableDataList

<div  style="overflow: hidden;margin-top: 30px;margin-left: 10px;float:left;" >
    <table style="width: 100%" >
        <thead>
            <tr>
                <th style="padding: 0px">Id </th>
                <th style="padding: 0px">Name</th>
            </tr>
        </thead>
    </table>
    <div style="overflow: auto;height: 490px;">
        <table id ="Table1" style="width: 100%;" >
            <tbody data-bind="foreach: TableDataList">
                <tr  data-bind= "click: $root.giveDetails">
                    <td style="padding: 0px;text-align: left" data-bind="text: Id"></td>
                    <td style="padding: 0px;" data-bind="text: Name "></td>
                </tr>   
            </tbody>
        </table>
    </div>
</div>

目前我在表格中加载约5000行，但点击该行大约需要5秒钟。我对行的点击事件data-bind= "click: $root.giveDetails"进行了敲除绑定，该行调用了一些服务并加载了数据

我可以看到，当我点击行时，它首先加载数据，然后标记该行。单击时，我会突出显示蓝色的行。当表中的数据较少时，没有问题，但是当有大约5000条记录时性能会下降。有人能指出我如何改善这个的提示吗？

更新1

这是我的tr的点击事件

 this.giveDetails= function (item) {
    $.ajax({
        url: "../Service/Table/TableData",
        type: "PUT",
        contentType: 'application/json',
        processData: false,
        data: JSON.stringify(item.Id()),
        error: function (XMLHttpRequest, textStatus, errorThrown) {

            alert(errorThrown);
        },
        success: function (allData) {
            var mappedData= $.map(allData, function (item) {

                return new TableData(item);
            });
            self.AnotherTableDataList(mappedData);
        }
    });
 });

Answer 1

我认为问题可能出在大量的事件处理程序中（每行5000行）。因此，我们的想法是将click事件绑定到表体，然后在giveDetails函数中打开，您需要计算单击的确切行。像这样：

...
<table id ="Table1" style="width: 100%;" >
    <tbody data-bind="foreach: TableDataList, click: $root.giveDetails">
        <tr>
            <td style="padding: 0px;text-align: left" data-bind="text: Id"></td>
            <td style="padding: 0px;" data-bind="text: Name "></td>
        </tr>   
    </tbody>
</table>

... 后来在你的模型中：

giveDetails: function(data, e) {
    alert($(e.target).parents('tr').find('td:first').text());
}

现在将淘汰视图模型与jQuery代码混合起来并不是一个好习惯，但这是一个开始的想法，也许有一个更好的解决方案。这是demo，有5000行。随意更新此代码，让我们一起解决这个问题：）

更新

我重构了我的代码，以便在点击处理程序中获得item：

giveDetails: function(data, e) {
  if ($(e.target).prop("tagName") != 'TD')
      return;
  var id = $(e.target).closest('tr').find('td:first').text();
  var item = ko.utils.arrayFirst(this.TableDataList(), function(arrayItem) {
      return arrayItem.Id == id;
  });
  alert(item.Id + ', ' + item.Name);
}

演示链接是一样的。

单击行时性能不佳

1 个答案:

更新