下拉框搜索功能的实现。
首先我们先做一个下拉框
会员等级
不限
会员
尊享会员
搜索
写入按钮触发事件,loadAjax方法事先已经封装好在pagingJs.js里面。
pagingJs.js：
var pagingJs = {};
pagingJs.loadAjax = function(options){
var defaults = {
type:'post',//post,get
url:'../ajax/list_ajax.jsp',
resultID:'listAjaxDiv',
cache:false,
data:{pageNum:1},
numID:'numEntries',//列表总条数的位置
//=============
result:'tr.result',
pageID:'Pagination',
loadingID:'Loading',
num_edge_entries: 1,
num_display_entries: 2,
items_per_page:1,
link_to:'javascript:void(0)',
prev_text:'上一页',
next_text:'下一页',
hasLoading:true,
hasJump:true,
isFirst:'0',
isReload:false,
lockID:'',
remarkID:'',
onComplete: function(){}
};
var opts = $.extend(defaults, options);
if(opts.isReload === true || opts.isReload === "true"){
var pageNum = $("#" + opts.pageID).data("page");
opts.data.pageNum = pageNum ? pageNum : "1";
}
opts.items_per_page = opts.data.limitNum;
if (opts.hasLoading) {
var height = $("#" + opts.loadingID).height();
$("#" + opts.loadingID).height(height);
$("#" + opts.resultID).html(pagingJs.loadingMask);
}
pagingJs.initPagination(opts);
if (opts.lockID != null && opts.lockID != '') {
try {
App.blockUI({
target: $('#' + opts.lockID)
,animate: true
,overlayColor: '#000'
});
} catch(e) {}
}
$.ajax({
type: opts.type,
url: opts.url,
data: opts.data,
cache: opts.cache,
complete: function() {
if (opts.hasLoading) { $('#LoadingDisplay').hide(); }
try { App.unblockUI($('#' + opts.lockID)); } catch(e) {}
if (opts.remarkID != null && opts.remarkID != '' && opts.numID != null && opts.numID != '') {
var iCount = parseInt($("#" + opts.numID).val());
if (iCount > 0) {
$("#" + opts.remarkID).show();
} else {
$("#" + opts.remarkID).hide();
}
}
},
success: function(cont) {
$("#" + opts.loadingID).height("auto");
$("#" + opts.resultID).html(cont);
$("#" + opts.pageID).data("page", opts.data.pageNum);
pagingJs.initPagination(opts);
opts.onComplete();
}
});
};
搜索按钮事件方法：
var memberInfo = {};
memberInfo.loadMemberInfo = function(){
pagingJs.loadAjax({
url: "customerAction_pageListMemberInfo"
,type: "POST"
,hasLoading:false
,data:{
pageNum: 1// 显示第几页
,limitNum: 10// 每页显示多少条
,"cvoParameter.memberType": $("#selMiLevType").val()
}
,resultID: "pageContent-info"// 列表内容显示的位置
,pageID: "pageIndex-info"// 分页显示位置
,numID: "pageTotalSize-memberInfo"
,lockID: "pageLock-memberInfo"
});
return false;
};
$("#btnMiSearch").click(memberInfo.loadMemberInfo);
customerAction的pageListMemberInfo方法：(CommonVo 和MessageVo 是建立通用对象)
/**
* 分页列出会员资料
*/
@IAccess(competenceNumber = { GlobalCache.UserRole.SPD }, returnFormat = GlobalCache.PAGE)
public String pageListMemberInfo() {
CommonVo cvoParams = getCvoParameter();
MessageVo mvoResult = funMember.pageListMemberInfo(cvoParams);
setMvoMessage(mvoResult);
return "member_info_list";
pageListMemberInfo();方法
/**
* 分页列出会员资料
* @param cvoParams
* @return
*/
@SuppressWarnings("unchecked")
public MessageVo pageListMemberInfo(CommonVo cvoParams) {
cvoParams.setUseState("1");
cvoParams.setOrderBy(" order by id desc ");
cvoParams.setMemberType(cvoParams.getMemberType());
String sCondition = "";
if (StringUtils.isEmpty(cvoParams.getMemberType())) {
sCondition += " and (member_type='2' or member_type='3') ";
}
cvoParams.setSql(sCondition);
MessageVo mvoResult = null;
if ("1".equals(cvoParams.getRemark())) {// 只显示我的客户
mvoResult = vdoHistoryCustomerInfo.getList(cvoParams);
} else {
mvoResult = vdoCustomerInfo.getList(cvoParams);
}
List lstResult = (List) mvoResult.getLstResult();
if (lstResult != null) {
for (CommonVo cvoRelative : lstResult) {
cvoRelative.setAgeUnit(CommonBean.getAgeByBirthday(cvoRelative.getBirthday(), 1)[2]);
}
}
return mvoResult;
}
getList();方法也是封装好的dao。
接下来就是返回页面return "member_info_list";
在strust.xml文件配置好返回页面member_info_list.jsp
data-customerid="">
再添加上这句就完成了
$("#tblMemberInfoList .col-memberType").each(function(){
var sValue = commonJs.renderValue($(this).data("value"), "memberType");
$(this).text($(this).text() + sValue);
