在 springMVC 中整合表格插件 jqGrid

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 插件请戳我！

下载 jqGrid 主题请戳我！

然后，我们再对这几个文件作简要的说明。

• 由于 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', index: 'name', width: '15%'