EasyUI datagrid自适应问题解决
在使用js 动态创建EasyUI datagrid时,如果设置fit为true,在显示的时候数据的高度为固定高度不能自适应
解决办法是把fit设为false。
但这样设置后又有个问题,如果把columns定义在js里面,及时宽度设置为百分百,单元格的宽度不能随着浏览器的大小而变化
解决办法是把columns定义在页面html里。
最后的代码如下:
html代码
<table id="grid" title="考勤数据" style="width:100%;height:auto">
<thead>
<tr>
<th field="GUID" hidden="hidden">ID</th>
<th field="EmpName" width="20%">姓名</th>
<th field="KqDate" width="20%">日期</th>
<th field="KqTime" width="20%">时间</th>
<th field="IsInvalid" width="16%">是否有效</th>
<th field="Remark" width="20%">备注</th>
</tr>
</thead>
</table>
js代码
$('#grid').datagrid({
url: '/Checking/GetAll?r=' + Math.random(), //数据接收URL地址
iconCls: 'icon-view', //图标
fit: false, //自动适屏功能
nowrap: true,
autoRowHeight: false, //自动行高
autoRowWidth: true,
striped: true,
collapsible: false,
remoteSort: true,
idField: 'GUID', //主键值
pagination: true, //启用分页
rownumbers: true, //显示行号
multiSort: true, //启用排序
sortable: true, //启用排序列
fitcolumns: true,
queryParams: $("#searchform").form2json(), //搜索条件查询
singleSelect: true,
/*columns: [[
{ field: 'GUID', hidden: true },
{ field: 'EmpName', title: '姓名', width: '20%', sortable: true },
{ field: 'KqDate', title: '日期', width: '20%', sortable: true },
{ field: 'KqTime', title: '时间', width: '20%', sortable: true },
{ field: 'IsInvalid', title: '有效否', width: '16%', sortable: true },
{ field: 'Remark', title: '备注', width: '20%' }
]],*/
toolbar: '#divtoolbar'
});
}
EasyUI datagrid自适应问题解决的更多相关文章
- EasyUI DataGrid自适应高度
我的页面分为上下两部分,但发现下面有DataGrid的高度总是自动改,数据根本显示不出来. 后来在博客园里看到这个:http://www.cnblogs.com/xienb/archive/2013/ ...
- easyui datagrid标题列宽度自适应
最近项目中使用easyui做前端界面,相信大部分使用过easyui datagrid的朋友有这么一个疑问:如果在columns中不设置width属性能不能写个方法让datagrid的头部标题和数据主体 ...
- 一步步实现 easyui datagrid表格宽度自适应,效果非常好
一步步实现 easyui datagrid表格宽度自适应,效果非常好: 一.设置公共方法,使得datagrid的属性 fitColumns:true $(function(){ //初始加载,表格宽 ...
- 控制EasyUI DataGrid高度
这次要说的是控制EasyUI的高度,平时我公司的项目,用EasyUI较多,然后datagrid这个组件是用的非常多的.平时我们都是固定高度,常见代码如下: <table ...
- EasyUI datagrid优化
easyui datagrid 在IE上加载速度慢, 150行数据就无法忍受了. firefox加载速度还可以. jquery easyui datagrid使用参考 http://www.cnblo ...
- jquery easyui datagrid使用参考
jquery easyui datagrid使用参考 创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: 页面上 ...
- Easyui Datagrid扩展fixRownumber方法 转载
$.extend($.fn.datagrid.methods, { fixRownumber : function (jq) { return jq.each(function () { var pa ...
- JQuery easyUI DataGrid 创建复杂列表头(译)
» Create column groups in DataGrid The easyui DataGrid has ability to group columns, as the followin ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(8)-MVC与EasyUI DataGrid 分页
系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...
随机推荐
- linux地址映射1、2、3(☆☆☆)
欢迎关注瘋耔新浪微博:http://weibo.com/cpjphone 一.线性映射与非线性映射 ...
- 漫长的补结题报告之路 poj3622
题意(引用):题意:有很多种草,有两个属性:价格和新鲜度:有很多牛,它们都会各自需求一种草,要求是其价格最低为ai,新鲜度最低为bi,且这些牛不希望自己的草和别人的一样.问要满足所有需求的最小花费是多 ...
- 在SQL Server实现最短路径的搜索
开始 这是去年的问题了,今天在整理邮件的时候才发现这个问题,感觉顶有意思的,特记录下来. 在表RelationGraph中,有三个字段(ID,Node,RelatedNode),其中Node和Rela ...
- centos 6.5 32位 编译安装Mysql
groupadd mysql #添加mysql组 useradd -g mysql mysql -s /bin/false #创建用户mysql并加入到mysql组,不允许mysql用户直接登录系统 ...
- ubuntu常用快捷键
1.直接退出窗口 Ctrl + q 2.窗口变大变小 Alt + Q 3.最小化窗口,显示桌面Ctrl + Alt + D 4.把当前窗口移到另一个工作区 Shift+ Ctrl + Alt +方 ...
- 随心所欲的DateTime显示格式
任何项目,难免会碰到DateTime的显示问题,.net框架虽提供丰富多样的显示方法,但我很少使用,因老忘记细节,每次都要纠结到底月份在前还是年份在前:日期分隔符到底是“/”,还是“\”,还是“-”等 ...
- 如何使用ping和tracert命令测试网站访问速度
在我们平时访问的网站中,有一些网站访问速度非常快,比如百度搜索网站和一些门户网站,有些网站访问很慢,有些网站甚至无法访问.那么我们该如何判断这些网站的访问速度呢?下面我们就使用Windows的ping ...
- 如何在网页中显示pdf
用如下的html代码即可(例子): <div class="postBody"> <div id="cnblogs_post_body"> ...
- C/C++:拷贝构造函数
拷贝构造函数是一种特殊的构造函数,因为它也是用来构造对象的.它具有构造函数的所有特性.拷贝构造函数的作用是用一个已经存在的对象去初始化另一个对象,这两个对象的类类型应该是一样的.定义拷贝构造函数的形式 ...
- Mongodb操作总结
1.Mongovue里面可以直接group by ,这个时候一定要注意,group by的任何条件的是 json, 注意当值是Int,非string型的时候,值不要加上双引号 2.注意group by ...