.jqGrid必备的js和css文件字体变大

来源：互联网发布：新加坡网络频率编辑：程序博客网时间：2024/05/29 13:20

1.必须的文件
<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>

3.填充jqgrid表格

<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>

0 0

.jqGrid必备的js和css文件 字体变大

.jqGrid必备的js和css文件字体变大