extjs3.x 动态隐藏列头的做法

qGridPanel.addListener(‘rowclick‘,function(){
    var record = qGridPanel.getSelectionModel().getSelected();

    ffGridStore.removeAll();
    ffGridStore.baseParams = {
      ‘classid‘ : escape(record.data.classid),
      ‘studentcode‘ : escape(record.data.studentcode),
      ‘coachcode‘ : escape(record.data.coachcode),
      ‘bosid‘ :escape(record.data.trainserialid),
      ‘start‘ : 0,
      ‘limit‘ : 1
    };
    ffGridStore.load({

    });
    eeGridStore.removeAll();
    eeGridStore.baseParams = {
      ‘classid‘ : escape(record.data.classid),
      ‘studentcode‘ : escape(record.data.studentcode),
      ‘limit‘ : qbbar.pageSize
    };
    eeGridStore.load({     //这段代码是  重新加载数据源
      callback : function(record, options, success) {      //重新加载数据源   后的回掉函数,    用来操作 加载完数据的后续处理,比如隐藏没有数据的列,以此 达到动态列的目的

      var max = record[0].json.max;//当前的数据源(包含所有数据)
    if((max+2)<=16){//这里加2 原因:因为第一列是类型,所以加1 ,比如 max=8 那么要从第九列开始隐藏,所以需要再加1

      for(var i=max+2;i<=16;i++){
      eeGridPanel.getColumnModel().setHidden(i,true);  //隐藏指定的列
      }
    }
  }
});

思路:

0 .先固定一定数量的列头,数据加载出来再把不必要的列头隐藏,这样就达到       伪动态列的效果。

1.grid 表格展示的数据有一定的规律,column 列名起的也有一定的规律

2.根据规律后台组装出特定的数据给前段

3.根据最长的数据长度,隐藏不需要的列头

初始化页面的列头:

数据加载后的列头图:

原文地址:https://www.cnblogs.com/xplj2013/p/10451162.html

时间: 2024-11-06 09:52:32

extjs3.x 动态隐藏列头的做法的相关文章

SAP ABAP编程 Table Control动态隐藏列

在SAP DIALOG设计中,有时候需要动态的隐藏某些列,下面是方法. ***数据定义 CONTROLS: table_control TYPE TABLEVIEW USING SCREEN 0100.    "Table Control名称 DATA: l_col LIKE LINE OF table_control-cols.                                               "定义Table Control 列 ***在PBO中 PROC

Jquery datatable 动态隐藏列(根据有无值)

一场景: 前端利用datatable初始化的时候会向后端调用数据,需求是 要动态的使某一列根据传回来的一个标志位是否有值来决定显示与否 这是当前传回值有活动优惠幅度的情况下 这是没有活动优惠的情况下 可以发现[活动优惠幅度]这一列都被隐藏了 二.实现方法及原理 实现难度:datatable是js动态生成结果集也就是(<tr><td>),也就是说我们无法在html的标签中手动的加入id或者class 实现过程:在 "columns":[] 的当前列之中 如  {o

treegrid 动态隐藏列

function getShorMonths(){    var d = new Date();    var str = d.getFullYear()+"-"+(d.getMonth()+1);    var arr=["2018-12","2018-11","2018-10","2018-09","2018-08","2018-07","2018-06

Extjs 动态修改gridPanel列头信息以及store数据的方法

1 /*******************************checkbox按钮 历史报警信息**************************************/ 2 var checkboxHistoryModule = new Ext.form.Checkbox({ 3 id : "alarmHistoryInfoCheck", 4 name : "alarmHistoryInfoCheck", 5 //width : 70, 6 boxLab

EBS form动态隐藏folder列

动态隐藏folder列,一般写在 WHEN-NEW-FORM-INSTANCE 里. 遇到有关联行的情况,可以写在行的when-new里. 引用pll: APPFLDR 引用过程: APP_FOLDER_DEL_FLD l_old_itm := :system.cursor_item; --转到你要删除的ITEM上 go_item('BLOCK.ITEM'); --调用标准api隐藏当前列 APP_FOLDER_DEL_FLD; go_item(l_old_itm); 下列情况下不能被隐藏: 1

[Javascript] 动态隐藏和显示 Layui 数据表格的列

需求: 设置一个按钮,动态隐藏或展示数据表格的列.默认隐藏部分列,点击按钮进行显示,再次点击就隐藏. 基于 layui 的数据表格. 代码: 绑定按钮事件. 这里需要设置的列比较多,表格字段名格式:d1_roi.d1_ltv.d2_roi.d2_ltv... 原理:先清除每列的 layui-hide 的 class,然后给当前列每个格子加上固定宽度即可. 1 //拓展列切换 2 $(".js-showhide").click(function(){ 3 var roi_key = ''

easyui datagrid 表格动态隐藏部分列的展示

1.一套代码中,可能不同的项目情况都在用,但是可能不同的项目要求展示的datagrid列的内容并不一致,所以能够动态的显示部分datagrid列的内容. 即datagrid的中的某一列,这个项目要求显示那个项目要求不显示. 2.js代码实现 function gridLoad() { $('#t_auclot').datagrid( { idField : 'id', // 只要创建数据表格 就必须要加 ifField title : '拍卖列表', fit : true, url : pare

[WinForm]DataGridView列头右键菜单

[WinForm]DataGridView列头右键菜单 前言 继续"不误正业" - - #,记录一下.有时候有这样的需求:DataGridView的列头菜单可以选择具体显示哪些列,而数据区域的菜单显示增删改查,这样就需要设置两个菜单了,而DataGridView并没有为列头设置菜单的选项,这里分享一段代码. 声明 欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnblogs.com 农民伯伯: http://over140.cnblogs.com 正文 一.拖拽一个

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

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