尝试将 jqgrid 放入具有预定义大小的 div答案

【问题标题】：Try to put jqgrid into div with predefined sizes尝试将 jqgrid 放入具有预定义大小的 div
【发布时间】：2014-03-25 15:08:19
【问题描述】：

我在插入 jqgrid 时遇到问题，它是寻呼机：例如，我有预定义大小的 div，例如：

var totalHeight = dy * unitHeight * scale + 'px';
var totalWidth = dx * unitWidth * scale + 'px';

当我尝试将寻呼机与 jqgrid 表一起放置时，寻呼机的高度 = 0

var newTable = $("<table></table>");
var newPager = $("<div></div>");
newPager.attr("id", "pager");
newTable.attr("id", name);
newElement.append(newTable);
newElement.append(newPager);

jqgrid的代码：

newTable.jqGrid({
            datatype: 'local',
            data: testData,
            colNames: ['No', 'Module', 'Group', 'App', 'LastDate', 'DelayedBy'],
            colModel: [{
                name: 'no',
                index: 'no',
                //width: elemWidth,
                sorttype: 'int'
            },{
                name: 'module',
                index: 'module',
                //width: elemWidth
            },{
                name: 'group',
                index: 'group',
                //width: elemWidth
            },{
                name: 'app',
                index: 'app',
                //width: elemWidth
            },{
                name: 'lastDate',
                index: 'lastDate',
                //width: elemWidth
                //sorttype: 'date'
            },
            {
                name: 'delayedBy',
                index: 'delayedBy',
                //width: elemWidth
                //sorttype: 'date'
            }],
            rowNum: cols,
            pager: "#pager",
            caption: name,
            shrinkToFit: false
        });

我也尝试将 bdiv 设置为：

$('.ui-jqgrid-bdiv').height(totalHeight);
$('.ui-jqgrid-bdiv').height(totalWidth);

但我不知道如何适应这一切。

顺便说一句，是否可以动态更改字体大小，例如： $(.ui-jqgrid).css('font-size', 5*scale); 是否可以在没有 css 的 jqgrid 选项中设置字体大小？

【问题讨论】：

标签： jquery css jqgrid

【解决方案1】：

问题是因为我试图在附加到正文之前初始化 jqgrid。但我仍然有调整行高的问题。现在我正在尝试找到一些可以改变每行高度的css样式。

顺便说一句，现在寻呼机的问题。它在移动设备上有大按钮，我不知道如何将它们变小并将寻呼机调整到移动设备。

所以我的解决方案：

 var newTable = $("<table></table>");
        var newPager = $("<div id='pager'></div>");
        newTable.attr("id", name);
        newElement.append(newTable);
        newElement.append(newPager);
        this.grid.addUnit(dx, dy, px, py, scale, newElement, {border:0, transparent:true});

        newTable.jqGrid({
            datatype: 'local',
            data: testData,
            colNames: ['No', 'Module', 'Group', 'App', 'LastDate', 'DelayedBy'],
            shrinkToFit: false,
            autowidth: true,
            //height: '200px',
            hidegrid: false,
            colModel: [{
                name: 'no',
                index: 'no',
                width: noWidth,
                sorttype: 'int'
            }, {
                name: 'module',
                index: 'module',
                width: elemWidth
            }, {
                name: 'group',
                index: 'group',
                width: elemWidth
            }, {
                name: 'app',
                index: 'app',
                width: elemWidth
            }, {
                name: 'lastDate',
                index: 'lastDate',
                width: elemWidth
                //sorttype: 'date'
            }, {
                name: 'delayedBy',
                index: 'delayedBy',
                width: elemWidth
                //sorttype: 'date'
            }],
            rowNum: 5,
            pager: "#pager",
            caption: name,
            loadComplete: function() {
                var grid = newTable;
                var ids = grid.getDataIDs();
                for (var i = 0; i < ids.length; i++) {
                    grid.setRowData(ids[i], false,   {
                        height: 0*scale + i * 2
                    });
                }
            }
        });

        newTable.jqGrid('setGridWidth', newElement.width(), true);

        $('.ui-jqgrid .ui-jqgrid-htable th').css('font-size', 14 * scale + 'px');
        $('.ui-jqgrid tr.jqgrow td').css('font-size', 14 * scale + 'px');
        $('.ui-jqgrid .ui-jqgrid-view').css('font-size', 14 * scale + 'px');
        $('.ui-jqgrid .ui-jqgrid-pager').css('font-size', 14 * scale + 'px');
        $('.ui-jqgrid .ui-pg-input').css('font-size', 14 * scale + 'px');
        $('.ui-jqgrid .ui-jqgrid-titlebar').css('font-size', 14 * scale + 'px');
        $('#pager_center').css('width', newElement.width() - 6); 
        $('.ui-jqgrid .ui-jqgrid-hdiv').css('height', 42*scale + 'px');
        $('.ui-jqgrid .ui-jqgrid-pager').css('width', newElement.width() - 6);

        var gboxHeight = $("#gbox_" + name).height() - $('#gbox_' + name + ' .ui-jqgrid-bdiv').height();

        newTable.jqGrid('setGridHeight', newElement.height() - gboxHeight);

【讨论】：