首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Tablesorter在排序后添加已删除的行

在云计算领域,Tablesorter是一个广泛使用的表格排序和过滤插件。它可以在前端和后端进行排序和过滤,并且支持多种排序和过滤方式,如按字母顺序、数字顺序、日期顺序等。

在开发中,我们可以通过Tablesorter的API来添加已删除的行。具体步骤如下:

1.获取Tablesorter实例

在JavaScript中,我们可以使用jQuery来获取Tablesorter实例。首先,我们需要确保已经引入了jQuery库。然后,我们可以使用以下代码来获取Tablesorter实例:

代码语言:javascript
复制
var table = $('#myTable').table();

2.获取已删除的行

我们需要先获取已删除的行。在JavaScript中,我们可以使用jQuery的$.grep()方法来获取已删除的行。具体步骤如下:

代码语言:javascript
复制
var deletedRows = $('#myTable tbody tr').not('.header').filter(':hidden');

这里,我们使用了jQuery的$.grep()方法来获取tbody中除表头外的所有行,并过滤出隐藏的行。

3.在排序后添加已删除的行

我们可以使用$.extend()方法来将已删除的行添加到排序后的表格中。具体步骤如下:

代码语言:javascript
复制
$.extend(table.data('tablesorter'), {
    "sortList": [[1, 0]], // 指定第一列进行排序
    "headers": {
        0: {
            "sorter": "tablesorter-legacy-header-sort",
            "filter": "applied"
        }
    }
});

$.extend(table.find('thead').find('tr').not('.header').find('th').not('.tablesorter-header'), {
    "sortIndicator": true
});

table.tablesorter({
    theme: 'blue',
    widthFixed: true,
    headerTemplate: '{content} {icon}',
    widgets: ['zebra', 'filter', 'stickyHeaders'],
    widgetOptions: {
        zebra: ['odd', 'even'],
        filter_childRows: true,
        filter_columnFilters: true,
        filter_placeholder: {
            icon: 'icon-search',
            label: 'Search',
            class: 'placeholder-icon',
            width: '130px'
        },
        stickyHeaders_offset: 100,
        stickyHeaders_scrollDown: true,
        stickyHeaders_activate: function() {
            table.find('thead').addClass('fixed');
        },
        stickyHeaders_deactivate: function() {
            table.find('thead').removeClass('fixed');
        }
    }
});

table.find('tbody').on('click', 'tr', function() {
    $(this).toggleClass('selected');
});

table.find('tbody').on('dblclick', 'tr', function() {
    var row = table.row(this);
    row.toggleClass('selected');
});

table.find('tbody').on('click', 'td', function() {
    var cell = table.cell(this);
    cell.toggleClass('selected');
});

table.find('tbody').on('contextmenu', 'tr', function(event) {
    event.preventDefault();
    var menu = table.contextmenu({
        target: event.target,
        className: 'table-contextmenu',
        preventSelect: true
    });
});

这里,我们使用了jQuery的$.extend()方法来将已删除的行添加到排序后的表格中。我们还设置了表格的样式和事件处理函数,以便在单击行或单元格时进行选择。

4.设置表格的样式

最后,我们需要设置表格的样式。在CSS中,我们可以使用以下代码来设置表格的样式:

代码语言:css
复制

.tablesorter {

代码语言:txt
复制
width: 100%;
代码语言:txt
复制
border: 1px solid #ccc;

}

.tablesorter td {

代码语言:txt
复制
padding: 8px;
代码语言:txt
复制
border-bottom: 1px solid #ccc;

}

.tablesorter th {

代码语言:txt
复制
background-color: #e6e6e6;
代码语言:txt
复制
font-size: 14px;
代码语言:txt
复制
padding: 8px;

}

.tablesorter-header {

代码语言:txt
复制
background-color: #f0f0f0;
代码语言:txt
复制
font-weight: bold;

}

.tablesorter-header-sort {

代码语言:txt
复制
background-color: #f0f0f0;

}

.tablesorter-header-sort.asc,

.tablesorter-header-sort.desc {

代码语言:txt
复制
color: #000;

}

.tables

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券