用户动态显示隐藏列，可排序

前言

在后台管理系统开发中，难免会出现列数太多的情况，这里提供一个解决方案：用户设置显示哪些列，每个用户互不影响，并且可以根据用户的习惯设置列的排序。

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/Leo_wl/p/10337415.html

时间： 2024-11-07 09:10:55

用户动态显示隐藏列，可排序的相关文章

extjs中gridpanel动态显示/隐藏列

在extjs3中,大家知道用 myGrid.getColumnModel().setHidden(i,true);但到了4.0后,已经没有getColumnModel这个方法了,我们在Ext.panel.Table看到以下片段 if (headerCtCfg instanceof Ext.grid.header.Container) { me.headerCt = headerCtCfg; me.headerCt.border = border; me.columns = me.headerCt

DataTables学习：从最基本的入门静态页面，使用ajax调用Json本地数据源实现前端开发深入学习，根据后台数据接口替换掉本地的json本地数据，以及报错的处理地方，8个例子（显示行附加信息，回调使用api，动态显示和隐藏列...），详细教程

一.DataTables  个人觉得学习一门新的插件或者技术时候,官方文档是最根本的,入门最快的地方,但是有时候看完官方文档,一步步的动手写例子,总会出现各种莫名其妙的错误,需要我们很好的进行研究出错的地方. 官方网站(中文):http://datatables.club/ 官方网站:https://www.datatables.net/  二.简单的例子 怎样简单地使用DataTables?使用下方简单的几行代码,一个方法初始化table. $(document).ready(function

TABLE CONTROL隐藏列和固定列的实现

一.设置固定列 需求:为了方便对主要关心信息地查看,用户希望TABLE CONTROL左边的一列或者几列在屏幕上固定.针对用户这样子的需求, 我们首先会想到类似与屏幕编辑/可见等字段属性设置,但是此方法行不通.解决方法:通过设置Table Control自带的属性,定义最左边的某些列不可滚动.在Screen Layout中,双击Table Control的右上角,弹出"表控制"属性,即可设置.如下图所示: 二.隐藏列 需求:隐藏TABEL CONTROL的某一列或者多列,其实针对这样子

ASP.new GridView获取隐藏列值的几种方法

解决方法: 原文来自:http://www.tzwhx.com/NewShow/newBodyShow/控件_32933.html 作者:lerit  1.隐藏列前获取数据 看这样一个例子(以下均以此为例):用户选择一些查询条件后,点击"查询"按钮.后台需要根据每行中第六列的值是否为1,来设置第三个单元格的背景色为红色. 这种方法中,后台是在按钮的Click事件中,去数据库取记录,然后得到DataTable,最后将它绑定到GridView中.如果我们需要在GridView的RowDat

pb数据窗口下拉数据窗口列的排序(翻译)

datawindow是一个功能强大而且扩展性很强的工具,一个非常好的功能能够让用户点击列头对datawindow中的列进行排序. 排序功能还允许你指定列对数据窗口进行排序,这个功能对大多数的列都能够使用,但是他却不能对有下拉数据窗口列进行排序.原因就是 这个排序的功能是通过列的值进行排序的而不是显示值. 解决这个问题的的办法是可以使用LookUpDisplay这个函数,这个功能能够返回列的显示的值,通过对lookupdisplay(列名)这个函数排序, 数据窗口就能对这个显示值进行排序了. dw

DataGridView右键菜单自定义显示及隐藏列

WinForm程序中表单的列可自定义显示及隐藏,是一种常见的功能,对于用户体验来说是非常好的.笔者经过一段时间的摸索,终于实现了自己想要的功能及效果,现记录一下过程: 1.新建一个自定义控件,命名为:PopupMenuControl. 2.在PopupMenuControl.Designet文件中的InitializeComponent()方法下面,注册以下事件: this.Paint += new System.Windows.Forms.PaintEventHandler(this.Popu

[Easyui - Grid]为easyui的datagrid、treegrid增加表头菜单，用于显示或隐藏列

为easyui的datagrid.treegrid增加表头菜单,用于显示或隐藏列 /** * @author 孙宇 * * @requires jQuery,EasyUI * * 为datagrid.treegrid增加表头菜单,用于显示或隐藏列,注意:冻结列不在此菜单中 */ var createGridHeaderContextMenu = function(e, field) { e.preventDefault(); var grid = $(this);/* grid本身 */ var

12c 新特性-隐藏列

隐藏列 在11G中,Oracle就引入了不可见索引和虚拟字段的形式.12c继续发扬光大,引入了不可见字段. 之前的版本我们往往会创建视图来隐藏某些字段,12c中so easy. 在12c中,你可以创建通过invisible关键词来创建/修改某个字段为不可见.这一字段在查询中不会出现,除非指定这个字段.同样插入数据的时候也一样,默认是不向不可见字段插数据. 如: 1.创建一个新表,并指定sal为隐藏字段 SQL> create table test_a(name varchar2(50),age 

DataGridView隐藏列用CSS实现

隐藏DataGridView某一列,用CSS控制 CSS Code: .hidden{ display:none;} c# Code: <asp:BoundField DataField="id" HeaderText="id"> <ControlStyle CssClass="hidden" /> <ItemStyle CssClass="hidden" /> <HeaderStyl