接下來，插入一個(gè) JavaScript 塊，它主要提供三個(gè)功能：它設(shè)置頁(yè)腳中顯示的文本框的大小，以進(jìn)行列過濾，建立 DataTables 表模型，并創(chuàng)建一個(gè)處理程序來進(jìn)行列過濾。

 
 
 
 

  
  
  
  

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

下面的代碼處理表格列底部的過濾器框的大?。?/p>

 
 
 
 

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

接下來，定義表模型。這是提供所有表選項(xiàng)的地方，包括界面的滾動(dòng)，而不是分頁(yè)，根據(jù) DOM 字符串提供的裝飾，將數(shù)據(jù)導(dǎo)出為 CSV 和其他格式的能力，以及建立與服務(wù)器的 AJAX 連接。 請(qǐng)注意，使用 Groovy GString 調(diào)用 Grails createLink() 的方法創(chuàng)建 URL，在 EmployeeController 中指向 browserLister 操作。同樣有趣的是表格列的定義。此信息將發(fā)送到后端，后端查詢數(shù)據(jù)庫(kù)并返回相應(yīng)的記錄。

 
 
 
 

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

***，監(jiān)視過濾器列以進(jìn)行更改，并使用它們來應(yīng)用過濾器。

 
 
 
 

  
  
  
  
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，這樣就完成了對(duì)視圖代碼的更改。

 
 
 
 

  
  
  
  
});
  
  
  
  

 
 
 
 

以下是此視圖創(chuàng)建的UI的屏幕截圖：

這是另一個(gè)屏幕截圖，顯示了過濾和多列排序（尋找 “position” 包括字符 “dev” 的員工，先按 “office” 排序，然后按姓氏排序）：

這是另一個(gè)屏幕截圖，顯示單擊 CSV 按鈕時(shí)會(huì)發(fā)生什么：

***，這是一個(gè)截圖，顯示在 LibreOffice 中打開的 CSV 數(shù)據(jù)：

好的，視圖部分看起來非常簡(jiǎn)單；因此，控制器必須做所有繁重的工作，對(duì)吧？ 讓我們來看看……

控制器 browserLister 操作

回想一下，我們看到過這個(gè)字符串：

 
 
 
 

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

對(duì)于從 DataTables 模型中調(diào)用 AJAX 的 URL，是在 Grails 服務(wù)器上動(dòng)態(tài)創(chuàng)建 HTML 鏈接，其 Grails 標(biāo)記背后通過調(diào)用 createLink() 的方法實(shí)現(xiàn)的。這會(huì)最終產(chǎn)生一個(gè)指向 EmployeeController 的鏈接，位于：

 
 
 
 

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

特別是控制器方法 browserLister()。我在代碼中留了一些 print 語(yǔ)句，以便在運(yùn)行時(shí)能夠在終端看到中間結(jié)果。

 
 
 
 

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

首先，打印出傳遞給 browserLister() 的參數(shù)。我通常使用此代碼開始構(gòu)建控制器方法，以便我完全清楚我的控制器正在接收什么。

 
 
 
 

  
  
  
  
      println "employee browserLister params $params"
  
  
  
  
        println()
 
 
 
 

接下來，處理這些參數(shù)以使它們更加有用。首先，jQuery DataTables 參數(shù)，一個(gè)名為 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()
 
 
 
 

接下來，列數(shù)據(jù)，一個(gè)名為 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 中檢索的所有列表，以及在視圖中應(yīng)如何排序這些列表，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 標(biāo)準(zhǔn)實(shí)現(xiàn)來實(shí)際選擇要顯示的元素以及它們的排序和分頁(yè)。標(biāo)準(zhǔn)要求過濾器關(guān)閉；在大多數(shù)示例中，這是作為標(biāo)準(zhǔn)實(shí)例本身的創(chuàng)建的一部分給出的，但是在這里我們預(yù)先定義過濾器閉包。請(qǐng)注意，在這種情況下，“date hired” 過濾器的相對(duì)復(fù)雜的解釋被視為一年并應(yīng)用于建立日期范圍，并使用 createAlias 以允許我們進(jìn)入相關(guān)類別 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)
  
  
  
  
 }
  
  
  
  
 }
  
  
  
  
}
 
 
 
 

