在Grails中使用jQuery和DataTables

本文介绍如何构建一个基于 Grails 的数据浏览器来可视化复杂的表格数据。
成都创新互联公司专注于虎丘企业网站建设,成都响应式网站建设公司,商城建设。虎丘网站建设公司,为虎丘等地区提供建站服务。全流程按需定制设计，专业设计，全程项目跟踪，成都创新互联公司专业和态度为您提供的服务

我是 Grails 的忠实粉丝。当然，我主要是热衷于利用命令行工具来探索和分析数据的数据从业人员。数据从业人员经常需要查看数据，这也意味着他们通常拥有优秀的数据浏览器。利用 Grails、jQuery，以及 DataTables jQuery 插件，我们可以制作出非常友好的表格数据浏览器。

DataTables 网站提供了许多“食谱式”的教程文档，展示了如何组合一些优秀的示例应用程序，这些程序包含了完成一些非常漂亮的东西所必要的 JavaScript、HTML，以及偶尔出现的 PHP。但对于那些宁愿使用 Grails 作为后端的人来说，有必要进行一些说明示教。此外，样本程序中使用的数据是一个虚构公司的员工的单个平面表格数据，因此处理这些复杂的表关系可以作为读者的一个练习项目。

本文中，我们将创建具有略微复杂的数据结构和 DataTables 浏览器的 Grails 应用程序。我们将介绍 Grails 标准，它是 Groovy 式的 Java Hibernate 标准。我已将代码托管在 GitHub 上方便大家访问，因此本文主要是对代码细节的解读。

首先，你需要配置 Java、Groovy、Grails 的使用环境。对于 Grails，我倾向于使用终端窗口和 Vim，本文也使用它们。为获得现代的 Java 环境，建议下载并安装 Linux 发行版提供的 Open Java Development Kit （OpenJDK）（应该是 Java 8、9、10 或 11 之一，撰写本文时，我正在使用 Java 8）。从我的角度来看，获取***的 Groovy 和 Grails 的***方法是使用 SDKMAN!。

从未尝试过 Grails 的读者可能需要做一些背景资料阅读。作为初学者，推荐文章创建你的***个 Grails 应用程序。

获取员工信息浏览器应用程序

正如上文所提，我将本文中员工信息浏览器的源代码托管在 GitHub上。进一步讲，应用程序embrow是在 Linux 终端中用如下命令构建的：

 
 
 
 
  
  
  
  cd Projects
  
  
  
  grails create-app com.nuevaconsulting.embrow

域类和单元测试创建如下：

 
 
 
 
  
  
  
  grails create-domain-class com.nuevaconsulting.embrow.Position
  
  
  
  grails create-domain-class com.nuevaconsulting.embrow.Office
  
  
  
  grails create-domain-class com.nuevaconsulting.embrow.Employeecd embrowgrails createdomaincom.grails createdomaincom.grails createdomaincom.

这种方式构建的域类没有属性，因此必须按如下方式编辑它们：

Position 域类：

 
 
 
 
  
  
  
  package com.nuevaconsulting.embrow
  
  
  
   
  
  
  
  class Position {
  
  
  
  
  
  
  
      String name
  
  
  
      int starting
  
  
  
  
  
  
  
      static constraints = {
  
  
  
          name nullable: false, blank: false
  
  
  
          starting nullable: false
  
  
  
      }
  
  
  
  }com.Stringint startingstatic constraintsnullableblankstarting nullable

Office 域类：

 
 
 
 
  
  
  
  package com.nuevaconsulting.embrow
  
  
  
   
  
  
  
  class Office {
  
  
  
  
  
  
  
      String name
  
  
  
      String address
  
  
  
      String city
  
  
  
      String country
  
  
  
  
  
  
  
      static constraints = {
  
  
  
          name nullable: false, blank: false
  
  
  
          address nullable: false, blank: false
  
  
  
          city nullable: false, blank: false
  
  
  
          country nullable: false, blank: false
  
  
  
      }
  
  
  
  }

Enployee 域类：

 
 
 
 
  
  
  
  package com.nuevaconsulting.embrow
  
  
  
   
  
  
  
  class Employee {
  
  
  
  
  
  
  
      String surname
  
  
  
      String givenNames
  
  
  
      Position position
  
  
  
      Office office
  
  
  
      int extension
  
  
  
      Date hired
  
  
  
      int salary
  
  
  
      static constraints = {
  
  
  
          surname nullable: false, blank: false
  
  
  
          givenNames nullable: false, blank: false
  
  
  
          : false
  
  
  
          office nullable: false
  
  
  
          extension nullable: false
  
  
  
          hired nullable: false
  
  
  
          salary nullable: false
  
  
  
      }
  
  
  
  }

