下拉列表框資料量過大解決方案

2021-10-08 13:08:37 字數 1625 閱讀 6396

當下拉列表,從後端獲取列表資料,資料量上萬條時,如果直接將查詢的結果渲染到前端頁面,效率是非常低的。我的解決方案是,每次從後端讀取100條資料(當然你可以自己限定每次查詢的條數),當使用者在列表框輸入資料進行篩選時,再通過模糊查詢從後端查詢100條資料,使用者輸的資料越精確,匹配度越高。下面是具體**:

1、如果前端**用easyui實現:

(1) html**

div中定義了乙個input輸入框以及span標籤

下拉框

(2)js**

傳送ajax非同步請求,載入下拉框資料,定義了param來傳引數,初始化引數值為空,傳送請求成功之後,通過eaysui將input輸入框建立為下拉框。textfield為下拉框文字字段,valuefield為下拉框值欄位,editable設定為true,使得下拉框可編輯,方便模糊查詢從後台檢索資料。然後設定了下拉框的寬度,以及下拉框面板的寬度。最後通過data屬性,將從後台查詢到的json資料集賦值到下拉框選項。後面是乙個onchange事件,當我們在下拉框字段值改變的時候就會觸發。

其中:onchange:function(v,o)v表示下拉框新值,o表示下拉框舊值。因此我將新值賦值給iname作為傳送請求的引數,也就是後台模糊查詢的條件資料。當onchange事件觸發時,就會再次傳送帶引數的ajax請求。然後通過 loaddata 方法,將從後台模糊查詢到的資料賦值給它,從而載入本地列表資料。

param:,

that.ajaxdeal("/getoptions",that.param,function(result)

$("#options").createcombobox(

$("#options").combobox('loaddata',result.data);

});}

});},null,false,"post");

2、如果前端**用vue+elementui實現

這是elementui實現的select選擇器,filterable表示資料是否可搜尋,filter-method表示搜尋時觸發的方法。

getlist方法用來獲取下拉框資料,query是請求引數,初始化呼叫時,query中的資料是為空的,但是當在下拉框中輸入了資料,

觸發搜尋方法searchbondbyname時,會將輸入框中的資料作為請求引數傳送到後台。從而將請求返回的資料再賦值給下拉框      繫結的資料,就可以立即生效。

methods: ).catch(error => );

});},

searchbondbyname:function(inputkey))

},}

3、後端**sql語句

控制層和服務層**無異,主要在sql語句中加了一條限制查詢行數的語句。然後因為'<'號跟xml 標籤衝突,所以需要轉義,

還可以通過 『<』 進行轉義。        

select t.o_code,t.b_name from tbnd t     

where and t.b_name like concat('%',concat(#,'%'))

and rownum 100

PHPExcel匯出資料量過大處理

今天使用phpexce外掛程式導不出資料,發現是資料量過大的原因,這裡只做簡單的處理。1 匯出超時處理 在執行頁面新增 set time limit 0 2 記憶體溢位 在執行頁面新增 ini set memory limit 1024m 簡單來說就是在執行頁面新增了以下兩行 set time li...

表單提交資料量過大導致資料丟失的問題

今天遇到乙個問題,通過post方式提交資料量過大,在後台接收不到資料,post沒有資料限制,檢視 發現確實是post提交,問題出在 了呢?通過檢視資料,發現tomcat預設傳輸最大的資料限制為2m,最後的解決辦法是設大tomcat的conf下的server.xml中8080connector的max...

表單提交資料量過大導致資料丟失的問題

今天有朋友遇到乙個問題,通過post方式提交資料量過大,在後台接收不到資料,當時第乙個感覺是get方式有資料限制,post沒有資料限制,可是檢視 發現確實是post提交,問題出在 了呢?通過檢視資料,發現tomcat預設傳輸最大的資料限制為2m,最後的解決辦法是設大tomcat的conf下的serv...