All geek questions in one place

Jqgrid fixed height and empty row filling

I would like to set a grid with a fixed height, for example, 500 pixels. If you allow only two records placed in the grid to speak, I would like to fill the remaining rows as empty lines and not make them clickable, so the grid fills 100% of its available height. Is there an easy way to do this?

Thanks Bob

+6
source share
1 answer

1) Dial height: 100% 2) you can change jqgrid background color

otherwise you can do it ...

This is a sample ...

<!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**
0
source

Source: https://habr.com/ru/post/890534/

More articles:


All Articles