前言
在後臺管理系統開發中，難免會出現列數太多的情況，這裡提供一個解決方案：使用者設定顯示哪些列，每個使用者互不影響，並且可以根據使用者的習慣設定列的排序。
1、演示
2、html程式碼說明
3、javascript程式碼說明
4、總結
1、演示
2、HTML程式碼
<link rel="stylesheet" type="text/css" href="DataTables-1.10.15//media/css/jquery.dataTables.css">
<script type="text/javascript" language="javascript" src="DataTables-1.10.15/media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="DataTables-1.10.15/media/js/jquery.dataTables.js"></script>
<table id="page-table" class="table table-bordered table-hover">
<thead></thead>
<tbody></tbody>
</table>
引入jquery跟DataTables即可，然後再寫一個table。
3、javascript程式碼
1、呼叫
new $.pageSearch({
customColumns:{
pageId: pageId,// 唯一ID
pageFieldList:pageFieldList,
// dataTables的columns引數寫這裡
columns:{
column1:{
width:200
}
},
// dataTables的aoColumnDefs引數寫這裡
aoColumnDefs:{
column2:{
width:200,
mRender: function (data, type, full) {
return `custom ` + data;
}
}
}
},
DataTable:{// 這裡保留了DataTables的引數
data: dataList
}
});
customColumns物件是必傳的。
customColumns.pageId主要是存取資料用的，保證每一個例項的設定區分開來。
customColumns.pageFieleList是每個例項設定的資料，格式如下：
var pageFieldList = [{
display: true,
displayName: `Column1`,
fieldName: `column1`
}];
customColumns.columns是dataTables的columns，將原來的陣列改成了物件，以data為屬性名，其他屬性保留。
customColumns.aoColumnsDefs跟customColumns.columns同理。
2、pageSearch裡面的程式碼
!(function () {
function pageSearch(options){
this.table = null;
this.options = $.extend({
container:`#my-page`,//容器
settingBtn:`#setting`,//容器內的按鈕
table:`#page-table`,//容器內的table
customColumns:{
pageId: ``,//(必填)自定義列需要用到的id 必須唯一
pageFieldList: [],//(必填)頁面欄位配置
columns: null,//列配置項
columnDefaults: null
},
DataTable:{}//保留dataTables引數
},options);
this.main();
}
$.extend(pageSearch.prototype,{
main:function(){
this.renderThead();
this.setDefault();
this.initTable();
this.events();
},
// 對datatables設定預設引數
setDefault:function(){
$.extend($.fn.dataTable.defaults,{
searching: false,// 禁用搜尋
ordering: false,// 禁用排序
dom: "<`row`<`col-sm-12`tr>>" + "<`row`<`col-sm-5 page-info`li><`col-sm-7`p>>",
scrollY: 400 // 表格裡使用滾動
});
},
// 初始化dataTables
initTable:function(){
var opts = this.options;
var formatColumns = this.handleDataTableOption();
var dataTablesOption = $.extend({
columns:formatColumns.columns,
aoColumnDefs:formatColumns.aoColumnDefs
},opts.DataTable);
this.table = $(opts.table,opts.container).DataTable(dataTablesOption);
},
// 事件繫結
events:function(){
var that = this;
var opts = this.options;
//設定
$(opts.settingBtn,opts.container).click(function(){
that.actionSetting();
});
},
// 把資料轉成dataTables需要的格式
handleDataTableOption:function(){
var customColumns = this.options.customColumns;
var colums = [];
var columnDefs = [];
$.each(customColumns.pageFieldList, function (i, fieldInfo) {
var fieldName = fieldInfo.fieldName;
var columnDefObj = customColumns.columnDefaults && customColumns.columnDefaults[fieldName];
colums.push($.extend({
data: fieldName,
visible: fieldInfo.display
}, customColumns.columns ? customColumns.columns[fieldName] : {}));
if (columnDefObj) {
columnDefs.push($.extend({
aTargets: [i]
}, columnDefObj));
}
});
return {
columns: colums,
aoColumnDefs: columnDefs
}
},
// 渲染表頭
renderThead:function(){
var that = this;
var customColumns = this.options.customColumns;
var thead = `<tr>`;
$.each(customColumns.pageFieldList, function (i, fieldInfo) {
if (fieldInfo.display) {
thead += `<th title="` + fieldInfo.displayName + `">` + fieldInfo.displayName + `</th>`;
} else {
thead += `<th style="display:none;" title="` + fieldInfo.displayName + `">` + fieldInfo.displayName + `</th>`;
}
});
thead += `</tr>`;
$(`thead`, that.options.table).html(thead);
},
// 開始設定
actionSetting:function(){
var that = this;
var list = this.options.customColumns.pageFieldList;
dialog({
title:`設定`,
content:this.getDialogContent(list),
width:300,
height:400,
onshow:function(){
$(`#sortable`,this.node).sortable().disableSelection();
},
skin:`scroll-y`,
okValue:`儲存`,
ok:function(){
var fieldList = [];
$(`li`,this.node).each(function(){
var data = $(this).data();
fieldList.push({
display: $(`[name="display"]`,this).prop(`checked`),
displayName: data.displayName,
fieldName: data.fieldName
});
});
if(!localStorage){
alert(`抱歉，瀏覽器不支援localStorage，資料儲存失敗！`)
}else{
// 這裡做本地快取，可以換成ajax
localStorage.setItem(that.options.customColumns.pageId,JSON.stringify(fieldList));
alert(`儲存成功`);
that.options.customColumns.pageFieldList = fieldList;
that.columnOptions = that.handleDataTableOption();
// 銷燬datatables例項
that.table && that.table.destroy();
// 重繪表頭
that.renderThead();
// 用新的options重新渲染dataTables
that.table && (that.table = $(that.options.table,that.options.container).DataTable($.extend(that.columnOptions, that.options.DataTable)));
//關閉視窗
this.close().remove();
}
return false;
},
cancelValue:`取消`,
cancel:true
}).showModal();
},
// 生成彈窗的內容
getDialogContent:function(list){
var html = ``;
html += `<h4 class="green">可拖拽排序列表</h4>`;
html += `<ul id="sortable">`;
for(var i = 0;i < list.length;i++){
html += `<li class="ui-state-default" data-display-name="` + list[i].displayName + `" data-field-name="` + list[i].fieldName + `">`;
html += `<span>` + list[i].displayName + `</span>`;
html += `<input type="checkbox" name="display" title="是否展示" ` + (list[i].display ? `checked="checked"` : ``) + ` />`;
html += `</li>`;
}
html += `</ul>`;
return html;
}
});
$.pageSearch = pageSearch;
})();
$.pageSearch是實現功能的核心。實現了幾個方法：
1、main是程式的入口
2、setDefault對DataTables的預設設定，減少重複設定的煩惱。
3、initTable是開始對table例項化成DataTables例項。
4、events所有事件都寫在這裡。
5、handleDataTableOption將customColumns.columns和customColumns.aoColumnsDefs轉成DataTables的columns和aoColumnsDefs。
6、renderThead因表頭的排序會改變，所以要重新渲染新的表頭。
7、actionSetting是對設定的儲存，原始碼中使用localStorage儲存，大家也可以改成ajax儲存。
4、總結
上述只是挑選部分重要的程式碼，如需檢視完整程式碼請到我的github上檢視。
完整原始碼地址：https://github.com/ll527563266/datatables-dynamic-columns
線上預覽地址：https://ll527563266.github.io/datatables-dynamic-columns
如果您覺得閱讀本文對您有幫助，請點一下“推薦”按鈕，您的“推薦”將是我最大的寫作能力！