天天看點

select2 ajax 擷取資料并回顯

select2 ajax 請求資料

$(dom).select2({
            width: "100%",
            allowClear: true,
            ajax: {
                url: “/select2/info”,
                async: false,
                data: function (params) {
               // params {term: "aa", _type: "query"} params傳回搜尋的資料
                    var query = {
                        param: params.term
                    }
                    return query;
                },
                processResults: function (data) {
                // data 為請求位址傳回資料
                // 資料格式需要轉換為[{id:"", title:""}]
                    var newData = []
                    data.data.forEach(function (el) {
                        var obj = {
                            id: el.valueFieldItemCode,
                            title: el.valueFieldItemName
                        }
                        newData.push(obj)
                    })
                    return {
                        results: newData
                    };
                }
            },
            templateResult: function (item) {      
                return item.title
            },
            templateSelection: function (item) {
            // 選中顯示的資料
                return item.title
            },
        })
           

ajax 資料回顯 因為需要回顯時沒有進行初始化下拉框是沒有資料的,是以會出現選中為空的情況

// 可以使用傳統select擷取資料 拼接起來 
//将選中資料的id 放在數組中實作資料的回顯
$("select[name='" + echoDataVo.dataElementCode + "']").val([1]).trigger('change'); // 資料回顯 valArr 為數組  選中的id值
           
select2 ajax 擷取資料并回顯
select2 ajax 擷取資料并回顯

繼續閱讀