php - 表格排序器列宽

Question

我想知道是否有人可以帮助我。

我已经使用jQuery整理了这个页面。Tablesorter该页面工作正常，但我正在尝试找到一种更改列宽的方法。

我已经阅读了文档和几个教程，但到目前为止，我未能成功允许用户更改此设置。

我只是想知道是否有人可以看看这个，让我知道我哪里出错了。

非常感谢和问候

Answer 1

经过更多研究后，我发现这是 IE css 的常见问题。解决方法是手动设置“td 宽度设置”，然后给出所需的列宽。希望这可以帮助。

Answer 2

我在 github 上有一个 tablesorter的分支，其中包括一些额外的小部件。其中之一是可调整大小的列小部件 -此处为演示。我在这里只发布了可调整大小的小部件代码，但我认为您可能喜欢额外的存储脚本，它将列宽保存到小部件文件中包含的本地存储/cookies。

在此处获取小部件文件：http: //mottie.github.com/tablesorter/js/jquery.tablesorter.widgets.js

// Add Column resizing widget
// this widget saves the column widths if
// $.tablesorter.storage function is included
// **************************
$.tablesorter.addWidget({
    id: "resizable",
    format: function(table) {
        if ($(table).hasClass('hasResizable')) { return; }
        $(table).addClass('hasResizable');
        var i, j, w, s, c = table.config,
            $cols = $(c.headerList).filter(':gt(0)'),
            position = 0,
            $target = null,
            $prev = null,
            len = $cols.length,
            stopResize = function(){
                position = 0;
                $target = $prev = null;
                $(window).trigger('resize'); // will update stickyHeaders, just in case
            };
        s = ($.tablesorter.storage) ? $.tablesorter.storage(table, 'tablesorter-resizable') : '';
        // process only if table ID or url match
        if (s) {
            for (j in s) {
                if (!isNaN(j) && j < c.headerList.length) {
                    $(c.headerList[j]).width(s[j]); // set saved resizable widths
                }
            }
        }
        $cols
            .each(function(){
                $(this)
                    .append('<div class="tablesorter-resizer" style="cursor:w-resize;position:absolute;height:100%;width:20px;left:-20px;top:0;z-index:1;"></div>')
                    .wrapInner('<div style="position:relative;height:100%;width:100%"></div>');
            })
            .bind('mousemove', function(e){
                // ignore mousemove if no mousedown
                if (position === 0 || !$target) { return; }
                var w = e.pageX - position,
                    n = $prev;
                // make sure
                if ( $target.width() < -w || ( $prev && $prev.width() <= w )) { return; }
                // resize current column
                $prev.width( $prev.width() + w );
                position = e.pageX;
            })
            .bind('mouseup', function(){
                if (s && $.tablesorter.storage && $target) {
                    s[$prev.index()] = $prev.width();
                    $.tablesorter.storage(table, 'tablesorter-resizable', s);
                }
                stopResize();
                return false;
            })
            .find('.tablesorter-resizer')
            .bind('mousedown', function(e){
                // save header cell and mouse position
                $target = $(e.target).closest('th');
                $prev = $target.prev();
                position = e.pageX;
            });
        $(table).find('thead').bind('mouseup mouseleave', function(){
            stopResize();
        });
    }
});