1. 程式人生 > >JQ實現網站多條件篩選顯示(下)

JQ實現網站多條件篩選顯示(下)

 <div class="shuaixuan_list">
     <ul>
         <li class="shuaixuan_tiaojian">申請執行人:</li>
         <li class="bb"><a href="CaseList.aspx" class="space executor2">不限</a></li>
         <li class="bb"><a href="CaseList.aspx?executor=0" onclick=" return GetRequest(this);" class="executor0">公司</a></li>
         <li class="bb"><a href="CaseList.aspx?executor=1" onclick=" return GetRequest(this)" class="executor1">個人</a></li>
         </ul>
 </div>
   <div class="shuaixuan_list">
      <ul>
         <li class="shuaixuan_tiaojian">被執行人:</li>
         <li class="bb"><a href="CaseList.aspx" class="  space enforced2">不限</a></li>
         <li class="bb"><a href="CaseList.aspx?enforced=0" onclick=" return GetRequest(this)" class="enforced0">公司</a></li>
         <li class="bb"><a href="CaseList.aspx?enforced=1" onclick="return GetRequest(this)" class="enforced1">個人</a></li>
         </ul>
   </div>

  <script>
        theRequest = new Object();
        str_Request = new Object();
        //獲取當前URL中的引數
        $(function () {
            var URL = window.location.search;
            if (URL.indexOf("?") != -1) {
                var str = URL.substr(1);
                strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    str_Request[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                }
            }
            else { }
            if(Object.keys(str_Request).length>0)
            {
                //處理新增選中樣式
                for(var i in str_Request) //遍歷集合中鍵值對
                {
                    
                    if(i=="executor")
                    {
                        $(".shuaixuan_list li .executor"+str_Request[i]+" ").addClass("xuanzhong");
                    }
                    if(i=="enforced")
                    {
                        $(".shuaixuan_list li .enforced"+str_Request[i]+" ").addClass("xuanzhong");
                    }
                    else
                    {  
                        $(".shuaixuan_list li .space ").addClass("xuanzhong");//給預設的值新增樣式
                        for(var i in str_Request)
                        {
                            $(".shuaixuan_list li ."+i+"2").removeClass("xuanzhong");//去掉集合中存在的預設值選中樣式
                        }
                    }
                    
                }
            }
            else
            {
                $(".shuaixuan_list li .space ").addClass("xuanzhong");//給預設的值新增樣式
            }
        })
        function GetRequest(date) {
            var url = date.search; //獲取url中"?"符後的字串  
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                }
                var baseUrl = 'CaseList.aspx';
                const obj =$.extend(Object(str_Request), Object(theRequest));
                const finalUrl = `${baseUrl}?${encodeSearchParams(obj)}`;
                window.location.href=finalUrl;
                return false;
            }
            else { }
        }
    </script>

根據上一篇進行開發:JQ實現網站多條件篩選顯示

相關推薦

JQ實現網站條件篩選顯示

<div class="shuaixuan_list"> <ul> <li class="shuaixuan_tiaojian">申請執行人:</li> <li class=

條件篩選搜尋仿招聘網站效果

程式碼地址:https://github.com/yuedongxu/mutiselect-search 演示地址:https://yuedongxu.github.io/mutiselect-sea

Android常見條件篩選選單美團、58

1.簡單實現 1.1佈局分析:   自定義ListPopuScreenMenuView 繼承自 LinearLayout,大致分為三個部分:上面頭部TabLinearLayout;中間的選單內容menuContainerFrameLayout;下面的半透

基於JSON+JQuery實現條件篩選功能(類似京東和淘寶功能)

