色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

jquery datatables 合并行

林玟書1年前11瀏覽0評論

在網頁前端開發中,數據表格是一個非常常見的元素。jquery datatables 是一個非常強大的用來處理數據表格的插件,其功能非常豐富,可以滿足開發者對于數據表格的絕大部分需求。其中最為常用的功能之一,就是合并表格中相鄰的相同行。

要實現表格行的合并,我們需要使用 datatables 中提供的 rowGroup 插件。這個插件可以根據指定的列,將相鄰的具有相同值的行進行合并,并且可以設置每個合并后的單元格中的內容為原來被合并掉的行的任意屬性或方法的返回值。

//指定要使用 rowGroup 的列
$('#myTable').DataTable({
"rowGroup": {
"dataSrc": "country"
}
});

在默認情況下,rowGroup 插件會將被合并掉的行的單元格賦上相應的 rowspan 屬性值,以便在表格中展示效果。但是,有時候我們需要在合并后的單元格中加入一些其它的元素,比如按鈕、鏈接等,此時就需要使用 rowGroup 數據源中的自定義返回值來實現該功能。

//將合并后的單元格設為第一個被合并行的國家名字+該國家的總出貨量
$('#myTable').DataTable({
"rowGroup": {
"dataSrc": "country",
"startRender": function(rows, group){
var total = rows.data().pluck('ship').reduce(function(a, b){
return a+b;
}, 0);
return group + ' (Total shipped: '+total+')';
}
}
});

有了 rowGroup 插件的支持,實現表格行的合并變得非常簡單。開發者只需要指定要使用 rowGroup 插件的列,并在需要的時候自定義返回值就可以了。當然,還有很多其它的定制化選項可以使用,讓開發者能夠更加靈活地控制表格的行為。