- 浏览: 455553 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (106)
- jquery easyui (20)
- spring学习 (4)
- 心情 (1)
- jsp (3)
- javascript (7)
- 异常 (4)
- tomcat (7)
- win7 (1)
- struts2 (2)
- WEB开发 (9)
- 数据库sqlserver (3)
- flex (3)
- java开发工具 (5)
- web服务器 (3)
- html (5)
- struts (1)
- coffeeScrip (0)
- css (1)
- Jquery Mobile (1)
- jquery (5)
- spring (0)
- 数据库 (2)
- freemarker (0)
- hibernate (1)
- spring mvc (2)
- java jdbc (1)
- office (1)
- java类常用方法积累 (2)
- web service (1)
- 项目管理 (0)
- 缓存技术 (0)
- CI (0)
- BPM (1)
- 系统 (2)
- java (2)
- 天天读文章 (1)
- exception (0)
- 网站 (1)
- management (0)
- apache工具类 (1)
- laravel (1)
- .net (1)
- nginx (1)
- electron (1)
- react-native (0)
- eclipse (1)
- gitlab (1)
- ios (1)
- redis (1)
最新评论
-
carl_java:
可否告知具体如何解决。目前使用jredis访问twemprox ...
jedis通过twemproxy无法使用pipeline -
jveqi:
...
jedis通过twemproxy无法使用pipeline -
jinhailion:
也有此问题,版本号50.0.2661.12,有解决方案吗
Web浏览器Chrome打开一段时间后,运行alert无效 -
纵观全局:
easyui-accordion 里面的数据怎么清空啊
jquery easyui学习教程-accordion -
hourui93:
非常感谢,问题解决了~~~
electron加载带有jquery的web page出现$,jQuery无法识别
今天整理一下,本人对jquery easyui中的datagrid查询框的扩展的思路。
1、首先、在进行扩展的时候查询框封装的是一个表单,此表单中需要包含jquery eaysui的自定义的表单,如combobox、datebox、datetimebox等等。那么就需要定义一系列的jquery easyui的表单组件数组。在看过easyui源码之后,发现在datagrid中已经定义了这么一个数组,存储了大部分的表单组件,即为editors。不错哦,这个就用上啦!
2、接着、就要考虑如何扩展查询框这个属性啦,这很简单,只要在定义datagrid的时候,多添加一个属性就好了,此处我定义了searchbar,是一个数组。这个数组定义的方式和可编辑表格中的editor类似。可以参考可编辑表格的实例。
{
type:'text',
name: 'Names',
label:'人员姓名'
}
其中、type即为表单组件的类型,上面定义的是文本框。具体有那些类型可以参考editors。当然需要的话可以自己扩展(如可以定义一个又开始和结束时间的查询控件)。
为了以后能够对其进行扩展,在searchbar中定义了另一个属性forms来存储查询表单中的内容。
3、第三个问题来了,我们进行查询的时候,会遇到分页查询的问题。这要求我们在每次进行查询的时候,能够在每次查询的时候把查询参数也一起传到后台,怎样才能实现呢?细心的你也许已经发现,在datagrid中,提供了queryParams这个参数。这个在我的 Jquery easyui之控件参数传递(http://bozch.iteye.com/blog/1465951)中提到过。他能够在每次查询的时候将已定义的参数传递到相应的URL地址。我们在单击查询按钮的时候,需要调用datagrid的方法,将表单查询参数集成到queryParams当中,然后传递到URL中,这就是load方法。这将为我们扩展searchbar提供了便利。
4、有了上面几点作为支持,实现查询框的功能已经不在话下了。但是还有一个样式问题,当时这个问题让我很是纠结(当初样式学的很烂,嘻嘻)。这个问题就是如何让查询框能够上下对齐而且自动换行,在这之前就是如何将这些查询组件组装到已有的datagrid中。下面将代码奉上(不知道咋滴,不能用可编辑器插入代码,直接就糊上来啦):
首先是样式:
/* 添加查询框 */
.datagrid-searchbar{
clear:both;
float:left;
margin-bottom:5px;
}
.datagrid-searchform {float: left;width: 260px;margin:0;padding:0;}
.datagrid-searchform dl {float: left;width: 260px;line-height: 25px;color: #565656;margin:0;padding:0;margin-top:6px;}
.datagrid-searchform dd {float: left;width: 100px;text-align: right;margin:0;padding:0;}
.datagrid-searchform dt {float: left;width: 160px;margin:0;padding:0;}
.datagrid-searchform2 {float: left;width: 446px;margin:0;padding:0;}
.datagrid-searchform2 dl {float: left;width: 446px;line-height: 25px;color: #565656;margin:0;padding:0;margin-top:6px;}
.datagrid-searchform2 dd {float: left;width: 113px;text-align: right;margin:0;padding:0;}
.datagrid-searchform2 dt {float: left;width: 333px;margin:0;padding:0;}
.datagrid-searchbar a.l-btn{margin-right:20px;float:right;margin-top:5px;}
下面是js代码,分两部分 :
第一部分是来控制datagrid高度的代码,这是由于扩展的searchbar要占用一定的高度。放置代码的具体位置是在wrap.children("div.datagrid-toolbar").outerHeight(true)后面再减去wrap.children("div.datagrid-searchbar").outerHeight(true)即可。
第二部分既是对searchbar的扩展,找到$("div.datagrid-pager",_3ae).remove();然后在前面加上如下代码:
//TODO add the searchbar
$("div.datagrid-searchbar",_3ae).remove();//和pager,toolbar一样,先清理一下。
if(opts.searchbar){//看看是不是已经定义了searchbar
var formId = opts.searchbar.formId;//为了能够便捷的对查询表单的操作,给查询表单定义了id
var form = $("<div></div>");
if(formId && $.trim(formId) != ""){
form.attr("id",formId);
}
var tb=$("<div class=\"datagrid-searchbar\"></div>").prependTo(_3ae);
var forms = opts.searchbar.forms;//已定义的查询表单内容
//save all editors for get the editor value;
var searchEditors = [];//这是用来存储所有表单控件相关属性的,为了能够最后统一获取查询表单值
form.appendTo(tb);
if(forms){
//show form with specific style
for(var i=0;i<forms.length;i++){
var searform = forms[i];
var type = searform.type;
if(type == "start_end"){//自己另外给定义了时间开始结束的类型,即比editors又多了一种。
var div = $("<div class=\"datagrid-searchform2\"></div>");
var dl = null;
var dt = $("<dt></dt>");
if(searform.options){
var startConfig = searform.options[0];
var endConfig = searform.options[1];
var startEditor = opts.editors[startConfig.type];//开始控件
var endEditor = opts.editors[endConfig.type];//结束控件
dl = $("<dl><dd>"+startConfig.label+":</dd></dl>");
if(startEditor && endEditor){
var se = startEditor.init(dt,startConfig.options).attr("name",startConfig.name);
if(startConfig.id && $.trim(startConfig.id) != ""){
se.attr("id",startConfig.id);
}
$("<span> "+endConfig.label+" </span>").appendTo(dt);
var ee = endEditor.init(dt,endConfig.options).attr("name",endConfig.name);
if(endConfig.id && $.trim(endConfig.id) != ""){
ee.attr("id",endConfig.id);
}
searchEditors.push({action:startEditor,target:se,name:startConfig.name});
searchEditors.push({action:endEditor,target:ee,name:endConfig.name});
}
}
dt.appendTo(dl);
dl.appendTo(div);
div.appendTo(form);
}else{
var name = searform.name;
var id = searform.id;
var label = searform.label;
var editor=opts.editors[type];
var div = $("<div class=\"datagrid-searchform\"></div>");
var dl = $("<dl><dd>"+label+":</dd></dl>");
var dt = $("<dt></dt>");
if(editor){
var e = editor.init(dt,searform.options).attr("name",name);
if(id && $.trim(id) != ""){
e.attr("id",id);
}
searchEditors.push({action:editor,target:e,name:name});
}
dt.appendTo(dl);
dl.appendTo(div);
div.appendTo(form);
}
}
var submitButton = $("<a href=\"javascript:void(0)\" style=\"\">查询</a>");
var submitArea = $("<div class=\"datagrid-searchform\" align=\"center\"></div>");
//get the value in the search form
function getSearchValue(){
var search_query_data = {};
for(var i=0;i<searchEditors.length;i++){
var getEditor = searchEditors[i];
var action = getEditor.action;
var target = getEditor.target;
var name = getEditor.name;
var val = action.getValue(target);
if(val&&val != ""){
$.data(search_query_data,name,val);//将所有的查询表单的值封装到search_query_data中。
}
}
return search_query_data;
}
submitButton.linkbutton({plain:false,iconCls:'icon-search'}).click(function(){
if(form.form('validate')){//如果有表单验证
opts.onSearcBefore.call(_3ae,getSearchValue());//定义了一个查询时间,后来发现在treegrid中能用上
$(_3ad).datagrid("load",getSearchValue());
}
});
submitButton.appendTo(form);
}
}
上述扩展代码稍微有点乱。如有更好的建议,留言大家一起讨论。
/*http://www.jeestudio.com 版权所有,转载请说明出处*/
发表评论
-
jquery半透明设置
2012-08-21 16:29 2756function setOpacity(eles){ ... -
Jquery easyui模拟浏览器前进后退查看历史浏览网页
2012-07-31 11:25 2481/** * 打开窗口的简化 */function easyui ... -
Jquery easyui支持验证多种类型
2012-06-20 14:26 12707<!--StartFragment --> ... -
jquery easyui学习教程-accordion
2012-05-08 10:05 24304jquery easyui中的accordion一般用来做分组 ... -
jquery easyui表单重置(reset)扩展思路
2012-04-27 08:59 16056在jquery easyui表单中 尚未提供表单重置的功能,这 ... -
jquery easyui之accordion
2012-04-23 11:23 1110accordion: 使用场景: 属性: ... -
easyui tree数据无法加载
2012-04-13 14:39 1736首先,确保url能够返回json数据。 其次,保证json数 ... -
jquery easyui入门教程(二)
2012-04-14 17:06 12740今天讲解一下,jquery eas ... -
Jquery easyui分页栏,显示1到0解决方案
2012-04-12 10:25 2587针对jquery easyui 1.2.2 找到 ... -
jquery easyui入门教程(二)
2012-04-12 09:02 03、在使用Jquery easyui进行开发 ... -
Jquery easyui中numberbox在precision为零时禁止输入“点”
2012-04-05 17:36 8492针对jquery easyui中numberbox,在pr ... -
Jquery easyui的combobox的默认“请选择”“全部”扩展
2012-03-31 14:48 20260扩展版本1.2.2: 1、首先在<input type ... -
jquery easyui的datagrid中toolbar类似extjs的工具栏靠右浮动
2012-03-29 21:58 9092直接上代码: if(opts.toolbar){ v ... -
Jquery easyui之控件参数传递
2012-03-28 10:14 12918在使用jquery easyui的时候,如果数据是从服务器端加 ... -
Jquery easyui界面单击过快js错误之临时解决方案
2012-03-14 16:19 1975在使用jquery easyui的做系统应用的时候,如果界面单 ... -
Jquery easyui表单的异步验证
2012-03-12 13:16 12966在使用jquery easyui的时候,很多实用要用到异步验证 ... -
Jquery easyui入门教程(一)
2012-04-12 09:01 8320到现在为止,已经使用Jquery Easyui有一年了,在使用 ... -
Jquery easyui窗口window打开与关闭问题探讨
2012-03-08 17:32 0今晚就研究这个。。。。。 -
Jquery easyui Form表单提交注意事项
2011-11-11 15:26 25727jquery easyui对表单的提交进行了封装,提交的方式采 ... -
jquery easyui 将combobox 设为只读方法
2011-10-27 12:59 8857在jquery easyui.1.2.2中 并没有提供相应的m ...
相关推荐
jquery EasyUI的API,方便使用easyui查看。。。。。。
jqueryEasyUI 下载,及api下载 jqueryEasyUI 下载,及api下载
jquery easyui 帮助文档 非常好用的
jquery easyui demo 网页下载下来打包了,还有datagrid简要说明
jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档...
jquery easyui+layer后台框架,界面美观,兼容所有浏览器
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
Jquery EasyUI 页面框架Demo,共4个
使用Jquery EasyUI制作的日历,单击input控件弹出日历选择日期,代码很简单,仅供参考
jQuery EasyUI EasyUI 组件范例
jQuery EasyUI 1.4.3 API 中文 jQuery EasyUI 1.4.3 API jQuery EasyUI 1.4.3 API
资源名称:Jquery easyui 使用说明内容简介:Jquery easyui 使用说明 中文PDF版主要讲述的是Jquery easyui 使用说明;感兴趣的朋友可以过来看看。jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的...
jQuery EasyUI 1 4版本更新内容: Bug(修复) menu:修复在删除一个菜单项的时候该菜单无法正确自适应高度的问题; datagrid:修复在datagrid宽度太小的时候“fitColumns”方法无法正常工作的问题 Improvement...
1. 该框架的开发环境为EclipseJEE集成开发工具。... 前台展示页面使用了JQuery EasyUI的布局、列表和消息组件。 6. 系统实现了较为完善的用户模块,对用户数据实现了增、删、改、查、分页等的功能。
jQuery EasyUI 1.5.1文档 jQuery EasyUI 1.5.1文档 jQuery EasyUI 1.5.1文档
jQuery EasyUI 1.4.2 版 API 中文版手册
jQuery EasyUI 1.5API 中文版文档 最新版jQuery easy ui
ssm框架+jquery easyui案例
jquery easyui图标拓展
jQuery EasyUI中文参考手册.chm