<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery.jqGrid.min.js"></script>
<script src="Scripts/Pages/grid.locale-cn.js"></script>
<link href="CSS/themes/base/minified/jquery-ui.min.css" rel="stylesheet" />
<link href="CSS/Plugins/jquery.jqGrid.css" rel="stylesheet" />
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>