/**  * Author:mengbing  *   * Date:2017-12-08  * http://www.allenyMiky.com  *   */ (function ($) {     //初始化繫結事件     $(function () {             });     $.

ssm框架實現圖片上傳並顯示myeclips

ssm框架實現圖片上傳並顯示 第一步:匯入common-io以及common-fileupload兩個jar包,儘量新一點,老的有可能出錯 第二步:配置圖片上傳儲存的位置,針對myeclips來說,開啟檔案D:\Java\MyEclipse.metadata.me_tcat\co

使用 BootstrapTable 實現資料的分頁顯示

根據 AJAX 的思想,先將需要展示的樣式表現出來,然後,編輯展示頁面實現後臺資料的展示。 編輯類方法,實現action定義 --》 編輯XML配置檔案,實現頁面跳轉 --》編輯 JSP 檔案,實現背景部分的展示,編輯並 url ,指定動態資料的獲取 action name

【資料結構與演算法-java實現】二 複雜度分析:最好、最壞、平均、均攤時間複雜度的概念

上一篇文章學習了:如何分析、統計演算法的執行效率和資源消耗? 點選連結檢視上一篇文章:複雜度分析上 今天的文章學習以下內容: 最好情況時間複雜度 最壞情況時間複雜度 平均情況時間複雜度 均攤時間複雜度 1、最好與最壞情況時間複雜度 我們首先

Java實現幾種常見排序方法 .

 插入排序的工作原理是通過構建有序序列,對於未排序資料,在已排序序列中從後向前掃描,找到相應位置並插入。其具體步驟參見程式碼及註釋。 [java] view plaincopyprint? /**  * 插入排序<br/>  * <ul> 

nginxif條件結合判斷實現限速

limit_req use div pos test urn 客戶端 rst spi 參考文章: https://yq.aliyun.com/articles/44957 需求: 要對某一ip下,使用android客戶端的用戶進行限速 原理 就是用SET變量進行。 AND

php條件篩選功能的實現

例如 表單篩選核心函式 function Filter(a, b) { var $ = function(e) { return document.getElementById(e); } var ipts = $('filterFo

checkBox篩選條件類似淘寶條件篩選 css js html vue

需求:糾紛要素多選,選中--樣式變化進行標註,若未選要素,點選計算,提示使用者---請選擇要素(類似淘寶,京東的多條件篩選) 如圖: html程式碼: 引用了vue,使用vue的v-for遍歷 css程式碼: /*display: inline  div邊框隨文

python實現mysql條件查詢篩選功能

目的:實現app列表篩選。 一、思路 原本是Java專案做的,感覺有些複雜,相反,Python程式碼較為簡潔,改用Python實現。 要想實現篩選,就要想辦法如何動態根據請求的條件寫sql語句,第一步要考慮的是如何更好的封裝請求到後臺,以便於根據條件動態的拼接s

Vue.js實現條件篩選、搜尋、排序及分頁的表格功能

與上篇實踐教程一樣,在這篇文章中,我將繼續從一種常見的功能——表格入手,展示Vue.js中的一些優雅特性。同時也將對filter功能與computed屬性進行對比,說明各自的適用場景,也為vue2.0版本中即將刪除的部分filter功能做準備。 需求分析 還是先從需求入手,想想實現這樣一個功能需要注意

ThingWorx裡面實現條件過濾查詢巨麻煩

1. getFactortyListCopy方法裡面實現方法(思路是往分廠裡面新增一條“全部分廠”資料,方便以後全部查詢) var params = { infoTableName : "InfoTable", dataShapeNa

條件篩選實現

<?php $conditions = array('price','color','metal'); //要進行篩選的欄位放在這裡 $price = $color = $metal=''; //先給需要篩選的欄位賦空值,這些值將輸出到頁面的hidden fileds中 //以下迴圈給已經

MySQL中根據if標籤實現條件模糊查詢動態SQL語句

 if標籤  if標籤可用在許多型別的sql語句中,我們以查詢為例。首先看一個很普通的查詢: Xml程式碼   <!-- 查詢學生list,like姓名 -->   <select id="getStudentListLikeName" pa

仿京東商城實現 條件篩選

京東商城效果圖: 自己實現的效果圖: 實現程式碼如下: CSS程式碼: *{             border:0;       padding:0;       margin:0;       

JavaScript練習——仿京東商城實現 條件篩選

京東商城效果圖: 自己實現的效果圖: 實現程式碼如下: CSS程式碼: *{ border:0; padding:0; margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12px

TP框架中條件篩選

bsp family span pid 條件 uid type 宋體 spa $pid =I(‘pid‘); $year = I(‘year‘); $productType = I(‘productType‘);

用 Spring Boot 實現電商系統 Web API 創建模塊項目

ble jin play 正常 ota autowired ips 功能 bind 大型項目,需要將代碼按不同功能,分成不同模塊,這樣比較好管理和閱讀代碼,也有助於多人協作。 一、項目結構 1.1 模塊說明 項目分成5個模塊,分別如下: 模塊名稱 說明 webapi