是時(shí)候應(yīng)用上述內(nèi)容了。***步是獲取分頁(yè)代碼所需的所有 Employee 實(shí)例的總數(shù)：

 
 
 
 

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

接下來，將過濾器應(yīng)用于 Employee 實(shí)例以獲取過濾結(jié)果的計(jì)數(shù)，該結(jié)果將始終小于或等于總數(shù)（同樣，這是針對(duì)分頁(yè)代碼）：

 
 
 
 

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

獲得這兩個(gè)計(jì)數(shù)后，你還可以使用分頁(yè)和排序信息獲取實(shí)際過濾的實(shí)例。

 
 
 
 

  
  
  
  
 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 中的分頁(yè)代碼管理三個(gè)計(jì)數(shù)：數(shù)據(jù)集中的記錄總數(shù)，應(yīng)用過濾器后得到的數(shù)字，以及要在頁(yè)面上顯示的數(shù)字（顯示是滾動(dòng)還是分頁(yè)）。 排序應(yīng)用于所有過濾的記錄，并且分頁(yè)應(yīng)用于那些過濾的記錄的塊以用于顯示目的。

接下來，處理命令返回的結(jié)果，在每行中創(chuàng)建指向 Employee、Position 和 Office 實(shí)例的鏈接，以便用戶可以單擊這些鏈接以獲取相關(guān)實(shí)例的所有詳細(xì)信息：

 
 
 
 

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

***，創(chuàng)建要返回的結(jié)果并將其作為 JSON 返回，這是 jQuery DataTables 所需要的。

 
 
 
 

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

大功告成。

如果你熟悉 Grails，這可能看起來比你原先想象的要多，但這里沒有火箭式的一步到位方法，只是很多分散的操作步驟。但是，如果你沒有太多接觸 Grails（或 Groovy），那么需要了解很多新東西 - 閉包，代理和構(gòu)建器等等。

在那種情況下，從哪里開始？ ***的地方是了解 Groovy 本身，尤其是 Groovy closures 和 Groovy delegates and builders。然后再去閱讀上面關(guān)于 Grails 和 Hibernate 條件查詢的建議閱讀文章。

結(jié)語(yǔ)

jQuery DataTables 為 Grails 制作了很棒的表格數(shù)據(jù)瀏覽器。對(duì)視圖進(jìn)行編碼并不是太棘手，但 DataTables 文檔中提供的 PHP 示例提供的功能僅到此位置。特別是，它們不是用 Grails 程序員編寫的，也不包含探索使用引用其他類（實(shí)質(zhì)上是查找表）的元素的更精細(xì)的細(xì)節(jié)。

我使用這種方法制作了幾個(gè)數(shù)據(jù)瀏覽器，允許用戶選擇要查看和累積記錄計(jì)數(shù)的列，或者只是瀏覽數(shù)據(jù)。即使在相對(duì)適度的 VPS 上的百萬行表中，性能也很好。

一個(gè)警告：我偶然發(fā)現(xiàn)了 Grails 中暴露的各種 Hibernate 標(biāo)準(zhǔn)機(jī)制的一些問題（請(qǐng)參閱我的其他 GitHub 代碼庫(kù)），因此需要謹(jǐn)慎和實(shí)驗(yàn)。如果所有其他方法都失敗了，另一種方法是動(dòng)態(tài)構(gòu)建 SQL 字符串并執(zhí)行它們。在撰寫本文時(shí)，我更喜歡使用 Grails 標(biāo)準(zhǔn)，除非我遇到雜亂的子查詢，但這可能只反映了我在 Hibernate 中對(duì)子查詢的相對(duì)缺乏經(jīng)驗(yàn)。