接下来，插入一个 JavaScript 块，它主要提供三个功能：它设置页脚中显示的文本框的大小，以进行列过滤，建立 DataTables 表模型，并创建一个处理程序来进行列过滤。

 
 
 
 

  
  
  
  

  
  
  
  
$('#employee_dt tfoot th').each( function() {javascript
 
 
 
 

下面的代码处理表格列底部的过滤器框的大小：

 
 
 
 

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

接下来，定义表模型。这是提供所有表选项的地方，包括界面的滚动，而不是分页，根据 DOM 字符串提供的装饰，将数据导出为 CSV 和其他格式的能力，以及建立与服务器的 AJAX 连接。 请注意，使用 Groovy GString 调用 Grails createLink() 的方法创建 URL，在 EmployeeController 中指向 browserLister 操作。同样有趣的是表格列的定义。此信息将发送到后端，后端查询数据库并返回相应的记录。

 
 
 
 

  
  
  
  
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();
  
  
  
  
});
 
 
 
 

这就是 JavaScript，这样就完成了对视图代码的更改。

 
 
 
 

  
  
  
  
});
  
  
  
  

 
 
 
 

以下是此视图创建的UI的屏幕截图：

这是另一个屏幕截图，显示了过滤和多列排序（寻找 “position” 包括字符 “dev” 的员工，先按 “office” 排序，然后按姓氏排序）：

这是另一个屏幕截图，显示单击 CSV 按钮时会发生什么：

***，这是一个截图，显示在 LibreOffice 中打开的 CSV 数据：

好的，视图部分看起来非常简单；因此，控制器必须做所有繁重的工作，对吧？ 让我们来看看……

控制器 browserLister 操作

回想一下，我们看到过这个字符串：

 
 
 
 

  
  
  
  
"${createLink(controller: 'employee', action: 'browserLister')}"
 
 
 
 

对于从 DataTables 模型中调用 AJAX 的 URL，是在 Grails 服务器上动态创建 HTML 链接，其 Grails 标记背后通过调用 createLink() 的方法实现的。这会最终产生一个指向 EmployeeController 的链接，位于：

 
 
 
 

  
  
  
  
embrow/grails-app/controllers/com/nuevaconsulting/embrow/EmployeeController.groovy
 
 
 
 

特别是控制器方法 browserLister()。我在代码中留了一些 print 语句，以便在运行时能够在终端看到中间结果。

 
 
 
 

  
  
  
  
    def browserLister() {
  
  
  
  
        // Applies filters and sorting to return a list of desired employees
 
 
 
 

首先，打印出传递给 browserLister() 的参数。我通常使用此代码开始构建控制器方法，以便我完全清楚我的控制器正在接收什么。

 
 
 
 

  
  
  
  
      println "employee browserLister params $params"
  
  
  
  
        println()
 
 
 
 

接下来，处理这些参数以使它们更加有用。首先，jQuery DataTables 参数，一个名为 jqdtParams 的 Groovy 映射：

 
 
 
 

  
  
  
  
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()
 
 
 
 

接下来，列数据，一个名为 columnMap 的 Groovy 映射：

 
 
 
 

  
  
  
  
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()
 
 
 
 

接下来，从 columnMap 中检索的所有列表，以及在视图中应如何排序这些列表，Groovy 列表分别称为 allColumnList 和 orderList ：

 
 
 
 

  
  
  
  
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"
 
 
 
 

我们将使用 Grails 的 Hibernate 标准实现来实际选择要显示的元素以及它们的排序和分页。标准要求过滤器关闭；在大多数示例中，这是作为标准实例本身的创建的一部分给出的，但是在这里我们预先定义过滤器闭包。请注意，在这种情况下，“date hired” 过滤器的相对复杂的解释被视为一年并应用于建立日期范围，并使用 createAlias 以允许我们进入相关类别 Position 和 Office：

 
 
 
 

  
  
  
  
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)
  
  
  
  
 }
  
  
  
  
 }
  
  
  
  
}
 
 
 
 

是时候应用上述内容了。***步是获取分页代码所需的所有 Employee 实例的总数：

 
 
 
 

  
  
  
  
        def recordsTotal = Employee.count()
  
  
  
  
        println "employee recordsTotal $recordsTotal"
 
 
 
 

接下来，将过滤器应用于 Employee 实例以获取过滤结果的计数，该结果将始终小于或等于总数（同样，这是针对分页代码）：

 
 
 
 

  
  
  
  
        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)
  
  
  
  
 }
 
 
 
 

要完全清楚，JTable 中的分页代码管理三个计数：数据集中的记录总数，应用过滤器后得到的数字，以及要在页面上显示的数字（显示是滚动还是分页）。 排序应用于所有过滤的记录，并且分页应用于那些过滤的记录的块以用于显示目的。

接下来，处理命令返回的结果，在每行中创建指向 Employee、Position 和 Office 实例的链接，以便用户可以单击这些链接以获取相关实例的所有详细信息：

 
 
 
 

  
  
  
  
        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)]
  
  
  
  
        }
 
 
 
 

***，创建要返回的结果并将其作为 JSON 返回，这是 jQuery DataTables 所需要的。

 
 
 
 

  
  
  
  
 def result = [draw: jqdtParams.draw, recordsTotal: recordsTotal, recordsFiltered: recordsFiltered, data: employees]
  
  
  
  
 render(result as JSON)
  
  
  
  
 }
 
 
 
 

大功告成。

如果你熟悉 Grails，这可能看起来比你原先想象的要多，但这里没有火箭式的一步到位方法，只是很多分散的操作步骤。但是，如果你没有太多接触 Grails（或 Groovy），那么需要了解很多新东西 - 闭包，代理和构建器等等。

在那种情况下，从哪里开始？ ***的地方是了解 Groovy 本身，尤其是 Groovy closures 和 Groovy delegates and builders。然后再去阅读上面关于 Grails 和 Hibernate 条件查询的建议阅读文章。

结语

jQuery DataTables 为 Grails 制作了很棒的表格数据浏览器。对视图进行编码并不是太棘手，但 DataTables 文档中提供的 PHP 示例提供的功能仅到此位置。特别是，它们不是用 Grails 程序员编写的，也不包含探索使用引用其他类（实质上是查找表）的元素的更精细的细节。

我使用这种方法制作了几个数据浏览器，允许用户选择要查看和累积记录计数的列，或者只是浏览数据。即使在相对适度的 VPS 上的百万行表中，性能也很好。

一个警告：我偶然发现了 Grails 中暴露的各种 Hibernate 标准机制的一些问题（请参阅我的其他 GitHub 代码库），因此需要谨慎和实验。如果所有其他方法都失败了，另一种方法是动态构建 SQL 字符串并执行它们。在撰写本文时，我更喜欢使用 Grails 标准，除非我遇到杂乱的子查询，但这可能只反映了我在 Hibernate 中对子查询的相对缺乏经验。