下拉框搜索功能的实现

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

<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);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,024评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,198评论 4 61
  • 莫笑农家腊酒浑 小疼就是这样过份,非要把乡人的好客推向极致推向荒诞。这大概与他饥饿的青春有关,他原是江都小纪人,其...
    御风者cx阅读 387评论 0 1
  • 读经: 《出埃及记》第10章。 经文: 摩西说:“我们要和我们老的少的、儿子女儿同去,且把羊群牛群一同带去,因为我...
    君自尔出阅读 6,470评论 0 3
  • 丰盈之心 我会富裕 也会贫穷 我会腾达 也会潦倒 可我的内心 都能 聆听风之歌声 看见云之舞蹈 欣赏月之羞涩 遥望...
    陈言著诗随云飞阅读 387评论 2 3