angular-datatables學習與實踐總結3

這篇文章主要介紹dtOptions中的columns和columnDefs屬性,這兩個屬性的類型都是array。

colunms和colunmDefs屬性都可以用來定義表格中的列,不同點在於columns只能一列一列的定義,也就是說你有多少個th,就要定義多少個。而colunmDefs可以定義一個或多個列的屬性,colunmDefs相對於columns多了一個targets選項,它表示定義的是哪些列,可以是下列情況:

  • 0或者正整數-列從左到右是從0開始
  • 一個負數-列從右到左的索引(-1代表最後一列)
  • 一個字符串-將字符串和類名匹配列
  • 字符串"_all"-所有列
  • 另外, targets可以同時指定多列,接受一個數組(比如 targets: [ -1, -2 ]

兩者共用的常用選項:

title:string 設置列的標題。

name:string 設置列的描述名稱,可以通過dtInstance.column(name).data()來獲取該列數據。

data:string 設置列的數據源,即如何從整個Table的數據源(object / array)中獲得,與數據源中的key相對應。

className:string 給列中每個單元格指定一個或多個class,每個樣式用空格分割。

defaultContent:string 單元格的默認內容。

orderable:boolean 列是否排序,默認true。

orderSequence:array 定義列排序方向,默認值['asc','desc']。

searthable:boolean 開啓或者關閉此列中數據過濾,默認true。

width:string 定義列寬。

render:在列上處理數據的函數,可以再次自定義顯示內容。可以看做爲把請求過來的數據做進一步的處理,一般使用function來進行處理。function render( data, type, row, meta ){} 該函數必須要返回最終使用的數據。

  • data- 當前cell的值
  • type- 數據類型
  • row - 整個row的數據



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章