下拉框搜索功能的实现。

首先我们先做一个下拉框

写入按钮触发事件,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);