当前位置:首页 > 开发 > Web前端 > Jquery > 正文

Jquery easyui之datagird查询框扩展

发表于: 2012-03-29   作者:bozch   来源:转载   浏览次数:
摘要: 今天整理一下,本人对jquery easyui中的datagrid查询框的扩展的思路。 1、首先、在进行扩展的时候查询框封装的是一个表单,此表单中需要包含jquery eaysui的自定义的表单,如combobox、datebox、datetimebox等等。那么就需要定义一系列的jquery easyui的表单组件数组。在看过easyui源码之后,发现在datagrid中已经定义了这么一个数

今天整理一下,本人对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>&nbsp;"+endConfig.label+"&nbsp;</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 easyui之datagird查询框扩展

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
1、动态创建datagrid   在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一
index.jsp 页面 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <
扩展自 $.fn.datebox.defaults。用 $.fn.datetimebox.defaults 重写了 defaults。 依赖 datebox tim
jQuery EasyUI 对话框(Dialog)用法与EasyUI的窗口用法极为相似,最终的效果图也只与窗口的效果图差
扩展jquery easyui datagrid编辑单元格 1.随便聊聊   这段时间由于工作上的业务需求,对jquery eas
项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程。tab控件又没有
JQuery EasyUi之界面设计——前言与界面效果(一) 如果冯巩的开场白是“观众朋友们,我想死你们了
初识Jquery EasyUI看了一些博主用其开发出来的项目,页面很炫,感觉功能挺强大,效果也挺不错,最近
一、说明: JQuery EasyUI下载地址:http://jquery-easyui.wikidot.com/download,最新版本1.2.2。
Jquery EasyUI 一、easyui的datagrid列表实现 Form: <form name="queryForm" id="queryForm" ac
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号