文章目录
jqGrid 是一款基于 jQuery 的表格插件,通过它开发者可以轻易实现前后端的数据交互(使用 ajax 异步通信),并将之以表格的形式展现在前台页面上。
一、jqGrid 入门
1.1 jqGrid 安装
想要在项目中使用 jqGrid,首先要导入 jqGrid 的几个 js 文件和 css 文件。具体如下:
<script language="javascript" src="${ctx}/js/jquery-3.1.1.min.js" ></script>
<script language="javascript" src="${ctx}/js/jqGrid/js/jquery-ui.min.js" ></script>
<script language="javascript" src="${ctx}/js/jqGrid/js/i18n/grid.locale-cn.js" ></script>
<script language="javascript" src="${ctx}/js/jqGrid/js/jquery.jqGrid.js" ></script>
<link rel="stylesheet" href="${ctx}/js/jqGrid/theme/jquery-ui.min.css" />
<link rel="stylesheet" href="${ctx}/js/jqGrid/theme/ui.jqgrid.css" />
当然,体贴如我是不会忘记附上下载地址的。
然后,我们再对这几个文件作简要的说明。
-
由于 jqGrid 是依赖与 jQuery 框架的,因此我们需要导入 jquery 文件。
-
如果我们想让 jqGrid 以中文的形式展示提示语,那么我们需要导入 grid.locale-cn.js 文件。它可以理解为汉化包,支持 jqGrid 的提示语以汉字的形式显示。
-
jqGrid 作为一款前端的表格插件,自然会有多种主题,而 jquery-ui.min.js、jquery-ui.min.css、ui.jqgrid.css 正是用于实现 jqGrid 个性化主题的文件。
-
最后也是最重要的,就是 jqGrid 的核心文件 jquery.jqGrid.js。当然,你也可以选择导入 jquery.jqGrid.min.js。这两者的区别在于,前者是完整版的,具有完整的注释,方便源码阅读,而后者是压缩版的,更适合用于生产环境。
导入上述几个文件后,标志着我们已经完成对 jqGrid 的安装,这时,就让我们以一个简单的示例,来看看 jqGrid 的效果。
1.2 jqGrid 简单示例
首先,我们先来看看一个完整的 jqGrid 实例的前端代码。
HTML 部分:
<body>
<div class="content-wrap">
<!-- jqGrid 表格 -->
<table id="list"></table>
<!-- 翻页导航栏 -->
<div id="pager" class="pager"></div>
</div>
</body>
js 部分:
$(document).ready(function () {
$('#list').jqGrid({
url: ctx + '/student/query-list', // 获取数据的地址
datatype: 'json', // 从服务器端返回的数据类型,默认xml。可选类型:xml,local,json,jsonnp,script,xmlstring,jsonstring,clientside
mtype: 'POST', // 提交方式,默认为GET
height: 'auto', // 高度,表格高度。可为数值、百分比或'auto'
width: 1000, // 如果设置则按此设置为主,如果没有设置则按colModel中定义的宽度计算
colNames: ['姓名', '性别', '邮箱', '生日', '学历', '状态', '入学时间'], // 列显示名称,是一个数组对象
colModel: [
// name 表示列显示的名称;
// index 表示传到服务器端用来排序用的列名称;
// width 为列宽度;
// align 为对齐方式;
// sortable 表示是否可以排序
{
name: 'name'