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

最新推荐文章于 2017-02-28 20:37:00 发布

xuanwuziyou

最新推荐文章于 2017-02-28 20:37:00 发布

阅读量7.0k

点赞数

分类专栏： Web前端技术

本文链接：https://blog.csdn.net/xuanwuziyou/article/details/41118563

版权

Web前端技术专栏收录该内容

115 篇文章 2 订阅

订阅专栏

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>