时间戳

首页 > 技术文章 > CI 结合 vue.js 的搜索功能模块

CI 结合 vue.js 的搜索功能模块

liubaoqing 2017-06-06 18:53 原文

 

CI 结合 vue.js 的搜索功能模块

   最近在有优化公司后台的某个模块的搜索功能优化

　　　　原先的是这个样子的，很是单调：

 　　　　　　

　　　　

　　　　老大给我找个图希望我能弄成这样子：

　　

 

    经过不断修改，最后成了这样子

 

  是不是比以前好看了，虽然页面出了，单是功能却不是那么好做，我页面的请求是用ajax get 方式进行的，这里是vue 的前端页面

        <div class="row">
            <div class="col-sm-10 m-b-20">
                    <div class="col-sm-1" >
                       <input type="text" id="input_search" v-model="lid"  class="form-control" placeholder="线路ID"> 
                    </div>
                    <div class="col-sm-1" >
                       <input type="text" id="input_search" v-model="pname"  class="form-control" placeholder="供应商"> 
                    </div>
                    <div class="col-sm-3" >
                       <input type="text" id="input_search" v-model="title"  class="form-control" placeholder="线路名称"> 
                    </div>
                    <div class="col-sm-1" >
                       <input type="text" id="input_search" v-model="uid"  class="form-control" placeholder="发布人"> 
                    </div>
                    <div class="col-sm-2" >
                            <button class="btn btn-primary" @click="search">
                                    <i class="fa fa-search"></i><span class="half"></span>搜索
                            </button>
                            <a class="btn btn-success" id="addToTable" href="<?=site_url('?c=Line&m=add')?>">
                                <i class="fa fa-plus"></i>
                                <span class="half"></span>新增
                            </a>
                    </div>
            </div>

　　前端的js

search:function(){
                    var _seft = this;
                    //拼接cur
                    if(_seft.lid){ var lid = "&lid="+_seft.lid;           }else{  var lid = "&lid="+'';       }
                    if(_seft.pname){ var pname = "&pname="+_seft.pname;   }else{  var pname = "&pname="+'';   }
                    if(_seft.title){ var title = "&title="+_seft.title;   }else{  var title = "&title="+'';   }
                    if(_seft.uid){   var uid = "&uid="+_seft.uid;         }else{  var uid = "&uid="+'';       }
                    if(_seft.line_star){  var line_star = "&line_star="+_seft.line_star;         }
                    //拼接导航                    
                    var url = "<?=site_url('?c=Line&m=Apilists')?>"+lid+pname+title+uid+line_star;
                    _seft.showdata(url,1);
                },

 

这里是后端的逻辑代码

    public function Apilists(){
        $get = $this->input->get();
        $this->load->model('MemberModel','Member_model');
        //根据线路ID
        if(!empty($get['lid'])){
            $where = "lid like '%{$get['lid']}%' ";
        }

        //根据供应商
        if(!empty($get['pname']) && !empty($get['lid'])){
             $where =  $where." AND pname like '%{$get['pname']}%' ";
        }
        if(!empty($get['pname']) && empty($get['lid'])){
             $where =  " pname like '%{$get['pname']}%' ";
        }
        
        //根据标题
        if(!empty($get['title']) && !empty($get['pname'])){
             $where =  $where." AND mainname like '%{$get['title']}%' ";
        }

        if(!empty($get['title']) && empty($get['lid']) && empty($get['pname'])){
             $where =  " mainname like '%{$get['title']}%' ";
        }

        //根据发布人
        if(!empty($get['uid'])  && !empty($get['title'])) {
             $resu = $this->Member_model->GetinfoByname($get['uid']);
             $where =  $where." AND uid = '{$resu['uid']}' ";
        }

        if(!empty($get['uid']) && empty($get['lid']) && empty($get['pname']) && empty($get['title'])){
             $resu = $this->Member_model->GetinfoByname($get['uid']);
             $where =  " uid = '{$resu['uid']}' ";
        }

        if( $this->userinfo['username'] != 'admin' ){
            if(!empty($where)){
                 $where =  $where.' And uid = '.$this->userinfo['uid'];
             }else{
                 $where =  ' uid = '.$this->userinfo['uid'];
             }
        }

        //是否上线
        if($get['line_star']=='2' && !empty($get['title']) ){
             $where =  $where." AND status = '0' ";
        }
        if($get['line_star']=='1' && !empty($get['title']) ){
             $where =  $where." AND status = '1' ";
        }
        if($get['line_star']=='2' && empty($get['pname']) && empty($get['title'])){
             $where = " status = 0 ";
        }
        if($get['line_star']=='1' && empty($get['pname']) && empty($get['title'])){
             $where = " status = 1 ";
        }

        //如果没有条件就全部查询
        if(empty($get['lid']) && empty($get['pname']) && empty($get['title']) && empty($get['uid']) && $get['line_star']!='2' && $get['line_star']!='1' ){
            $where = "1 = 1";
        }
        //分页
        $page  = isset($get['page'])? $get['page']:1;
       
        $totalCount  = $this->Line_model->Count_by($where);
        $pagenums = 18;
        $data['pageCount'] =  ceil($totalCount/$pagenums);//总页数
        $lists = $this->Line_model->Limit( $pagenums,($page-1)*$pagenums )->order_by("addtime",'desc')->getlist_by($where);
        // var_dump($this->db->last_query());

        $data['lists'] = array();
        
        foreach ( $lists as $k => $v) {
            $data['lists'][$k]['lid']     = $v['lid'];
            $data['lists'][$k]['pname']   = $v['pname'];
            $data['lists'][$k]['title']   = $v['mainname'];
            $data['lists'][$k]['uid']     = $this->Member_model->GetNameByUid($v['uid'],'username');
            $data['lists'][$k]['typeid']  = $this->Linetype_model->TypeNameBytid($v['typeid']);
            $data['lists'][$k]['status']  = $v['status'];
            $data['lists'][$k]['market_price']  = $v['market_price'];
            $data['lists'][$k]['tui']     = biaoqian($v['tui']);
            $data['lists'][$k]['addtime'] = date("Y-m-d H:i:s",$v['addtime']);
        }
         
        $this->ajaxReturn($data);
    }

 

 这里想讨论一个问题就是结合搜索 ， 一样一样的搜索，那样不难 ，但是想在搜索ID 的同搜索 name 或者是 搜索title ，这种拼就麻烦了， 笔者这里就有搜索的条件有七八个，产生的搜索拼接 条件绝对有二三十种，或许不止，我这也没有什么好的办法，比较常用的给  写了下。

还有就是导航栏的active的跳转

    <div class="row">
            <div class="col-sm-6 m-b-20">
                <ul class="nav nav-tabs myUL">
                  <li role="presentation" class="active"><a href="#" @click="line_status(3)" >全部</a></li>
                  <li role="presentation" class=""><a href="#" @click="line_status(1)">已审核</a></li>
                  <li role="presentation" class=""><a href="#" @click="line_status(2)">审核中</a></li>
                </ul>

            </div>
        </div>
    //导航栏切换
    var oL=document.querySelectorAll('.myUL li');
    for(var i=0;i<oL.length;i++){
        oL[i].onclick=function () {
            for(var i=0;i<oL.length;i++){
                oL[i].removeAttribute('class','active');
            }
            this.setAttribute('class','active');
        }
    }

 

这里的时间花的也有点长，还是请教公司的前端才出来的，这里记录下。

QQ:1160643896    欢迎一起讨论，共同进步

 

推荐阅读