1、插件部份
$.fn.extend({
searchBox:function (fields,url,conditions) {
conditions = conditions || {
'like':{name:'模糊(包含)'},
'notlike':{name:'模糊(不包含)'},
'eq':{name:'= 等于'},
'gt':{name:'> 大于'},
'egt':{name:'>= 大于等于'},
'lt':{name:'< 小于'},
'elt':{name:'<= 小于等于'},
'neq':{name:'<> 不等于'},
'between':{name:'在...之间'},
'notbetween':{name:'不在...之间'}
};
if(typeof(fields) == 'string') fields = JSON.parse(fields);
//console.log(fields);
if($.isEmptyObject(fields)) return;
var _this = this;
//创建普通查询表单
var params = $.searchObj();
params = params?params:{};
//console.log(params);
var form = document.createElement('form');
var pageDiv = document.createElement('div');
pageDiv.className = 'select-box inline mr-5';
var pageSel = document.createElement('select');
pageSel.name = 'numPerPage';
pageSel.className = 'select';
pageSel.options.add(new Option('15 条/页','15'));
pageSel.options.add(new Option('25 条/页','25'));
pageSel.options.add(new Option('50 条/页','50'));
pageSel.options.add(new Option('100 条/页','100'));
pageSel.options.add(new Option('500 条/页','500'));
pageDiv.appendChild(pageSel);
form.appendChild(pageDiv);
form.action = url;
$.each(fields,function (i,v) {
if(v.comm){
if(v.type === 'text'){
if(v.isdate){
var text = document.createTextNode(v.name);
form.appendChild(text);
var input_from = document.createElement('input');
input_from.className = 'input-text inline mr-5 Wdate';
input_from.name = 'date_from';
input_from.placeholder = '从';
input_from.value = params.date_from?params.date_from:'';
input_from.autocomplete = 'off';
input_from.onclick = function () {
WdatePicker();
};
form.appendChild(input_from);
var input_to = document.createElement('input');
input_to.className = 'input-text inline mr-5 Wdate';
input_to.name = 'date_to';
input_to.placeholder = '到';
input_to.value = params.date_to?params.date_to:'';
input_from.autocomplete = 'off';
input_to.onclick = function () {
WdatePicker();
};
form.appendChild(input_to);
}else{
var input = document.createElement('input');
input.className = 'input-text inline mr-5';
input.name = i;
input.value = params[i]?params[i]:'';
input.placeholder = v.name + (v.like?'(模糊)':'');
form.appendChild(input);
}
}
if(v.type === 'select'){
var list = v.list;
var selDiv = document.createElement('div');
selDiv.className = 'select-box inline mr-5';
var selectBox = document.createElement('select');
selectBox.className = 'select';
selectBox.name = i;
selectBox.value = params[i]?params[i]:'';
var selOption = '<option value="">'+v.name+'</option>';
$.each(list,function (key,val) {
if(params[i] && key === params[i]){
selOption += '<option value="'+key+'" selected>'+val+'</option>';
}else{
selOption += '<option value="'+key+'">'+val+'</option>';
}
});
selectBox.innerHTML = selOption;
selDiv.appendChild(selectBox);
form.appendChild(selDiv);
}
}
});
//搜索按钮
var btn = document.createElement('button');
btn.className = 'btn btn-success mr-5';
btn.innerHTML = '<i class="Hui-iconfont"></i> 搜索';
form.appendChild(btn);
//高级搜索按钮
var btn2 = document.createElement('button');
btn2.id = 'adv-btn';
btn2.type = 'button';
btn2.className = 'btn btn-primary';
btn2.innerHTML = '高级搜索';
form.appendChild(btn2);
$(this).html(form);//给当前元素添加表单
var searchHtml = '';
//高级搜索按钮
$(this).on('click','#adv-btn',function () {
$(this).triggerHandler('myclick');
});
//按钮绑定自定义事件
$('#adv-btn').on('myclick',function(){
searchHtml = $(_this).clone(true);
var form = document.createElement('form');
form.action = url;
form.appendChild(pageDiv);
//字段下拉列表
var div = document.createElement('div');
div.className = 'select-box inline mr-5';
var select = document.createElement('select');
select.id = 'field-name';
select.name="field_name";
select.className = 'select';
var option = '';
$.each(fields,function (i,v) {
if(!v.list){
if(params.field_name && i === params.field_name){
option += '<option value="'+i+'" data-isdate="'+(v.isdate?v.isdate:'false')+'" selected>'+v.name+'</option>';
}else{
option += '<option value="'+i+'" data-isdate="'+(v.isdate?v.isdate:'false')+'">'+v.name+'</option>';
}
}else{
var list = v.list;
var selDiv = document.createElement('div');
selDiv.className = 'select-box inline mr-5';
var selectBox = document.createElement('select');
selectBox.className = 'select';
selectBox.name = i;
selectBox.value = params[i]?params[i]:'';
var selOption = '<option value="">'+v.name+'</option>';
$.each(list,function (key,val) {
if(params[i] && key === params[i]){
selOption += '<option value="'+key+'" selected>'+val+'</option>';
}else{
selOption += '<option value="'+key+'">'+val+'</option>';
}
});
selectBox.innerHTML = selOption;
selDiv.appendChild(selectBox);
form.appendChild(selDiv);
}
});
select.innerHTML = option;
div.appendChild(select);
form.appendChild(div);
//条件下拉列表
var div2 = document.createElement('div');
div2.className = 'select-box inline mr-5';
var select2 = document.createElement('select');
select2.name = 'condition';
select2.className = 'select';
select2.id = 'condition-sel';
div2.appendChild(select2);
form.appendChild(div2);
var option2 = '';
$.each(conditions,function (i,v) {
if(params.condition && i === params.condition){
option2 += '<option value="'+i+'" data-dbl="'+v.dbl+'" selected>'+v.name+'</option>';
}else{
option2 += '<option value="'+i+'" data-dbl="'+v.dbl+'">'+v.name+'</option>';
}
});
select2.innerHTML = option2;
//高级搜索隐藏域
var hiddeInput = document.createElement('input');
hiddeInput.name = 'adv_search';
hiddeInput.type = 'hidden';
hiddeInput.value = params.adv_search?params.adv_search:'1';
form.appendChild(hiddeInput);
//条件输入框
var inputBox = document.createElement('input');
inputBox.name = 'val_one';
inputBox.value = params.val_one?params.val_one:'';
inputBox.autocomplete = 'off';
inputBox.className = 'input-text inline mr-5'+((params.field_name && fields[params.field_name].isdate)?' Wdate':'');
if(params.field_name && fields[params.field_name].isdate) {
inputBox.onclick = function (){
WdatePicker();
}
}
form.appendChild(inputBox);
//条件输入框2
var inputBox2 = document.createElement('input');
inputBox2.type = (params.condition && (params.condition).indexOf('between')!==-1)?'text':'hidden';
inputBox2.name = 'val_two';
inputBox2.value = params.val_two?params.val_two:'';
inputBox2.autocomplete = 'off';
inputBox2.className = 'input-text inline mr-5'+((params.field_name && fields[params.field_name].isdate)?' Wdate':'');
if(params.field_name && fields[params.field_name].isdate) {
inputBox2.onclick = function (){
WdatePicker();
}
}
form.appendChild(inputBox2);
//搜索按钮
var btn = document.createElement('button');
btn.className = 'btn btn-success mr-5';
btn.innerHTML = '<i class="Hui-iconfont"></i> 搜索';
form.appendChild(btn);
//在结果中搜索按钮
var btn2 = document.createElement('button');
btn2.id = 'result-btn';
btn2.type = 'button';
btn2.disabled = true;
btn2.className = 'btn btn-primary mr-5 disabled';
btn2.innerHTML = '在结果中搜索';
form.appendChild(btn2);
//切换普通搜索按钮
var btn3 = document.createElement('button');
btn3.type = 'button';
btn3.id = 'com-btn';
btn3.className = 'btn btn-secondary';
btn3.innerHTML = '普通搜索';
form.appendChild(btn3);
//替换当前元素为高级搜索表单内容
$(_this).html(form);
});
if(params.numPerPage){
$(_this).find('[name="numPerPage"]').val(params.numPerPage);
}
//当前是否为高级搜索，是则触发自定义事件
if(params.adv_search){
$('#adv-btn').triggerHandler('myclick');
var val_one = $(_this).find('[name="val_one"]').val();
if(val_one !== ''){
$('#result-btn').removeClass('disabled').attr('disabled',false);
}
}else{
$(this).on('change','[name="numPerPage"]',function () {
$(this).parents('form').submit();
});
}
//普通搜索按钮
$(this).on('click','#com-btn',function () {
//替换当前元素为普通搜索表单内容
$(_this).html(searchHtml);
//绑定WdatePicker，的onclick事件
$(_this).on('click','[name="date_from"],[name="date_to"]',function () {
WdatePicker();
});
});
//在结果中搜索按钮
$(this).on('click','#result-btn',function(){
//首先检查val_one的值是否为空
var params = $(this).parents('form').serialize();
location.href = url + '?' + params + '&result_search=1';
});
//条件选择改变
$(this).on('change','#condition-sel',function(){
var val = $(this).val();
if(val.indexOf('between') !== -1){
$(_this).find('[name="val_two"]').attr('type','text');
}else{
$(_this).find('[name="val_two"]').attr('type','hidden');
}
$(_this).find('[name="val_one"]').val('');
$(_this).find('[name="val_two"]').val('');
});
//选择字段改变
$(this).on('change','#field-name',function () {
var isdate = $(this).find('option:selected').data('isdate');
if(isdate){
$(_this).find('[name="val_one"]').addClass('Wdate').attr('onclick','WdatePicker()');
$(_this).find('[name="val_two"]').addClass('Wdate').attr('onclick','WdatePicker()');
}else{
$(_this).find('[name="val_one"]').removeClass('Wdate').attr('onclick','');
$(_this).find('[name="val_two"]').removeClass('Wdate').attr('onclick','');
}
$(_this).find('[name="val_one"]').val('');
$(_this).find('[name="val_two"]').val('');
});
}
});2、调用
$(function () {
$('#search-form').searchBox(searchFields,url);
});3、参数说明
searchFields,可以是JSON字符串，也可以javascript对象，格式如下：
searchFields = {
status:{name:'状态',type:'select',comm:true,list:{'1':'待确认','2':'已确认'}},
name:{name:'名称',type:'text',comm:true,like:true},
date:{name:'日期',type:'text',comm:true,isdate:true},
orderid:{name:'订单号',type:'text'},
};url,不带参数的url地址。
4、$.searchObj(),上面插件中用到
$.extend({
searchObj:function (search) {
var obj = null;
search = search || window.location.search;
if(search){
search = decodeURIComponent(search);
if(search.indexOf('?') !== -1) search = search.substring(1);
if(search){
obj = {};
$.each(search.split('&'),function (i,v) {
if(v){
var arr = v.split('=');
if(arr[0] && arr[1]!==undefined) obj[arr[0]] = arr[1];
}
});
}
}
return obj;
}
});5、服务器部分自行处理，可将上面的searchFields参数在服务器端应用，写一个基类方法以共用。