关于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