碼上歡樂
相關內容    簡體    繁體

datatable-----columns.render

本文轉載自   查看原文   2017-06-27 09:27   6091 

columns.render

起始版本號: 1.10.0

渲染(處理)數據顯示在表格中

說明

這個屬性可以操作從數據源讀取到的數據。 columns.dataOption 和 columns.renderOption columns.render 1不定時一講 columns.render 2不定時一講 columns.render 3不定時一講 columns.render 4不定時一講 比較像，可以說前者是只讀，后者稍微復雜點可以讀可以寫。

columns.renderOption columns.render 1不定時一講 columns.render 2不定時一講 columns.render 3不定時一講 columns.render 4不定時一講 可以看做為把請求過來的數據做進一步的處理， 比較常見的操作有格式化、字符串替換、字符串截取等等其他處理數據的方式。 Datatables把不同數據的不同操作叫做 orthogonal-data （正交數據）, 並允許不同形式的相同數據做不同的操作（例如，日期字段給用戶是以'yyyy-MM-dd hh:mi:ss'格式顯示和搜索， 但是以long型作為排序）

有三種特殊的值可以通過 columns.renderOption columns.render 1不定時一講 columns.render 2不定時一講 columns.render 3不定時一講 columns.render 4不定時一講 解決

Array access（數組使用）

當使用如下格式的數據時，該選項可以訪問數據中多個和一個元素。你需要理解這兩種不同形式之間的區別。

  • 使用這個數組里一個或者多個屬性 - 使用 []符號
  • 只獲得數組里的一個元素 - 使用點符號 - e.g. .0 訪問數組的第一個元素

看如下結構的數據:

1
2
3
4
5
"access" : [
   { "id" : "1" , "name" : "Printer" },
   { "id" : "3" , "name" : "Desktop" },
   { "id" : "4" , "name" : "VMs" }
]

顯示 name 屬性在單個的 cell中，使用 access[, ].name - 將會得到使用 ,連接的字符串 - e.g. 在這個情況下結果將是 Printer, Desktop, VMsString

顯示單個的屬性，使用 .{index}.還是以上面的數據結構，現在要顯示數組里的一條數據里的name， 使用 access.0.name - e.g. 在這個情況下得到的結果是 Printer

數據類型（Type）

integer

描述:

作為數組索引的數據來源，Datatables默認(每一列遞增)

string

描述:

從數據源中讀取一個對象屬性。有是三個特殊的選項可以改變Datatables讀取數據源中的對象:

  • . - 點，是JavaScript中的符號. 就像你是用 .來獲取JavaScript嵌套對象一樣， 所以你也可以在Datatables中的optiondata同樣使用， 比如 browser.version或者 browser.name。如果你的對象屬性名中包含 .你可以是用 \\來避開，比如 first\\.name

  • [] - 數組符號. Datatables可以自動在數據源中加入 []中的字符，比如： name[, ] 將會把數據用逗號空格來隔開數據。 如果 []中沒有字符，就返回原始的數據。參考上面 Access Array的例子

  • () - 函數符號。 添加 () 到參數的后面，將會執行這個同名函數， 比如: browser() 在數據源中的一個簡單的方法, browser.version() 或者在屬性里在嵌套一個方法 browser().version再或者是從一個方法里返回的對象里獲取屬性。 注意，函數符號推薦使用 columns.renderOption columns.render 1不定時一講 columns.render 2不定時一講 columns.render 3不定時一講 columns.render 4不定時一講 而不使用 columns.dataOption ，前者比后者更容易處理渲染

object

描述:

Datatables要求使用不同數據給不同的數據類型（ filter String display String type String sort String ）。提到屬性名稱就是對應的屬性名，他的值可以被定義為 integer，string或者function，規則就像 columns.renderOption columns.render 1不定時一講 columns.render 2不定時一講 columns.render 3不定時一講 columns.render 4不定時一講 做的一樣

注意， _ String選項可以被定義。當你沒有指定數據類型時，這個 被當做默認值交給Datatables處理。 如果 _ String選項沒有被選擇數據類型指定到數據列，那么 columns.dataOption 將會被使用。

看下面的數據例子：

1
2
3
4
5
6
"data" : "phone" ,
"render" : {
     "_" : "plain" ,
     "filter" : "filter" ,
     "display" : "display"
}

function render( data, type, row, meta )

描述:

如果做為一個function，那么每當Datatables從columns中的cell獲取數據時，都需要執行該方法。 注意，該方法會被多次調用，根據不同的數據類型，比如sorting（排序）、filtering(過濾)和display(顯示)

參數:
  Name（名稱） Type（類型） Optional（可選）
1 data

Any

 No
  當前cell的值（基於 columns.dataOption ）
2 type stringType No
  數據類型 - 有這些值：filter、display、type、sort
3 row

Any

 No
  整個row的數據（不基於 columns.dataOption ）
4 meta objectType No
 

從 1.10.1版開始: 一個對象包含了單元格的附加信息. 對象包含如下屬性:
Returns（返回）:

方法返回的數據被用作Datatables最終使用的數據

示例

