jquery - 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被触发时，收藏中是否有元素；它只是重新选择它们。

想法/解决方案？

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);
        }
    },