CI 结合 vue.js 的搜索功能模块
最近在有优化公司后台的某个模块的搜索功能优化
原先的是这个样子的,很是单调:
老大给我找个图希望我能弄成这样子:
经过不断修改,最后成了这样子
是不是比以前好看了,虽然页面出了,单是功能却不是那么好做,我页面的请求是用ajax get 方式进行的,这里是vue 的前端页面
前端的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 = " "+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的跳转
//导航栏切换 var oL=document.querySelectorAll('.myUL li'); for(var i=0;i
这里的时间花的也有点长,还是请教公司的前端才出来的,这里记录下。
QQ:1160643896 欢迎一起讨论,共同进步