javascript - easyui1.5 datagrid中分页显示不正常,求教各位
1、问题描述:在使用easyui1.5时,发现datagrid中如果使用toolbar,会导致datagrid中的分页控件显示不正常!向下走了几px,如图所示:
2、调试后的发现(2点):
一、datagrid的toolbar有2中实现方法,
并非2种实现都是出现以上问题,只有使用
二、只有调整下浏览器窗口大小(缩小一点或者放大一点),分页显示马上正常,ps:我觉得是不是初始化的时候高度没有计算准确~~
3、问题代码:
<code> <script> $(function(){ $('#category').datagrid({ url: '{:U("Category/getList")}', border: false, toolbar: '#tbar', fit: true, columns:[[ {field:'id',checkbox:true}, {field:'sort',title:'排序',width:100}, {field:'name',title:'栏目名称',width:100}, {field:'create_time',title:'创建时间',width:100}, ]], pagination: true, fitColumns: true, rownumbers: true, data: [ { "id": 1, "sort": 1, "name": "助力海东", "create_time": "2016-08-15 15:13:87" }, { "id": 2, "sort": 2, "name": "助力海东", "create_time": "2016-08-15 15:13:87" } ] }); }); </script> <table id="category"></table> <div id="tbar" style="padding: 5px;"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">新增</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a> </div> </code>
求求各位大神如果有同样问题,救救小弟,谢谢
回复内容:
1、问题描述:在使用easyui1.5时,发现datagrid中如果使用toolbar,会导致datagrid中的分页控件显示不正常!向下走了几px,如图所示:
2、调试后的发现(2点):
一、datagrid的toolbar有2中实现方法,
并非2种实现都是出现以上问题,只有使用
二、只有调整下浏览器窗口大小(缩小一点或者放大一点),分页显示马上正常,ps:我觉得是不是初始化的时候高度没有计算准确~~
3、问题代码:
<code> <script> $(function(){ $('#category').datagrid({ url: '{:U("Category/getList")}', border: false, toolbar: '#tbar', fit: true, columns:[[ {field:'id',checkbox:true}, {field:'sort',title:'排序',width:100}, {field:'name',title:'栏目名称',width:100}, {field:'create_time',title:'创建时间',width:100}, ]], pagination: true, fitColumns: true, rownumbers: true, data: [ { "id": 1, "sort": 1, "name": "助力海东", "create_time": "2016-08-15 15:13:87" }, { "id": 2, "sort": 2, "name": "助力海东", "create_time": "2016-08-15 15:13:87" } ] }); }); </script> <table id="category"></table> <div id="tbar" style="padding: 5px;"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">新增</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a> </div> </code>
求求各位大神如果有同样问题,救救小弟,谢谢
1.你就用js数组来写吧,就没问题了。
2.原来也遇到过不少初次不正常只要改变窗口就显示正常的情况,原因我猜测是这样的:easyui初次会获取窗体高度,然后把页面渲染上去,然而你把toolbar写在下面之后他认为没有那段高度自然等toolbar显示出来了则分页就会下去一部分。可以加上height属性试试看
<code> height : $('#**').height()-**, pagination : true, </code>

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

在网页中使用本地安装的字体文件最近,我从网上下载了一种免费字体,并成功将其安装到了我的系统中。现在...

在元素个数不固定的情况下如何通过CSS选择第一个指定类名的子元素在处理HTML结构时,常常会遇到元素个数不�...

H5页面需要持续维护,这是因为代码漏洞、浏览器兼容性、性能优化、安全更新和用户体验提升等因素。有效维护的方法包括建立完善的测试体系、使用版本控制工具、定期监控页面性能、收集用户反馈和制定维护计划。

在PHP8 中,match表达式是一种新的控制结构,用于根据表达式的值返回不同的结果。1)它类似于switch语句,但返回值而非执行语句块。2)match表达式使用严格比较(===),提升了安全性。3)它避免了switch语句中可能的break遗漏问题,增强了代码的简洁性和可读性。

PHP中的...(splat)操作符用于函数参数和数组解包,提升代码简洁性和效率。1)函数参数解包:将数组元素作为参数传递给函数。2)数组解包:将一个数组解包到另一个数组中或作为函数参数。

H5(HTML5)适合应用于轻量级应用,如营销活动页面、产品展示页面和企业宣传微网站。它优势在于跨平台性和丰富的交互性,但局限性在于复杂的交互和动画、本地资源访问和离线功能。
