php - テーブルソーターの列幅

Question

誰かが私を助けてくれるのではないかと思います。

jQueryを使用してこのページをまとめました。Tablesorterページは正常に機能しますが、列幅を変更する方法を見つけようとしています。

私はドキュメントといくつかのチュートリアルを読みましたが、これまでのところ、ユーザーがこの設定を変更できるようにすることに失敗しました。

誰かがこれを見て、どこが間違っているのか教えてくれないかと思っただけです。

よろしくお願いします

Answer 1

さらに調査した結果、これはIEcssの一般的な問題であることがわかりました。修正は、「td幅設定」を手動で設定することです。これにより、目的の列幅が得られます。お役に立てれば。

Answer 2

いくつかの追加のウィジェットを含むgithub に tablesorterのフォークがあります。そのうちの 1 つは、サイズ変更可能な列ウィジェットです。ここでデモを行います。サイズ変更可能なウィジェット コードのみをここに投稿しましたが、ウィジェット ファイルに含まれるローカル ストレージ/Cookie に列幅を保存する追加のストレージ スクリプトを気に入っていただけると思います。

ここでウィジェット ファイルを取得します: 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();
        });
    }
});