1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
|
define(function(require,exports,module){
"require:nomunge,exports:nomunge,module:nomunge";
/*********************searchConfig的说明和格式DEMO******************/
/*
* 变量 searchConfig 是页面中配置的；
*
* data.key 说明 [*必须]
* 内容：如果是"merchant_id"，则跳转的url里是 "merchant_id=xxxxxx"这种格式；
*
* data.type 说明 [*必须]
* 内容:input/tab/month/day/select/checkbox
* input ：比如用户的ID搜索
* tab ：比如状态的筛选（全部/正常/禁用）
* month ：月份的筛选
* checkbox：筛选的checkbox
*
* data.location 说明 [*必须]
* 格式："#keyword"或".class-name" 其中"#"代表id名；"."代表是class名;(推荐使用ID，如果使用class，请保证当前页面class唯一)
* 如果是input类型 ，写input的id/class;
* 如果是tab类型 ，请写"filter-select"上面的的id/class;
* 如果是month类型 ，请写隐藏input的ID,一般是 "#month-picker" ;
* 如果是checkbox类型，请写当前input标签上的id/class;
*
* data.form [非必须]
* 格式：如果是month类型，通过这个参数 可以限制的最小开始月份,默认从"2017-06"开始
*
* 如果是用 month 这个类型，需要在页面引入下面这个样式；
<link href="http://a.f265.com//module/month-picker/css/month-picker.css" rel="stylesheet" type="text/css">
*
* 如果用data 这个类型，需要在页面引入下面这个样式；
<link href="http://a.f265.com/module/daterangepicker/css/daterangepicker.css" rel="stylesheet" type="text/css" />
* */
//TODO:演示DEMO；
/*
var searchConfig={
"url" :"/orchard/distributors",//跳转的URL 如/orchard/distributors 或 /orchard/distributors?id=111111
"searchBtn" :"#search", //触发 搜索 的按钮
"resetBtn" :"#reset", //触发 初始化 的按钮
"data":[
{
"key" :"merchant_id",
"type" :"input",//input/tab/month/checkbox/date
"location" :"#keyword"
},
{
"key" :"status",
"type" :"tab",//input/tab/month/checkbox/date
"location" :"#card_status"
},
{
"key" :"is_good",
"type" :"checkbox",//input/tab/month/checkbox/date
"location" :"#is_good_store"
},
{
"key" :"month",
"type" :"month",//input/tab/month/checkbox/date
"location" :"#month-picker",
"form" :"2016-11"
},
{
"key" :"start_date",
"type" :"date",//input/tab/month/checkbox/date
"location" :"#custom-date"//开始日期就是这个input的value值；
}
]
};
*/
/******************************正文开始*******************************/
var MonthPicker,Daterangepicker;
var $body=$("#bodyer");
var pageSearch={};
//计算搜索的默认值
function computerDefaultVal($el,type) {
switch(type) {
case "input":
return $el.val();
case "tab":
return $el.find("li").filter(".active").find("a").data("state");
case "month":
return $el.val();
break;
case "date":
return $el.val();
break;
case "checkbox":
return $el.is(":checked") ? 1 : 0 ;
default:
console.info("searchConfig中有非法的type："+type+"，请检查是否拼写错误。对应元素是",$el[0]);
return "this_value_is_undefined";
}
}
//根据类型，生成不同的事件；
function creatEventBaseType(tempItem) {
switch(tempItem.type) {
case "input":
return function () {
$body.on("keypress",tempItem.location,function(e){
e = e || window.event;
if (e.keyCode==13){
tempItem.varName = $(this).val();
pageSearch.searchModule()
}
});
$body.on("blur",tempItem.location,function(e){
tempItem.varName = $(this).val();
});
};
case "tab":
return function () {
$body.on("click",tempItem.location+" .filter-item",function(e){
e.preventDefault();
tempItem.varName=$(this).find("a").data("state");
pageSearch.searchModule();
});
};
case "month":
return function () {
MonthPicker = require("month-picker");
var monthPicker = new MonthPicker({
el: tempItem.location,
from: tempItem.form||"2017-06",
to: true,
onSelect: function () {
tempItem.varName = this.value;
pageSearch.searchModule();
}
});
};
case "date":
return function () {
Daterangepicker = require("daterangepicker");
var isSingle=true;
var daterange = new Daterangepicker(tempItem.location, {
"autoUpdateInput": false,
singleDatePicker: isSingle,
showDropdowns: true,
"locale": {
"format": 'YYYY-MM-DD',
"customRangeLabel": "Custom",
"firstDay": 0
}
}, function (start, end, label) {
var starDate=start.format('YYYY-MM-DD');
// var endDate=end.format('YYYY-MM-DD');
// this.element.val(starDate + " 至 " + endDate);
this.element.val(starDate);
tempItem.varName = starDate;
pageSearch.searchModule();
});
};
case "checkbox":
return function () {
$body.on("change",tempItem.location,function(e){
tempItem.varName=$(this).is(":checked") ? 1 : 0 ;
pageSearch.searchModule();
});
};
default:
return function () {
console.warn("searchConfig中有非法的type:"+tempItem.type+" 导致了匹配事件失败");
};
}
}
pageSearch.init=function () {
this.search();
};
pageSearch.search=function () {
var self=this;
//触发搜索
if(searchConfig.searchBtn){
$body.on("click",searchConfig.searchBtn,function(e){
e.preventDefault();
self.searchModule();
});
}
//reset
if(searchConfig.resetBtn){
$body.on("click", searchConfig.resetBtn, function () {
window.location.href = searchConfig.url;
});
}
};
pageSearch.searchModule=function(){
var tempSearchStr="";
$.each(searchConfig.data,function (index, val) {
var $this=$(this);
var modifier;
//如果url为/orchard/distributors?distributor_id=688189193821626368 这种详情内的搜索；符号全为&;
if(searchConfig.url.indexOf("?") > 0){
modifier="&";
}else{
modifier=(index==0)?"?":"&";
}
tempSearchStr+=modifier+$this[0].key+"="+$this[0].varName;
});
window.location.href = searchConfig.url + tempSearchStr;
};
//赋值默认的搜索数据；
var searchLen=searchConfig.data.length;
for (var i=0;i<searchLen;i++){
var tempItem=searchConfig.data[i];
if(!tempItem.key){
console.error("页面上searchConfig 配置出错，有一个元素没有配置key，位置是searchConfig.data的第 "+i +" 项。");
return;
}
tempItem.varName=computerDefaultVal($body.find(tempItem.location),tempItem.type);//默认值储存在对象的varName中；
//生成事件
pageSearch["creatEvent_"+tempItem.key]=creatEventBaseType(tempItem);
pageSearch["creatEvent_"+tempItem.key]();//类似pageSearch.init()的功能
}
pageSearch.init();
});
|
