天天看點

EasyUI_Combobox輸入文本比對加載下拉框資料

效果如圖:

EasyUI_Combobox輸入文本比對加載下拉框資料

每次輸入資料去比對資料庫資料,加載到下拉框中。

邊輸入邊加載,通常我們想到的就是文本框的onChange事件,不過這裡用onchange,可以實作,但bug就太多了。

每次點選文本框,就會觸發datagrid的行單擊事件,且每次輸入儲存後也會觸發該事件,處理的東西很多。

改進,我用了loader屬性。

valueField: 'id',
 textField: 'text',
 url: "xx",
 mode: "remote", //定義文本改變時讀取資料,remote為遠端,使用者輸入的資料以參數名為q的資料請求到伺服器,
 queryParams: {          
    // test: "123"<span style="font-family: Arial, Helvetica, sans-serif;">//附帶查詢參數(開啟遠端預設傳遞q,就是輸入的内容)</span>
 },
 loader: ComboDataLoader, 
//過濾從遠端伺服器加載的資料
           

loader加載:

//Combobox過濾從遠端伺服器加載資料 param:傳遞的參數,
function ComboDataLoader(param, success, error) {
    //擷取combobox輸入的值
    var q = param.q;
    if (q == undefined || q == "" || q == null)
        return false;
    $.ajax({
        url: "/xxxx",
        type: "post",
        data: { searchTxt: q },
        dataType: "json",
        success: function (data) {
            //執行loader的success回調函數(裝載資料)
            success(data);
        },
        //異常處理
        error: function (xml, text, msg) {
            error.apply(this, arguments);
        }
    });
}
           

這樣處理就很友善,根據輸入的文本來比對下拉框的資料。