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

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>


你可能感兴趣的:(.jqGrid必备的js和css文件 字体变大)