從一個對象數組創建一個逗號分隔的字符串

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*
{
"browser":"chrome",
"engine":"webkiet",
"platform": [
   { "id": "1", "name": "windows" },
   { "id": "3", "name": "linux" },
   { "id": "4", "name": "mac" }
]
}
*/
$( '#example' ).dataTable( {
   "ajaxSource" : "sources/deep.txt" ,
   "columns" : [
     { "data" : "engine" },
     { "data" : "browser" },
     {
       "data" : "platform" ,
       "render" : "[, ].name"
     }
   ]
} );

作為一個對象,提取不同類型不同的數據

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// This would be used with a data source such as:
//   { "phone": 5552368, "phone_filter": "5552368 555-2368", "phone_display": "555-2368", ... }
// Here the `phone` integer is used for sorting and type detection, while `phone_filter`
// (which has both forms) is used for filtering for if a user inputs either format, while
// the formatted phone number is the one that is shown in the table.
$( '#example' ).dataTable( {
   "columnDefs" : [ {
     "targets" : 0,
     "data" : null , // Use the full data source object for the renderer's source
     "render" : {
       "_" : "phone" ,
       "filter" : "phone_filter" ,
       "display" : "phone_display"
     }
   } ]
} );

如上， phone是對象的話：

1
2
3
4
5
6
7
8
9
10
11
12
13
// This would be used with a data source such as:
//   "phone": { "plain": 5552368, "filter": "5552368 555-2368", "display": "555-2368" }
$( '#example' ).dataTable( {
   "columnDefs" : [ {
     "targets" : 0,
     "data" : 'phone' ,
     "render" : {
       "_" : "plain" ,
       "filter" : "filter" ,
       "display" : "display"
     }
   } ]
} );

根據數據源的數據替換成超鏈接

1
2
3
4
5
6
7
8
9
$( '#example' ).dataTable( {
   "columnDefs" : [ {
     "targets" : 0,
     "data" : "download_link" ,
     "render" : function ( data, type, full, meta ) {
       return '<a href="' +data+ '">Download</a>' ;
     }
   } ]
} );

當字符串太長的時候顯示點點

1
2
3
4
5
6
7
8
9
10
11
$( '#example' ).dataTable( {
   "columnDefs" : [ {
     "targets" : 4,
     "data" : "description" ,
     "render" : function ( data, type, full, meta ) {
       return type === 'display' && data.length > 40 ?
         '<span title="' +data+ '">' +data.substr( 0, 38 )+ '...</span>' :
         data;
     }
   } ]
} );

使用一個對象實例作為數據源的行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function Person( name, age, position ) {
     this ._name     = name;
     this ._age      = age;
     this ._position = position;
 
     this .name = function () {
         return this ._name;
     };
 
     this .age = function () {
         return this ._age;
     };
 
     this .position = function () {
         return this ._position;
     };
}
 
 
$(document).ready( function () {
     var table = $( '#example' ).DataTable({
         columns: [
             { data: null , render: 'name' },
             { data: null , render: 'age' },
             { data: null , render: 'position' }
         ]
     });
 
     table.row.add( new Person( 'Airi Satou' ,     33, 'Accountant' ) );
     table.row.add( new Person( 'Angelica Ramos' , 47, 'Chief Executive Officer (CEO)' ) );
     table.row.add( new Person( 'Ashton Cox' ,     66, 'Junior Technical Author' ) );
     table.draw();
} );

字符如果太長，截取顯示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//初始化表格
var oTable = $( "#example" ).DataTable({
     ajax: {
         url: "dataList.action" ,
         data: {
             args1: "我是固定傳參的值，在服務器接收參數[args1]"
         }
     },
     columns: [{
         data: "content" ,
         render: function (data, type, row, meta) {
             //type 的值  dispaly sort filter
             //代表，是顯示類型的時候判斷值的長度是否超過8，如果是則截取
             //這里只處理了類型是顯示的，過濾和排序返回原始數據
             if (type === 'display' ) {
                 if (data.length > 8) {
                     return '<span title="' + data + '">' + data.substr(0, 7) + '...</span>' ;
                 } else {
                     return '<span title="' + data + '>' + data + '</span>' ;
                 }
             }
             return data;
         }
     }]
});

字符如果太長，截取顯示 （css實現）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* 單元格連續純字母數字強制換行顯示 */
.wordwrap{
     word-wrap: break -word;
     word- break : break -all;
     overflow: hidden;
}
/* 超長文字單元格省略號顯示 */
.ellipsis{
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     -o-text-overflow: ellipsis;
}
 
//初始化表格
var oTable = $( "#example" ).DataTable({
     ajax: {
         url: "dataList.action" ,
         data: {
             args1: "我是固定傳參的值，在服務器接收參數[args1]"
         }
     },
     columns: [
         {
             data: "content" , class: "wordwrap ellipsis"
         }
     ]
});

相關

下面的選項是直接相關的，也可能是您的應用程序的開發非常有用。

Options

http://datatables.net/reference/option/columns.render


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 datatable columns與columnDefs antd Table 中columns的render() datatables中columns.render的使用 插件 DataTable 創建列表 render參數的詳解與如何傳遞本行數據id columns樣式屬性使用 fiddler的columns添加HTTPMethod information_schema.COLUMNS MySQL COLUMNS分區 Bootstrap Table Fixed Columns pandas的.columns和.index
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM