DataTableベースの実装では、ユーザーごとに非表示列を動的に表示し、ソート可能
19766 ワード
前言
バックグラウンド管理システムの開発では、カラム数が多すぎることは避けられません.ここでは、ユーザー設定がどのカラムを表示するか、各ユーザーが互いに影響を与えず、ユーザーの習慣に基づいてカラムのソートを設定できるソリューションを提供します.
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とDataTableを導入し、tableを1つ書きます.
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はdataTableの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: ">" + ">",
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 = '';
$.each(customColumns.pageFieldList, function (i, fieldInfo) {
if (fieldInfo.display) {
thead += '' + fieldInfo.displayName + '';
} else {
thead += '' + fieldInfo.displayName + '';
}
});
thead += '';
$('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 += '
';
html += '';
for(var i = 0;i < list.length;i++){
html += '- ';
html += '' + list[i].displayName + '';
html += '';
html += '
';
}
html += '
';
return html;
}
});
$.pageSearch = pageSearch;
})();$.pageSearchは機能を実現する核心である.いくつかの方法が実現されました.
1、mainはプログラムの入り口です
2、setDefaultはDataTableのデフォルト設定に対して、重複設定の悩みを減らす.
3、initTableはtableのインスタンス化を開始するDataTableインスタンスである.
4、eventsのすべての事件はここに書いてあります.
5.handleDataTable OptionはcustomColumns.columnsとcustomColumns.aoColumnsDefsは、DataTableのcolumnsとaoColumnsDefsに移行します.
6、renderTheadはヘッダのソートによって変わるので、新しいヘッダを再レンダリングします.
7、actionSettingsは設定の保存で、ソースコードにはlocalStorageを使用して保存し、ajaxに変更して保存することもできます.
4、まとめ
上記は重要なコードの一部を選択するだけで、完全なコードを表示する必要がある場合は私のgithubで見てください.
完全なソースアドレス:https://github.com/ll527563266/datatables-dynamic-columns
オンラインプレビューアドレス:https://ll527563266.github.io/datatables-dynamic-columns
本文を読むのが役に立つと思ったら、「推薦」ボタンをクリックしてください.あなたの「推薦」は私の最大の作文能力になります.