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,);
},
这里是后端的逻辑代码
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']=='' && !empty($get['title']) ){
$where = $where." AND status = '0' ";
}
if($get['line_star']=='' && !empty($get['title']) ){
$where = $where." AND status = '1' ";
}
if($get['line_star']=='' && empty($get['pname']) && empty($get['title'])){
$where = " status = 0 ";
}
if($get['line_star']=='' && 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']!='' && $get['line_star']!='' ){
$where = "1 = 1";
}
//分页
$page = isset($get['page'])? $get['page']:;
$totalCount = $this->Line_model->Count_by($where);
$pagenums = ;
$data['pageCount'] = ceil($totalCount/$pagenums);//总页数
$lists = $this->Line_model->Limit( $pagenums,($page-)*$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=;i<oL.length;i++){
oL[i].onclick=function () {
for(var i=;i<oL.length;i++){
oL[i].removeAttribute('class','active');
}
this.setAttribute('class','active');
}
}
这里的时间花的也有点长，还是请教公司的前端才出来的，这里记录下。
QQ:1160643896 欢迎一起讨论，共同进步