如何使jTable网格在分页/排序时保持其选择？

Question

环境:

• VS2012
• ASP.NET MVC4
• jTable 2.3.0

我注意到当分页时，先前选择的行会消失..这意味着它们不再被选中。 根据SelectedRows演示，我看到div中填充了当前选定行的一些字段。 但是一旦你翻页，那个选择就会丢失。

已经评论了现有问题https://github.com/hikalkan/jtable/issues/243

但没有解决方案。

在我的小测试中，我选择了一行，然后翻到下一页。 按照以下顺序触发了以下事件：

• loadingRecords--方法中没有"data"参数，但可以使用选择行演示代码获取当前选择的行
• selectionChanged--来自选择行演示的代码->没有选择的行
• recordsLoaded--具有新的新数据，但没有任何选择

同样的问题也会在排序时出现[选择会丢失]，并按相同的顺序触发事件。

现在，我绝不是jQuery或Javascript的专家。

但想知道是否可能创建一个集合类，然后当用户选择一行时， 将行的键添加到集合中(如果取消选中行，则将其删除)。 在分页时，让loadingRecords更新集合，并且当selectionChanged被触发时， 如果集合中有项目，则只需重新选择它们。

你有什么想法/解决方案吗？

- sheir

Answer 1

发现这个问题没有答案，所以我在一个网站上添加了这个功能。为了帮助其他人，我分享一下我的做法。我认为还有一些优化的空间，欢迎在评论中提出。

我的策略是创建一个$colleges数组来存储行键，更新此数组以匹配选择，并使用此数组在分页活动期间选择行。selectionChanged事件仅包括可见行。因此，在这个版本中，我首先从$colleges数组中删除所有可见的行，然后再添加回当前可见和已选的行。

            var $colleges;
            ...
            $('#collegeSearchContainer').jtable ({ 
            ...
            fields: {
                uid: { key:true, list:false, edit:false, create:false }
                ...
            },
    selectionChanged: function () {

        var $table = $('#collegeSearchContainer');

        // Get all currently selected rows
        var $selectedRows = $table.jtable('selectedRows');

        // DEL - add all non-visible rows to colnew then swap
        var $colnew = [];
        for (var i = 0, len = $colleges.length; i < len; i++) {
            $row = $table.jtable('getRowByKey', $colleges[i]);
            if (!$row)
                $colnew.push($colleges[i]);
        }
        $colleges = $colnew;

        // ADD - make sure currently selected rows are selected
        if ($selectedRows.length > 0) {
            $selectedRows.each(function () {
                var record = $(this).data('record');
                if ($.inArray(record.uid, $colleges) < 0) 
                    $colleges.push(record.uid);
            });
        }

        // UPDATE selection indicator for colleges
        $('#email_schools').html($colleges.length);         
    },
    rowInserted: function (event, data) {
        // select those colleges that have been selected in the past
        if ($.inArray(data.record.uid, $colleges) >= 0) {
            $('#collegeSearchContainer').jtable('selectRows', data.row);
        }
    },

- xeo

Answer 2

我认为以下内容应该是必需的。

• 即你必须为该列分配一个键。
• 使用 $(table_id).jtable('reload');

重新加载 - 将保留您的状态记录。

        columnname: {
            key: true,
            list: false,
        },

- hardika