请注意，虽然 Position 和 Office 域类使用了预定义的 Groovy 类型 String 以及 int，但 Employee 域类定义了 Position 和 Office 字段（以及预定义的 Date）。这会导致创建数据库表，其中存储的 Employee 实例中包含了指向存储 Position 和 Office 实例表的引用或者外键。

现在你可以生成控制器，视图，以及其他各种测试组件：

 
 
 
 
  
  
  
  -all com.nuevaconsulting.embrow.Position
  
  
  
  grails generate-all com.nuevaconsulting.embrow.Office
  
  
  
  grails generate-all com.nuevaconsulting.embrow.Employeegrails generateall com.grails generateall com.grails generateall com.

此时，你已经准备好了一个基本的增删改查（CRUD）应用程序。我在 grails-app/init/com/nuevaconsulting/BootStrap.groovy 中包含了一些基础数据来填充表格。

如果你用如下命令来启动应用程序：

 
 
 
 
  
  
  
  grails run-app

在浏览器输入 http://localhost:8080/，你将会看到如下界面：

Embrow 应用程序主界面。

单击 “OfficeController” 链接，会跳转到如下界面：

Office 列表

注意，此表由 OfficeController 的 index 方式生成，并由视图 office/index.gsp 显示。

同样，单击 “EmployeeController” 链接跳转到如下界面：

employee 控制器

好吧，这很丑陋： Position 和 Office 链接是什么？

上面的命令 generate-all 生成的视图创建了一个叫 index.gsp 的文件，它使用 Grails 标签，该标签默认会显示类名（com.nuevaconsulting.embrow.Position）和持久化示例标识符（30）。这个操作可以自定义用来产生更好看的东西，并且自动生成链接，自动生成分页以及自动生成可排序列的一些非常简洁直观的东西。

但该员工信息浏览器功能也是有限的。例如，如果想查找 “position” 信息中包含 “dev” 的员工该怎么办？如果要组合排序，以姓氏为主排序关键字，“office” 为辅助排序关键字，该怎么办？或者，你需要将已排序的数据导出到电子表格或 PDF 文档以便通过电子邮件发送给无法访问浏览器的人，该怎么办？

jQuery DataTables 插件提供了这些所需的功能。允许你创建一个完成的表格数据浏览器。

创建员工信息浏览器视图和控制器的方法

要基于 jQuery DataTables 创建员工信息浏览器，你必须先完成以下两个任务：

创建 Grails 视图，其中包含启用 DataTable 所需的 HTML 和 JavaScript
给 Grails 控制器增加一个方法来控制新视图。

员工信息浏览器视图

在目录 embrow/grails-app/views/employee 中，首先复制 index.gsp 文件，重命名为 browser.gsp：

 
 
 
 
  
  
  
  cd Projects
  
  
  
  cd embrow/grails-app/views/employee
  
  
  
  cp gsp browser.gsp

此刻，你自定义新的 browser.gsp 文件来添加相关的 jQuery DataTables 代码。

通常，在可能的时候，我喜欢从内容提供商处获得 JavaScript 和 CSS；在下面这行后面：

 
 
 
 
  
  
  
  <g:message code="default.list.label" args="[entityName]" />

插入如下代码：

然后删除 index.gsp 中提供数据分页的代码：

 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  ${flash.message}

并插入实现 jQuery DataTables 的代码。

要插入的***部分是 HTML，它将创建浏览器的基本表格结构。DataTables 与后端通信的应用程序来说，它们只提供表格页眉和页脚；DataTables JavaScript 则负责表中内容。

 
 
 
 
  
  
  
  
  
  
  
  Employee Browser
  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  Surname
  
  
  
  Given name(s)
  
  
  
  Position
  
  
  
  Office
  
  
  
  Extension
  
  
  
  Hired
  
  
  
  Salary
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Surname
  
  
  
  Given name(s)
  
  
  
  Position
  
  
  
  Office
  
  
  
  Extension
  
  
  
  Hired
  
  
  
  Salary

Surname	Given name(s)	Position	Office	Extension	Hired	Salary
Surname	Given name(s)	Position	Office	Extension	Hired	Salary

var title = $(this).text();
if (title == 'Extension' || title == 'Hired')
$(this).html('');
else
$(this).html('');
});titletitletitletitletitle

