下拉框搜索功能的实现

下拉框搜索功能的实现。
首先我们先做一个下拉框

<div class="col-sm-4">
    <label class="col-md-4 control-label" for="">会员等级</label>
        <div class="col-md-6">
            <select id="selMiLevType" class="form-control">
                <option value="">不限</option>
                <option value="2">会员</option>
                <option value="3">尊享会员</option>
            </select>
        </div>
    <div class="col-md-2" style="text-align:right; padding-bottom:5px;">
        <button id="btnMiSearch" class="btn btn-pink" style="margin-right:15px;">搜索</button>
    </div>
</div>

写入按钮触发事件,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<CommonVo> lstResult = (List<CommonVo>) 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

<s:iterator value="mvoMessage.lstResult" var="item" status="st">
        <tr data-id="<s:property value='#item.id'/>"
            data-customerid="<s:property value='#item.customerId'/>">
            <td style="text-align:left;"><label class="pointer"><s:if test="mvoMessage.operateMode == 'show-checkbox'.toString()"><input type="checkbox" class="icheck" name="ckbMILClinicNumber" value='<s:property value="#item.id"/>' /></s:if><s:property value="#item.clinicNumber"/></label></td>
            <td class="col-memberType" data-value="<s:property value='#item.memberType'/>"></td>
        </tr>
    </s:iterator>

再添加上这句就完成了

$("#tblMemberInfoList .col-memberType").each(function(){
        var sValue = commonJs.renderValue($(this).data("value"), "memberType");
        $(this).text($(this).text() + sValue);