Question

基于此answer

我有一个bootstrap模式，我使用该功能。这是代码：

模态视图文件：

<div class="modal modal-wide fade" id="mo-selector-dialog" title="<bean:message key="add.ex"/>">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Add</h4>
      </div>
      <div class="modal-body">



            <table id="moTable"></table>
            <!--  <div id="pager"></div>-->



      <div class="modal-footer">

      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

js文件中的模态调用：

$('#add-link').click(function(){
    $('#mo-selector-dialog').css("display", "block");
    $('.mo-backdrop').css("display", "block");

    mc$('#mo-selector-dialog').modal({show:true});
    $('body').css("overflow-y", "hidden");
});

的jqGrid：

$moGrid.bind("jqGridAfterLoadComplete jqGridRemapColumns", function () {
    var $this = $(this),
        $cells = $this.find(">tbody>tr.jqgrow>td"),
        $colHeaders = $($.map(this.grid.headers, function (item) { return item.el; })).find(">div"),
        colModel = $this.jqGrid("getGridParam", "colModel"),
        cellLayout = $this.jqGrid("getGridParam", "cellLayout"),
        iCol,
        iRow,
        rows,
        row,
        n = $.isArray(colModel) ? colModel.length : 0,
        cm,
        colWidth,
        idColHeadPrexif = "jqgh_" + this.id + "_";

    $cells.wrapInner("<span class='mywrapping'></span>");
    $colHeaders.wrapInner("<span class='mywrapping'></span>");

    for (iCol = 0; iCol < n; iCol++) {
        cm = colModel[iCol];
        if (cm.hidden) {
            continue;
        }
        colWidth = $("#" + idColHeadPrexif + $.jgrid.jqID(cm.name) + ">.mywrapping").outerWidth(true) + 25; // 25px for sorting icons
        for (iRow = 0, rows = this.rows; iRow < rows.length; iRow++) {
            row = rows[iRow];
            if ($(row).hasClass("jqgrow")) {
                colWidth = Math.max(colWidth, $(row.cells[iCol]).find(".mywrapping").outerWidth(true));
            }
        }
        $this.jqGrid("setColWidth", iCol, colWidth + ($.jgrid.cell_width? cellLayout: 0));
    }
});

$moGrid.jqGrid({
    height: 400,

    url: 'ex/list',
    sortname: 'bDt',
    colNames: IS.mo.columnDisplayNames,
    colModel: IS.mo.colModelDef,
    beforeSelectRow: shiftSelect,
    gridview: true,
    rowattr: function (rd) {
        return rowStyle(rd);
    },

    beforeRequest: IS.filter.applyFilter($moGrid, $('input, select', filterForm), IS.mo.listFilterValues),

    onSelectRow: function(id, status) {
        $('#messageBox ul').empty();
        if (status){
            var ids= $moGrid.jqGrid('getGridParam','selarrrow');


            for (var i = 0; i < ids.length; i++) 
            {
                var rowId = ids[i];
                var rowData = $moGrid.jqGrid ('getRowData', rowId);
                global_selectedGroupMRowData.push(rowData);

            }
        }else{

            global_selectedGroupMRowIds.splice($.inArray(id, global_selectedGroupMRowIds), 1);
            for(var i=0; i<global_selectedGroupMRowData.length; i++){
                if (global_selectedGroupMRowData[i].id==id){
                    global_selectedGroupMRowData.splice(i, 1);
                }
            }
            //global_selectedGroupMRowData.splice($.inArray($("#moTable").jqGrid('getRowData',id), global_selectedGroupMRowData), 1);
        }

    },
    onSelectAll: function(aRowids, status) {
        $('#messageBox ul').empty();
        if (status){
            for (var i = 0; i < aRowids.length; i++)
                if ($.inArray(aRowids[i], global_selectedGroupMRowIds) == -1) {
                    global_selectedGroupMRowIds.push(aRowids[i]);
                    global_selectedGroupMRowData.push($("#moTable").jqGrid('getRowData',aRowids[i]));
                }

        } else {
            for (var i = 0; i < aRowids.length; i++) {
                global_selectedGroupMRowIds.splice($.inArray(aRowids[i], global_selectedGroupMRowIds), 1);
                global_selectedGroupMRowData.splice($.inArray(aRowids[i], global_selectedGroupMRowData), 1);
            }
        }
    },
    loadComplete: function() {

        var arraysize = global_selectedGroupMRowIds.length;
        if (arraysize>0){
            for (var i=0; i<arraysize; i++) {
                $("#moTable").setSelection(global_selectedGroupMRowIds[i], false);
            }
        }

        getEditPage('#moTable');
        $("#moTable").find('#pager_left,#pager_center,#pager_right').hide();
    }
});

它适用于其他不是模态的页面。就在模态内部，它不起作用。有什么想法吗？

Answer 1

我认为可以通过更改行

来解决问题

$this.jqGrid("setColWidth", iCol, colWidth + ($.jgrid.cell_width? cellLayout: 0));

如果this.p.cellLayout为真，则colWidth将增加到cellLayout（$.jgrid.cell_width参数，等于5）：

$grid.on("jqGridAfterLoadComplete jqGridRemapColumns", function () {
    var $this = $(this),
        $cells = $this.find(">tbody>tr.jqgrow>td"),
        $colHeaders = $($.map(this.grid.headers, function (item) { return item.el; })).find(">div"),
        colModel = $this.jqGrid("getGridParam", "colModel"),
        cellLayout = $this.jqGrid("getGridParam", "cellLayout"),
        iCol,
        iRow,
        rows,
        row,
        n = $.isArray(colModel) ? colModel.length : 0,
        cm,
        colWidth,
        idColHeadPrexif = "jqgh_" + this.id + "_";

    $cells.wrapInner("<span class='mywrapping'></span>");
    $colHeaders.wrapInner("<span class='mywrapping'></span>");

    for (iCol = 0; iCol < n; iCol++) {
        cm = colModel[iCol];
        if (cm.hidden) {
            continue;
        }
        colWidth = $("#" + idColHeadPrexif + $.jgrid.jqID(cm.name) + ">.mywrapping").outerWidth(true) + 25; // 25px for sorting icons
        for (iRow = 0, rows = this.rows; iRow < rows.length; iRow++) {
            row = rows[iRow];
            if ($(row).hasClass("jqgrow")) {
                colWidth = Math.max(colWidth, $(row.cells[iCol]).find(".mywrapping").outerWidth(true));
            }
        }
        $this.jqGrid("setColWidth", iCol, colWidth + ($.jgrid.cell_width? cellLayout: 0));
    }
});

The demo使用Bootstrap 3.2和Font Awesome 4.2。 Another demo使用相同的代码来自动调整列的宽度，它也可以使用。

更新：请参阅one more demo。

jqgrid - resize列在bootstrap模式中不起作用

1 个答案: