在使用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自适应问题解决的更多相关文章

  1. EasyUI DataGrid自适应高度

    我的页面分为上下两部分,但发现下面有DataGrid的高度总是自动改,数据根本显示不出来. 后来在博客园里看到这个:http://www.cnblogs.com/xienb/archive/2013/ ...

  2. easyui datagrid标题列宽度自适应

    最近项目中使用easyui做前端界面,相信大部分使用过easyui datagrid的朋友有这么一个疑问:如果在columns中不设置width属性能不能写个方法让datagrid的头部标题和数据主体 ...

  3. 一步步实现 easyui datagrid表格宽度自适应,效果非常好

    一步步实现 easyui datagrid表格宽度自适应,效果非常好: 一.设置公共方法,使得datagrid的属性  fitColumns:true $(function(){ //初始加载,表格宽 ...

  4. 控制EasyUI DataGrid高度

    这次要说的是控制EasyUI的高度,平时我公司的项目,用EasyUI较多,然后datagrid这个组件是用的非常多的.平时我们都是固定高度,常见代码如下:             <table  ...

  5. EasyUI datagrid优化

    easyui datagrid 在IE上加载速度慢, 150行数据就无法忍受了. firefox加载速度还可以. jquery easyui datagrid使用参考 http://www.cnblo ...

  6. jquery easyui datagrid使用参考

    jquery easyui datagrid使用参考   创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: 页面上 ...

  7. Easyui Datagrid扩展fixRownumber方法 转载

    $.extend($.fn.datagrid.methods, { fixRownumber : function (jq) { return jq.each(function () { var pa ...

  8. JQuery easyUI DataGrid 创建复杂列表头(译)

    » Create column groups in DataGrid The easyui DataGrid has ability to group columns, as the followin ...

  9. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(8)-MVC与EasyUI DataGrid 分页

    系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...

随机推荐

  1. nchar 和 nvarchar

    字符数据类型(nchar 长度固定,nvarchar 长度可变)和 Unicode 数据使用 UNICODE UCS-2 字符集. nchar [ ( n ) ] n 个字符的固定长度的 Unicod ...

  2. P137、面试题23:从上往下打印二叉树

    题目:从上往下打印出二叉树的每个结点,同一层的结点按照从左到右的顺序打印.例如输入如图的二叉树,则依次打印出8,6,10,5,7,9,11.(其实是按层遍历)二叉树结点的定义如下:struct Bin ...

  3. 精选7款绚丽的HTML5和jQuery图片动画特效

    在HTML5出现后,图片就变得更加富有动感了,各种图片动画特效也层出不穷,例如图片播放器.图片导航.3D图片动画等等.本文将精选几款具有代表性的HTML5和jQuery图片动画特效,绚丽的画面.实用的 ...

  4. 使用xilinx的documentation navigator快速查找资料

    2013-06-22 14:56:39 documentation navigator是xilinx的资料导航,是一个小插件,可以到xilinx的官网上下载,我的是Xilinx_DocNav_2013 ...

  5. HTTP协议 Servlet入门 Servlet工作原理和生命周期 Servlet细节 ServletConfig对象

    1 HTTP协议特点   1)客户端->服务端(请求request)有三部份     a)请求行--请求行用于描述客户端的请求方式.请求的资源名称,以及使用的HTTP协议版本号 请求行中的GET ...

  6. 在运行时切换 WinForm 程序的界面语言 System.ComponentModel.ComponentResourceManager .ApplyResources

    Download the code for this article: WinForm-Multilanguages-2.rar (11 KB). 方法二: 下面介绍一种只需对现有代码做较小改动的方法 ...

  7. LeetCode Maximum Depth of Binary Tree (求树的深度)

    题意:给一棵二叉树,求其深度. 思路:递归比较简洁,先求左子树深度,再求右子树深度,比较其结果,返回:max_one+1. /** * Definition for a binary tree nod ...

  8. ajax检测账户是否存在

    Register.cshtml <div title="账户"> 账户 <input type="text" name="Acc_a ...

  9. Explain 结果解读与实践

    Explain 结果解读与实践 基于 MySQL 5.0.67 ,存储引擎 MyISAM . 注:单独一行的"%%"及"`"表示分隔内容,就象分开“第一章”“第 ...

  10. 《深入Java虚拟机学习笔记》- 第15章 对象和数组

    1.针对对象的操作码 实例化一个新对象需要通过new操作码来实现. 对象的创建 操作码 操作数 说明 new index 在堆中创建一个新的对象,将其引用压入栈 new操作码后面紧跟一个无符号16位数 ...