Question

我想将网格大小调整为固定高度，如500px。如果我们说只有两个记录放在网格中，我想将剩余的行填充为空行，而不是让它们可点击，因此网格填充其可用高度的100％。有一个简单的方法吗？

谢谢，鲍勃

Answer 1

1）设定高度：100％ 2）你可以改变jqgrid背景颜色

否则你可以这样做......

这是样本......

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
<title>Test </title>    
<link href="css/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />

<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>

<script src="js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>

<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>

<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function() {
        var EditableID = 0;
        jQuery("#list1").jqGrid({
            datatype: "local",
            colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
            colModel: [
                { name: 'id', index: 'id', width: 75 },
                { name: 'invdate', index: 'invdate', width: 90 },
                { name: 'name', index: 'name', width: 100 },
                { name: 'amount', index: 'amount', width: 80, align: "right" },
                { name: 'tax', index: 'tax', width: 80, align: "right" },
                { name: 'total', index: 'total', width: 80, align: "right" },
                { name: 'note', index: 'note', width: 150, editoptions: { size: "20", maxlength: "200" }, editable: true, edittype: 'text', width: 75, sortable: true }
                ],
            rowNum: 22,
            height: 500,
            loadComplete: function(data) {
                var NoOfCellAdd = Number($("#list1").parent().parent().css('height').split('px')[0]) / 23;

                for (var i = data.records; i <= NoOfCellAdd; i++) {
                    $("#list1").addRowData(i + 1, {});
                }

            },
            onCellSelect: function(rowid, iCol, cellcontent, e) {
                if (rowid <= EditableID) {
                    if ($("#lastCellId").val() != -1)
                        $("#list1").saveRow($("#lastCellId").val(), false, 'clientArray');
                    $('#list1').editRow(rowid, iCol, true);
                    $("input, text", e.target).focus();
                    $("#lastCellId").val(rowid);
                }
            },
            autowidth: true,
            rowList: [10, 20, 30],
            pager: jQuery('#pager1'),
            //sortname: 'id',
            viewrecords: true,
            // sortorder: "desc",
            caption: "XML Example"
        }).navGrid('#pager1', { edit: false, add: false, del: false });

        var mydata = [
    { id: 1, invdate: "2007-10-01", name: "test1", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
    { id: 2, invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
    { id: 3, invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
    { id: 4, invdate: "2007-10-04", name: "test4", note: "note4", amount: "200.00", tax: "10.00", total: "210.00" },
    { id: 5, invdate: "2007-10-04", name: "test5", note: "note5", amount: "200.00", tax: "10.00", total: "210.00" },
    {id: 6, invdate: "2007-10-02", name: "test30", note: "note30", amount: "300.00", tax: "20.00", total: "320.00" }

    ];
        EditableID = mydata.length;
        $("#list1").jqGrid('setGridParam', { datatype: 'local', data: mydata }).trigger("reloadGrid");

    });
</script>

</head>
<body>
<form id="form1" runat="server">
<div>
    <table id="list1">
    </table>
    <div id="pager1">
    </div>
</div>
<input type="hidden" id="lastCellId" name="Language" value="-1">
</form>
  </body>
  </html>



    // --------------------------------------------------------------------------------
    // This is working fine...but this is not right way to do...
    // **rowNum: 22,height:500px**

jqgrid固定高度并填充空行

1 个答案: