php laravel 多条件筛选

效果如图,点击的条件出现在已选择的地方,点击已选择的条件可以删除当前点击的条件  语言是php 框架是laravel。

一、html

<div class="doctor-condition" id="doctor-condition">
    <dl>
        <dt>已选择</dt>
        <dd id="condition-checked" class="condition-checked"><span id="select-no">尚未选择</span></dd>
    </dl>
    <dl>
        <dt>按门诊科室</dt>
        <dd>
            <ul class="cate">
                @foreach($area as $item)
                <li>{{$item->clinic_name}}</li>
                @endforeach
            </ul>
            <ul class="depart" id="condition-depart">
                @foreach($area as $item)
                <li style="display: none;">
                    @foreach($departs as $depart)
                        @if($depart->area_id == $item->id)
                            {{--{{url('doctorsList?dp='.$depart->id)}}--}}
                    <a href="{{url('doctorsList?dp='.$depart->id)}}" data-id="{{$depart->id}}">{{$depart->depart_name}}</a>
                        @endif
                    @endforeach
                </li>
                @endforeach
            </ul>
        </dd>
    </dl>
    <dl>
        <dt>按职称</dt>
        <dd id="condition-position">
            @foreach($title as $item)
            <a href="{{url('doctorsList?pr='.$item->id)}}" data-id="{{$item->id}}">{{$item->title_name}}</a>
            @endforeach
        </dd>
    </dl>
</div>

二、js

//初始化选中科室
function selectedDepart(dp){
    if(dp){
        $("#select-no").html("");
        var depart = $("#condition-depart li>a[data-id="+dp+"]");
        depart.addClass("selected").siblings().removeClass("selected");
        var copyThisA = "<a id='selectA' οnclick='conditionRemoveA($(this))'><span>"+depart.text()+"</span><i class='iconfont'>&#xe644;</i></a>";
        if($("#selectA").length > 0) {
            $("#selectA span").html(depart.text());
        } else {
            $("#condition-checked").prepend(copyThisA);
        }
    }
}
//初始化选中职称
function selectedPr(pr){
   if(pr){
        $("#select-no").html("");
        var title = $("#condition-position a[data-id="+pr+"]");
        title.addClass("selected").siblings().removeClass("selected");
        var copyThisB = "<a id='selectB' οnclick='conditionRemoveB($(this))'><span>"+title.text()+"</span><i class='iconfont'>&#xe644;</i></a>";
        if($("#selectB").length > 0) {
            $("#selectB span").html(title.text());
        } else {
            $("#condition-checked").append(copyThisB);
        }
   }
}
//筛选参数
function getQueryString(){
    var result = location.search.match(new RegExp("[\?\&][^\?\&]+=[^\?\&]+","g"));
    if(result == null){
        return "";
    }
    for(var i = 0; i < result.length; i++){
        result[i] = result[i].substring(1);
    }
    return result;
}
//重新定义url
function goSort(name,value,that) {
    var string_array = getQueryString();
    var oldUrl = document.URL;
    var newUrl;
    if (string_array.length > 0)//如果已经有筛选条件
    {
        var repeatField = false;
        for (var i = 0; i < string_array.length; i++) {
            if (!(string_array[i].indexOf(name) == -1)) {
                repeatField = true;//如果有重复筛选条件,替换条件值
                newUrl = oldUrl.replace(string_array[i], name + "=" + value);
            }
        }
        // 如果没有重复的筛选字段
        if (repeatField == false) {
            newUrl = oldUrl + "&" + name + "=" + value;
        }
    }
    if (string_array.length == false) {
        newUrl = document.URL + "?" + name + "=" + value;
    }
    that.attr('href', newUrl);
}
//删除筛选
function deleteSort(name,that){
    var string_array = getQueryString();
    var oldUrl = document.URL;
    var newUrl = oldUrl.split('?')[0];
    var len = string_array.length;
    var reg=new RegExp(name);
    if(len > 0){
       for (var i=0;i<len;i++){
            if(string_array[i].match(reg)){
                string_array.pop(string_array[i]);
         }
      }
   }
   if(string_array.length>0){
       newUrl = newUrl+'?'+string_array[0]
   }
   that.attr('href',newUrl);
}
$(document).ready(function() {
    //初始化
    $("#doctor-condition .cate li:first").addClass('cur');
    $("#condition-depart li:first").show().siblings().hide();
   $("#doctor-condition .cate li").hover(function() {
      $(this).addClass("cur").siblings().removeClass("cur");
      $("#doctor-condition .depart li").eq($(this).index()).show().siblings().hide();
   });
   $("#condition-depart a").click(function() {
      $("#select-no").html("");
      $(this).addClass("selected").siblings().removeClass("selected");
      var copyThisA = "<a id='selectA' οnclick='conditionRemoveA($(this))'><span>"+$(this).text()+"</span><i class='iconfont'>&#xe644;</i></a>";
      if($("#selectA").length > 0) {
         $("#selectA span").html($(this).text());
      } else {
         $("#condition-checked").prepend(copyThisA);
      }
      //筛选
        var value = $(this).attr('data-id');
        var name = 'dp';
        goSort(name,value,$(this));
   });
   $("#condition-position a").click(function() {
      $("#select-no").html("");
      $(this).addClass("selected").siblings().removeClass("selected");
      var copyThisB = "<a id='selectB' οnclick='conditionRemoveB($(this))'><span>"+$(this).text()+"</span><i class='iconfont'>&#xe644;</i></a>";
      if($("#selectB").length > 0) {
         $("#selectB span").html($(this).text());
      } else {
         $("#condition-checked").append(copyThisB);
      }
        //筛选
        var value = $(this).attr('data-id');
        var name = 'pr';
        goSort(name,value,$(this));
   });
});
function conditionRemoveA(ele){
   ele.remove();
   $("#condition-depart a.selected").removeClass('selected');
   if($("#condition-checked a").length==0){
      $("#condition-checked #select-no").html("尚未选择");
   }
   //删除链接中的dp参数并重定向
    deleteSort('dp',ele);
}
function conditionRemoveB(ele){
   ele.remove();
   $("#condition-position a.selected").removeClass('selected');
   if($("#condition-checked a").length==0){
      $("#condition-checked #select-no").html("尚未选择");
   }
    //删除链接中的pr参数并重定向
    deleteSort('pr',ele);
}

三、php laravel

//医生列表
public function doctorsList(Request $request){
    $depart_id = $request['dp'];//科室
    $title_id = $request['pr'];//职称
    $keyWord = $request['kw'];//搜索医生姓名或擅长
    $area = dpyy_area::where('is_clinic','1')->orderBy('sort','asc')->get();//片区
    $departs = dpyy_department::orderBy('area_id','asc')->get();//科室
    $title = index_title::orderBy('sort','asc')->get();//职称
    //筛选医生
    if($keyWord){
       $doctor = index_doctors::where('doc_name','like','%'.$keyWord.'%')->orWhere('doc_good','like','%'.$keyWord.'%')->orderBy(DB::raw('RAND()'))->paginate(9);
    }else{
        $query = new index_doctors();
        if($depart_id){
            $query = $query->where('depart_id',$depart_id);
        }
        if($title_id){
            $query = $query->where('title_id',$title_id);
        }
        $doctor = $query->orderBy(DB::raw('RAND()'))->paginate(9);
    }

    return view('home.doctor.list',compact('area','title','doctor','departs','depart_id','title_id','keyWord'));
}

JS参考文章地址:https://blog.csdn.net/qq_39780174/article/details/79456817

转载于:https://my.oschina.net/lylyg/blog/3021792

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值