javascript - jqgridのデータリストで列幅を最大長でサイズ変更

Question

データリストの最大長で列幅のサイズを変更したい、トリガーloadCompleteイベントにコードを追加して、関数を使用しようとしました

 $myGrid.jqGrid('setColProp', 'column1', { width: 300 });
 $myGrid.jqGrid('setColProp', 'column1', { width: 80 });

しかし、それでも私にはうまくいきません。

Answer 1

これを試して：

$(function () {
    setTimeout(function () {
        $('span.ui-jqgrid-resize').dblclick(function () {
            var id = jQuery(this).parent().attr('id'); // First get the ID of the column that this separator belongs to. This is a tag with an ID for the column.
            var colName = id.split('_')[1];

            var testDiv = jQuery('#stringWidth'); // Test DIV for measuring string widths

            testDiv.addClass('ui-jqgrid ui-jqgrid-htable ui-jqgrid-sortable ui-th-column ui-state-hover ui-widget-content ui-widget-header ui-state-focus'); // Assign jqGrid header style classes
            var padding = parseInt(jQuery(jQuery(this).parent()).css('padding-left')) + parseInt(jQuery(jQuery(this).parent()).css('padding-right')); // Calculate jqGrid header padding
            testDiv.html(jQuery(jQuery(this).parent()).html()); // Assign jqGrid header text to test DIV
            var nw = testDiv.width() + padding; // Calculate jqGrid header text width

            testDiv.removeClass('ui-jqgrid ui-jqgrid-htable ui-jqgrid-sortable ui-th-column ui-state-hover ui-widget-content ui-widget-header ui-state-focus'); // De-assign jqGrid header style classes
            testDiv.addClass('ui-jqgrid ui-row-ltr jqgrow ui-widget-content'); // Assign jqGrid cell style classes

            jQuery.each(jQuery('td[aria-describedby=' + id + ']'), function () // Iterate over all of the rows and figure out which row is the widest.
            {
                padding = parseInt(jQuery(this).css('padding-left')) + parseInt(jQuery(this).css('padding-right')); // Calculate jqGrid cell padding
                testDiv.html(jQuery(this).html()); // Assign jqGrid cell text to test DIV
                w = testDiv.width() + padding; // Calculate jqGrid cell text width
                if (w > nw) { nw = w; }
            });

            // Code below adapted from the grid's "dragEnd" event handler
            var ts = jQuery('#grid')[0];
            var grid = ts.grid;
            var p = ts.p;
            var idx = jQuery.jgrid.getCellIndex(jQuery(this).parent());

            jQuery("#rs_m" + jQuery.jgrid.jqID(p.id)).css("display", "none");

            p.colModel[idx].width = nw;

            grid.headers[idx].width = nw;
            grid.headers[idx].el.style.width = nw + "px";
            grid.cols[idx].style.width = nw + "px";
            if (grid.footers.length > 0) { grid.footers[idx].style.width = nw + "px"; }

            if (p.forceFit === true) {
                nw = grid.headers[idx + p.nv].newWidth || grid.headers[idx + p.nv].width;
                grid.headers[idx + p.nv].width = nw;
                grid.headers[idx + p.nv].el.style.width = nw + "px";
                grid.cols[idx + p.nv].style.width = nw + "px";
                if (grid.footers.length > 0) { grid.footers[idx + p.nv].style.width = nw + "px"; }
                p.colModel[idx + p.nv].width = nw;
            }
            else {
                jQuery('table:first', grid.bDiv).css("width", p.tblwidth + "px");
                jQuery('table:first', grid.hDiv).css("width", p.tblwidth + "px");
                grid.hDiv.scrollLeft = grid.bDiv.scrollLeft;
                if (p.footerrow) {
                    jQuery('table:first', grid.sDiv).css("width", p.tblwidth + "px");
                    grid.sDiv.scrollLeft = grid.bDiv.scrollLeft;
                }
            }
        });
    }, 10);

});