2.字体变大样式(思路:把想要的class的样式写入页面,覆盖jqgrid的样式)
<style>
.ui-jqgrid {
font-size: 14px;
}
.ui-jqgrid-view {
font-size: 14px;
}
.ui-jqgrid .ui-jqgrid-htable th {
height: 28px;
font-size: 14px;
}
.ui-jqgrid .ui-jqgrid-pager {
height: 28px;
font-size: 14px;
}
.ui-jqgrid .ui-pg-input {
font-size: 1em;
height: 20px;
}
.ui-jqgrid .i-pg-selbox {
font-size: 0.9em;
height: 20px;
}
.ui-jqgrid tr.ui-row-ltr td {
text-align: center;
}
</style>
<script> $(document).ready(function () { showGridTable(); }); function showGridTable() { var datas = new Array(); for (var i = 1; i < 25; i++) { data = {}; data["a"] = i + "1"; data["b"] = i + "2"; data["c"] = i + "3"; datas.push(data); } $("#div1").empty(); $("#div1").html("<table class='jqgrid' id='grid1'></table><div class='jqgridpager' id='pager1'></div>"); $("#grid1").jqGrid({ data: datas, shrinkToFit: false, datatype: "local", colNames: [ "列a", "列b", "列c" ], colModel: [ { name: "a", index: "a", width: 100 }, { name: "b", index: "b", width: 100 }, { name: "c", index: "c", width: 100 } ], width: 500, height: "auto", caption: "", pager: "#pager1", rowNum: 10, rowList: [10, 20, 30], viewrecords: true, //是否显示行数 }); } </script> </head> <body> <form id="form1" runat="server"> <div> <br /><br /> <div id="div1"> <table class="jqgrid" id="grid1"></table> <div class="jqgridpager" id="pager1"></div> </div> </div> </form> </body> </html>