關於bootstrap-table從后台獲取數據的格式為json嵌套的處理方法


這段時間在做項目的時候用到了bootstrap-table的表格組件,使用的過程中遇到了一個問題,無法從后台獲取數據,只能通過 ajax獲取數據后再利用bootstrapTable的load方法手動添加。原因是后台返回的數據格式是一個json嵌套,和要求的格式不符,需要先通過 responseHandler 對數據進行處理,分頁設置為server 會對其有影響,無法加載數據

function queryParams() {
            var ConditionParam = $('.search_box').DABindingGetForm();
            var json = {
                SearchInfo: {
                    PageIndex: PageNumber,
                    PageSize: PageSize,
                    Sort: null,
                    ItemsCount: 0,
                    ConditionParam: ConditionParam
                }
            }
            return { con: JSON.stringify(json) }
        }
        function tableTest(col) {
            $('#test').bootstrapTable({
                method: 'post',
                contentType: "application/x-www-form-urlencoded",
                datatype: 'json',
                //toolbar: '#toolbar',    //工具按鈕用哪個容器
                striped: true,      //是否顯示行間隔色
                cache: false,      //是否使用緩存,默認為true,所以一般情況下需要設置一下這個屬性(*)
                pagination: true,     //是否顯示分頁(*)
                sortable: true,      //是否啟用排序
                sortOrder: "ID asc",     //排序方式
                pageNumber: 1,      //初始化加載第一頁,默認第一頁
                pageSize: 12,      //每頁的記錄行數(*)
                pageList: [20, 50, 100, 150],  //可供選擇的每頁的行數(*)
                url: "/CharterInnerProduct/CharterInnerProductBillListData",//這個接口需要處理bootstrap table傳遞的固定參數
                queryParamsType: '', //默認值為 'limit' ,在默認情況下 傳給服務端的參數為:offset,limit,sort
                // 設置為 '' 在這種情況下傳給服務器的參數為:pageSize,pageNumber

                queryParams: queryParams,//前端調用服務時,會默認傳遞上邊提到的參數,如果需要添加自定義參數,可以自定義一個函數返回請求參數
                sidePagination: "client",   //分頁方式:client客戶端分頁,server服務端分頁(*)
                //search: true, //是否顯示表格搜索,此搜索是客戶端搜索,不會進服務端,所以,個人感覺意義不大
                strictSearch: true,
                //showColumns: true, //是否顯示所有的列
                //showRefresh: true, //是否顯示刷新按鈕
                minimumCountColumns: 2,    //最少允許的列數
                clickToSelect: true,    //是否啟用點擊選中行
                searchOnEnterKey: true,
                search: true,
                responseHandler: function (res) {
                    console.log(res)
                    return eval(res.Item.ProductList)
                },
                columns: col,
                pagination: true
            });
            
        }

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM