CI 结合 vue.js 的搜索功能模块
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 欢迎一起讨论,共同进步
CI 结合 vue.js 的搜索功能模块的更多相关文章
- 使用vue实现自定义搜索功能
实现效果如:http://www.ligerui.com/demos/filter/filter.htm 代码: <%@ Page Language="C#" AutoEve ...
- vue自动完成搜索功能的数据请求处理
在现在的互联网世界里,自动完成的搜索功能是一个很常见的功能.比如百度.搜狗.360搜索 ... 功能描述一下大概是这个样子的:有一个搜索框,用户在里面输入要查询的条件,系统会“智能”判断用户输完了,然 ...
- vue.js实现购物车功能
购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...
- 一周一个小demo — vue.js实现备忘录功能
这个vue实现备忘录的功能demo是K在github上找到的,K觉得这是一个用来对vue.js入门的一个非常简单的demo,所以拿在这里共享一下. (尊重他人劳动成果,从小事做起~ demo原git ...
- 用vue.js实现购物车功能
购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...
- Vue.js实现登录功能
编写html,通过vue-resource.js库向后台提交数据 <!DOCTYPE html> <html lang="en"> <head> ...
- Vue.js实现注册功能
编写html,通过vue-resource.js库向后台提交数据 <!DOCTYPE html> <html lang="en"> <head> ...
- 用vue实现百度搜索功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue.js如何根据后台返回来的图片url进行图片下载
最近在做一个前端vue.js对接的功能模块时,需要实现一个下载图片的功能,后台返回来的是一串图片url,试了很多种方法,发现点击下载时出来的效果都是跳着到一个新的图片网页,后来经过一番琢磨,终于解决了 ...
随机推荐
- pdf文件之itextpdf插入html内容以及中文解决方案
简述 目前网上已经有很多种html文件直接转pdf的技术帖子,但是很少有直接将部分html作为段落插入到pdf中,而且也没有一个可以很好的解决中文显示的问题. 因此今天上午围绕这个问题进行了研究,把解 ...
- win32SDK的hello,world程序(二)
接上篇,原生的控件都不太好看,所以决定自己画一个,稍微处理下消息就能用了.不过,美化这东西是需要天赋的.即使技术再好,没有对UI布局调整和良好的审美能力,做出来的东西还是很挫. 主要把消息逻辑和画的过 ...
- VB6之阴影图层
要是能创建半透明的刷子就好了,就不必像这样以图层的方式实现透明阴影效果. 代码: 'code by lichmama@cnblogs.com '绘制阴影图层 Private Declare Funct ...
- SpringMvc多视图配置(jsp、velocity、freemarker) velocity在springmvc.xml配置VelocityViewResolver,VelocityConfigurer,FreeMarkerConfigurer,FreeMarkerViewResolver
?xml version="1.0"encoding="UTF-8"?> <beans xmlns="http://www.springf ...
- MyBatis基础
一.大配置 <?xml version="1.0" encoding="UTF-8" ?> <!--文档类型,头文件--> <!D ...
- 【hibernate初探】之接口说明,session使用
hibernate作为一个完整的ORM映射框架,通过配置即可以让我们从复杂的JDBC操作中脱离出来.hibernate封装了 JDBC,JTA(java transaction API) 和JNDI. ...
- 说声PHP的setter&getter(魔术)方法,你们辛苦了
php作为快速迭代项目的语言,其牛逼性质自不必多说.今天咱们要来说说php语言几个魔术方法,当然了,主要以setter&getter方法为主. 首先,咱们得知道什么叫魔术方法? 官方定义为:_ ...
- mac重开电脑后显示重装提示解决办法
情况描述: mac昨天电脑关闭后 第二天打开电脑就显示语言选择安装语言 解决办法: 1 出现语言安装提示界面 我们选择简体中文 2 出现苹果密码登陆 我们选择下面的按钮点击退出 这样就可 ...
- jvm学习002 虚拟机类加载过程以及主动引用和被动引用
虚拟机把描述类的数据从class文件加载到内存,并对数据进行校验,转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这就是虚拟机的类加载机制. 类从被加载到虚拟机内存中开始,到卸载出内存为 ...
- 列表的系列操作(python)
除了定义和切片外,这里总结下系列的操作: # hanbb come on! names = ["hbb",'tian','bao','cheng'] #Add names.appe ...