前言
在后台管理系统开发中, 难免会出现列数太多的情况, 这里提供一个解决方案: 用户设置显示哪些列, 每个用户互不影响, 并且可以根据用户的习惯设置列的排序.
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
如果您觉得阅读本文对您有帮助, 请点一下 "推荐" 按钮, 您的 "推荐" 将是我最大的写作能力!
来源: https://www.cnblogs.com/wy99/p/10334107.html