为easyUI的dataGrid添加自己的查询框
来源:互联网 发布:照片转换视频软件 编辑:程序博客网 时间:2024/05/22 10:50
dataGrid作为easyUI的一个核心组件,其功能上是很强大的。
但是外观上似乎就有点差强人意了,首先说一下我对dataGrid外观的2点感受
1、图标不好看,且尺寸很小(16x16)—— 关于这个,可以点这里看另一篇blog解决
2、高度问题,如果分页只有8-10条的话,且toolbar只放16x16的图标,那么整个高度只有差不多300px最多
这次的改写主要也就是解决这么两个问题
下面主要是为dataGrid添加一个多条件的查询框,先看一下最终的效果:
图1
图2
做点简单的介绍:
这里将查询分为了基本查询和高级查询,也就是常用查询和不常用查询。可以看到,查询条件还是比较多的。
如果把所有条件都显示出来,条件太多会把人眼睛看晕。。。
所以把不常用的查询先不显示到页面上,当用户需要用的时候,再通过左侧的下拉箭头点出来,此时箭头变成了上拉。
之后再点击上拉箭头隐藏高级查询框时,选中的条件则会显示在dataGrid里,并且可以通过x来删去
使用方法:在页面load完之后加入$("#repair_dropBtn").dropForm();注册一下就OK,repair_dropBtn替换成你要注册的那个下拉按钮的ID
$(function(){// 注册下拉事件$("#repair_dropBtn").dropForm();});
134 0
- 为easyUI的dataGrid添加自己的查询框
- easyui的datagrid的带条件查询
- easyui在datagrid的toolbar中添加下拉框combobox
- easyui datagrid 数据的显示和查询
- 实现easyui的datagrid导出为excel
- 实现easyui的datagrid导出为excel
- 实现easyui的datagrid导出为excel
- easyui的datagrid导出为excel
- 实现easyui的datagrid导出为excel
- easyUI的datagrid,当后台查询结果为空,不执行OnLoadSuccess方法的解决
- hibernate左连接查询时在easyUI的dataGrid中有些行取值为空的解决办法
- 初学EasyUI datagrid:如何用datagrid进行数据的查询
- 使用easyUI添加查询功能在datagrid
- easyui datagrid添加搜索框
- easyUI的datagrid每行数据添加操作按钮的方法
- easyUI的datagrid每行数据添加操作按钮的方法
- 如何在easyui的DataGrid的单元格添加ProgressBar进度条
- easyUI的datagrid每行数据添加操作按钮的方法
- iOS 动态地使用StoryBoard中的ViewController
- 每日一记
- IoC 与DI-----java
- JSON初接触
- C++程序将串口或USB数据输入计算机
- 为easyUI的dataGrid添加自己的查询框
- JSP中获取jstl中的数据
- js 模拟类,调用
- HDU 4324 Triangle LOVE
- hibernate一级缓存,二级缓存和查询缓存
- 酷派7295a官方底包优化刷机包 加入root权限省电稳定
- Metasploits Git更新
- ok6410 学习1-----关于ads VIC_MODE定义
- 1071: 数据结构作业01 -- 一元多项式的求积