下拉框搜索功能的实现

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

<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);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 221,273评论 6 515
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,349评论 3 398
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 167,709评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,520评论 1 296
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,515评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,158评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,755评论 3 421
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,660评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,203评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,287评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,427评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,122评论 5 349
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,801评论 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,272评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,393评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,808评论 3 376
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,440评论 2 359

推荐阅读更多精彩内容

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