Easyui 让DataGrid适应浏览器宽度
2016-02-22 12:57
519 查看
DataGrid有100%宽度的设置,但是有时不是很让人满意,比如你你放大或者拉放你的浏览器,那么DataGrid只维持第一次加载的宽高,非常难看
你看到$(window).width() - 10和$(window).height() - 35
这是我设置的页面第一次载入,去后去窗体的宽度和高度进行计算,那么在第一次载入显示是正常的,但是放大或者拉伸浏览器,datagrid将不做改变了,我们这是要用到一个jquery的方法,叫resize()
fn:在每一个匹配元素的resize事件中绑定的处理函数。
看到浏览器变化时候激发的事件,所以我们要加入:
好了,我们来做一个对比(第一载入的时候)
缩小浏览器的时候
完美显示
$('#List').datagrid({ url: '/SysSample/GetList', width: $(window).width() - 10, methord: 'post', height: $(window).height() - 35, fitColumns: true, .................................
你看到$(window).width() - 10和$(window).height() - 35
这是我设置的页面第一次载入,去后去窗体的宽度和高度进行计算,那么在第一次载入显示是正常的,但是放大或者拉伸浏览器,datagrid将不做改变了,我们这是要用到一个jquery的方法,叫resize()
参数
fnFunctionV1.0
在每一个匹配元素的resize事件中绑定的处理函数。[data],fnString,FunctionV1.4.3
data:resize([Data], fn) 可传入data供函数fn处理。fn:在每一个匹配元素的resize事件中绑定的处理函数。
看到浏览器变化时候激发的事件,所以我们要加入:
!--自动DataGrid 从第一次加载与重置窗体大小时候发生的事件:分部视图--> <script type="text/javascript"> $(function () { $(window).resize(function () { $('#List').datagrid('resize', { width: $(window).width() - 10, height: $(window).height() - 35 }).datagrid('resize', { width: $(window).width() - 10, height: $(window).height() - 35 }); }); }); </script>
好了,我们来做一个对比(第一载入的时候)
缩小浏览器的时候
完美显示
相关文章推荐
- UITableView编辑单元格多个按钮(4)
- 《深入理解SPARK:核心思想与源码分析》——SparkContext的初始化(仲篇)——SparkUI、环境变量及调度
- collectionview resueview 重影的问题
- 20.UIImageView之内容模式(contentMode)
- iOS - UIButton(UIEdgeInsets)/设置button上的文字和图片上下垂直居中对齐
- NGUI UILabel计算文字行数
- 19.UIImage之渲染模式(renderingMode)
- Spark官方文档《Spark Programming Guide》解读
- 本地推送UILocalNotification
- UITableViewCell高度自适应
- Java基础之continue, break, return
- 18.UIImage选择正确的加载方式
- 方法的可变长参数 传入参数个数不确定可用(Type ... values)
- htmlparser解决PKIX path building failed问题的两种方法
- UItableView的使用(1)
- KVM查看虚拟机的分区内容(4)
- Arduino: L293D for a DC motor
- java基础-StringBuild、StringBuffer及List、Map、Set
- [综合]visio2013安装提示找不到Office.zh_cn\officeMUI.mis officemui.xml
- KVM克隆虚拟机和libguestfs-tools管理工具(3)