var table = $('#employee_dt').DataTable( {
"scrollY": 500,
"deferRender": true,
"scroller": true,
"dom": "Brtip",
"buttons": [ 'copy', 'csv', 'excel', 'pdf', 'print' ],
"processing": true,
"serverSide": true,
"ajax": {
"url": "${createLink(controller: 'employee', action: 'browserLister')}",
"type": "POST",
},
"columns": [
{ "data": "surname" },
{ "data": "givenNames" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extension" },
{ "data": "hired" },
{ "data": "salary" }
]
});

table.columns().every(function() {
var that = this;
$('input', this.footer()).on('keyup change', function(e) {
if (that.search() != this.value && 8 < e.keyCode && e.keyCode < 32)
that.search(this.value).draw();
});

def jqdtParams = [:]
params.each { key, value ->
def keyFields = key.replace(']','').split(/\[/)
def table = jqdtParams
for (int f = 0; f < keyFields.size() - 1; f++) {
def keyField = keyFields[f]
if (!table.containsKey(keyField))
table[keyField] = [:]
table = table[keyField]
}
table[keyFields[-1]] = value
}
println "employee dataTableParams $jqdtParams"
println()

def columnMap = jqdtParams.columns.collectEntries { k, v ->
def whereTerm = null
switch (v.data) {
case 'extension':
case 'hired':
case 'salary':
if (v.search.value ==~ /\d+(,\d+)*/)
whereTerm = v.search.value.split(',').collect { it as Integer }
break
default:
if (v.search.value ==~ /[A-Za-z0-9 ]+/)
whereTerm = "%${v.search.value}%" as String
break
}
[(v.data): [where: whereTerm]]
}
println "employee columnMap $columnMap"
println()

def allColumnList = columnMap.keySet() as List
println "employee allColumnList $allColumnList"
def orderList = jqdtParams.order.collect { k, v -> [allColumnList[v.column as Integer], v.dir] }
println "employee orderList $orderList"

def filterer = {
createAlias 'position', 'p'
createAlias 'office', 'o'
if (columnMap.surname.where) ilike 'surname', columnMap.surname.where
if (columnMap.givenNames.where) ilike 'givenNames', columnMap.givenNames.where
if (columnMap.position.where) ilike 'p.name', columnMap.position.where
if (columnMap.office.where) ilike 'o.name', columnMap.office.where
if (columnMap.extension.where) inList 'extension', columnMap.extension.where
if (columnMap.salary.where) inList 'salary', columnMap.salary.where
if (columnMap.hired.where) {
if (columnMap.hired.where.size() > 1) {
or {
columnMap.hired.where.each {
between 'hired', Date.parse('yyyy/MM/dd',"${it}/01/01" as String),
Date.parse('yyyy/MM/dd',"${it}/12/31" as String)
}
}
} else {
between 'hired', Date.parse('yyyy/MM/dd',"${columnMap.hired.where[0]}/01/01" as String),
Date.parse('yyyy/MM/dd',"${columnMap.hired.where[0]}/12/31" as String)
}
}
}

def c = Employee.createCriteria()
def recordsFiltered = c.count {
filterer.delegate = delegate
filterer()
}
println "employee recordsFiltered $recordsFiltered"

def orderer = Employee.withCriteria {
filterer.delegate = delegate
filterer()
orderList.each { oi ->
switch (oi[0]) {
case 'surname': order 'surname', oi[1]; break
case 'givenNames': order 'givenNames', oi[1]; break
case 'position': order 'p.name', oi[1]; break
case 'office': order 'o.name', oi[1]; break
case 'extension': order 'extension', oi[1]; break
case 'hired': order 'hired', oi[1]; break
case 'salary': order 'salary', oi[1]; break
}
}
maxResults (jqdtParams.length as Integer)
firstResult (jqdtParams.start as Integer)
}

def dollarFormatter = new DecimalFormat('$##,###.##')
def employees = orderer.collect { employee ->
['surname': "${employee.surname}",
'givenNames': employee.givenNames,
'position': "${employee.position?.name}",
'office': "${employee.office?.name}",
'extension': employee.extension,
'hired': employee.hired.format('yyyy/MM/dd'),
'salary': dollarFormatter.format(employee.salary)]
}

在Grails中使用jQuery和DataTables

获取员工信息浏览器应用程序

创建员工信息浏览器视图和控制器的方法

员工信息浏览器视图

Employee Browser

控制器 browserLister 操作

结语