easyUI dataGrid 隐藏分页工具栏隐藏表头

2024-03-24 15:57:02

一.方法1（不推荐）

适应以下需求：

1.当表格没有数据时，把datagrid隐藏;有数据的时候显示

2.表格不分页，无需显示分页栏

3.datagrid的高度由内容撑开（固定高度，无数据时显示空白也可，有数据要隐藏不行，因为本方法实质是隐藏表头，分页）

首先看第一点：大多数人都是这样想的，即单纯的给datagrid <table>动态设置display:none控制显示隐藏；这种方法是不生效的（关于理由有兴趣的可以自己查下）。

以上是没有数据的情况下，为table设置了display:none，height没有设置，根据内容(没有数据的时候)撑开；

此时可以注意到，由于height是自适应的，要隐藏datagrid，只需隐藏表头，分页栏即可。

解决以上问题只需下面几行代码：

 $("#quotaList").datagrid({showHeader:false,pagination:false});

从datagrid官方文档可以看到，dataGrid有showHeader，pagination这两个属性，只要设置false即可隐藏。

有时候多查看官方文档往往是解决问题的最快途径

二 .方法2（推荐）

其实了解了easyUI的继承关系后，可以更方面的控制datagrid的显示隐藏。上面的方法走了个弯路......

实际上datagrid获取easyui的panel，再调用jQuery的hide()或者show()就可以了~

$("#tb").datagrid("getPanel").hide();//隐藏
$("#tb").datagrid("getPanel").show();//显示

easyUI dataGrid 隐藏分页工具栏隐藏表头相关推荐

jQuery EasyUI datagrid本地分页
2019独角兽企业重金招聘Python工程师标准>>> 代码如下: <!DOCTYPE html> <html> <head> <meta ...
easyui datagrid 不分页_快递物流管理系统(SSM,JQUERY-EASYUI,MYSQL)
知乎视频www.zhihu.com 快递物流管理系统(SSM,JQUERY-EASYUI,MYSQL)(毕业论文27564字,共78页,程序代码,MySQL数据库) 项目源码woc.xin [运行 ...
easyui datagrid json分页实例
原文章地址1 原文章地址2 参考这两篇文章实现了自己的分页 jsp页面 <script type="text/javascript"> $(function ...
Jquery EasyUI datagrid数据库分页
1.前端请求: function loadRefProj(searchInput) {$('#projreftable').datagrid({url: 'DataServer/SilentContr ...
easyui 隐藏input_easyui datagrid 列显示和隐藏
//当查询IT基础设施的时候隐藏'STAFF_ID'.'ITSM_STAFF_ID' if($("input[name='currentstate']").val()==2){ $ ...
easyui datagrid 列隐藏和显示
easyui datagrid 列隐藏和显示用js怎么控制列的显示和隐藏? 最佳答案 $('#grid').datagrid('hideColumn','列field');把hideColumn换成 ...
easyui datagrid表格头部鼠标右键进行列隐藏和展示
1.实现datagrid自定义初始化onHeaderContextMenu方法新增文件jquery.easyui.datagrid.column.js // 动态改变列头.var cmenu;fun ...
easyui datagrid 表格动态隐藏部分列的展示
1.一套代码中,可能不同的项目情况都在用,但是可能不同的项目要求展示的datagrid列的内容并不一致,所以能够动态的显示部分datagrid列的内容. 即datagrid的中的某一列,这个项目要求显 ...
datagrid中动态显示或隐藏某一列的方法（根据条件判断显示和隐藏）
在datagrid中,我们常常根据条件想展示或者隐藏某一列,即动态展示某列 onLoadSuccess:function(data){if(!top.checkHiddenSet("plat ...

最新文章

热门文章