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在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...
随机推荐
- 配置SQL Server 2008服务器
怎么配置SQL Server 2008服务器_百度经验 http://jingyan.baidu.com/article/9faa7231a922c1473c28cb23.html 1.验证安装是否成 ...
- Android EditText控件行尾为表情时的BUG
今天处理项目上的一个诡异BUG,贴吧Android客户端发贴框是支持表情文字混排的,但是当发贴框的行内容末尾为表情时,尝试在表情后插入文字,就悲剧了:文字其实写进去了,但是不会显示出来.研究了一下,发 ...
- P94、面试题12:打印1到最大的n位数
题目:输入数字n,按顺序打印出从1最大的n位十进制数.比如输入3,则打印出1,2,3一直到最大的3位数999. 思路:先把字符串中的每一个数字都初始化为‘0’,然后每一次为字符串表示的数字加1,再打印 ...
- 理解TCP/IP协议
TCP/IP协议是Transmission Control Protocol/Internet Protocol的简写,中译名为传输控制协议/因特网互联协议. 单从TCP/IP协议这个名称看,好多人误 ...
- 【算法】 输入n 输出一个n*n的zigzag矩阵 利用c++实现
int main() { int N; cin>>N; int **a = new int *[N]; ) ;//如果没有申请到空间 ;i<N;i++) { a[i]= new in ...
- 液晶常用接口“LVDS、TTL、RSDS、TMDS”技术原理介绍
液晶常用接口“LVDS.TTL.RSDS.TMDS”技术原理介绍 1:Lvds Low-Voltage Differential Signaling 低压差分信号 1994年由美国国家半导体公司提出之 ...
- C#获取本地打印机列表,并将指定打印机设置为默认打印机
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...
- java之内部类与匿名内部类
Java 内部类 分四种:成员内部类.局部内部类.静态内部类和匿名内部类. 1.成员内部类: 即作为外部类的一个成员存在,与外部类的属性.方法并列. 注意:成员内部类中不能定义静态变量,但可以访问外部 ...
- poj 1836 Alignment(dp)
题目:http://poj.org/problem?id=1836 题意:最长上升子序列问题, 站队,求踢出最少的人数后,使得队列里的人都能看到 左边的无穷远处 或者 右边的无穷远处. 代码O(n^2 ...
- VBSCRIPT事件绑定(隐式)
很多新版的浏览器都开始不支持VBSCRIPT 所以系统开始不断地有script错误,开始比较多地接触VBSCRIPT vbscript 和javascript 事件绑定的类似方法为 vbscript: ...