boostrap table接收到后台返回的数据格式不一致

程序员文章站 2022-07-12 16:00:50

...

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap-table</title>
<link rel="stylesheet" href="./bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="./bootstrap-3.3.7/plugin/bootstrap-table/bootstrap-table.min.css" />
<script src="./assets/js/jquery-2.1.4.min.js"></script>
<script src="./bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<script src="./bootstrap-3.3.7/plugin/bootstrap-table/bootstrap-table.min.js"></script>
<script src="./bootstrap-3.3.7/plugin/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {
//加载grid-方法1：load
initGrid1();

//方法2：data:[]
initGrid2();

//方法3：responseHandler 转换后台返回的数据格式      url
initGrid3();
});
function initGrid2(){
$.ajax({
                type:"GET",
                url:'http://localhost:8080/x/ommon/findDept?dept_id=34',
                contentType:'application/json;charset=utf-8',
                dataType:'json',
                success:function (res) {
                    $('#dg2').bootstrapTable({
       striped: true,    //设置为 true 会有隔行变色效果
       cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
       smartDisplay: false,    //程序自动判断显示分页信息
       dataType:'json',
       idField:'id',
       columns: [{
       field:'id',
       checkbox:true
       },{
           title: '序号',
           align: 'center',
           halign: 'center',
           formatter: function (value, row, index) {
             return index + 1;
           }
       }, {
           field: 'dept_name',
           title: '服务名',
           align: 'center'
       }]
       ,data: res.datas
       });

                },
                    error:function(error){
                        console.log(error);
                    }
            });
}

function initGrid1(){
var tableData=[{'name':'a22','sum':100,'PV':999}];
$('#dg').bootstrapTable({
// pagination: true,   //启动分页
striped: true,    //设置为 true 会有隔行变色效果
// uniqueId:'name',
cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
// pageSize: 20,//初始页记录数
//sortable: true,    //排序
// pageList: [10,20], //记录数可选列表
smartDisplay: false,    //程序自动判断显示分页信息
dataType:'json',
idField:'id',
columns: [{
field:'id',
checkbox:true
},{
    title: '序号',
    align: 'center',
    halign: 'center',
    formatter: function (value, row, index) {
      return index + 1;
    }
}, {
    field: 'name',
    title: '服务名',
    align: 'center'
    //sortable:true    //排序
}]
//,data: tableData
});

$('#dg').bootstrapTable('load',[{name:'233',id:100}]);

$("#dg").bootstrapTable('append', {name:'234',id:101});

$("#dg").bootstrapTable('prepend', {name:'231'});
/*
var ids = [];//定义一个数组
ids.push('231');//将要删除的id存入数组
$("#dg").bootstrapTable('remove', {field: 'name', values: ids});

//$("#dg").bootstrapTable('removeAll');

$('#dg').bootstrapTable('updateRow', {index: 0, row: {name:'236'}});

var opt={url:'http://localhost:8080/anger/listType'};
$("#dg").bootstrapTable('refresh',opt);
*/
}

function getSelect(){
var selrows=$("#dg").bootstrapTable('getSelections');
alert(selrows[0].name);

if(selrows.length>1){
alert(selrows[1].name);
}
}

function ajaxQuery(params){                    //使用ajax请求
            $.ajax({
                type:"POST",
                url:'http://localhost:8080/x/ommon/findDept?dept_id=346',
                contentType:'application/json;charset=utf-8',
                dataType:'json',
                success:function (res) {
                    console.log(res);
                   /* params.success({ //注意，必须返回参数 params
            total: res.datas.length,
            rows: res.datas
        });*/

        $('#table').bootstrapTable({
            columns:[{
field:'dept_id',
checkbox:true
}, {
    field: 'dept_name',
    title: '服务名',
    align: 'center'
}]    ,
                    data: res.datas
                });

                 // $('#table').bootstrapTable('load', {rows:res.datas,total:2});
                 // $('#dg').bootstrapTable('load', [{dept_name:'23'}]);
                    //$('#dg2').bootstrapTable('refresh', {url:'http://localhost:8080/x/ommon/findDept?dept_id=12'});
                },
                    error:function(error){
                        console.log(error);
                    }
            })
        }

function successCallback(data) {
alert(3);
}

function initGrid3(){
$('#dg3').bootstrapTable({
        url : "http://localhost:8080/x/ommon/findDept?dept_id=346",
method:'get',
responseHandler: function(res) { //转换数据格式
                return {
                    "total": res.datas.length,//总页数
                    "rows": res.datas   //数据
                 };
            },
//toolbar:'#toolbar',
singleSelect:true,
cache: false,
clickToSelect:true,
sidePagination: "server",
//sortName: "create_time",
//sortOrder: "desc",
pageSize: 15,
pageNumber: 1,
pageList: "[10, 25, 50, 100]",
showToggle: true,
showRefresh: true,
showColumns: true,
search: true,
pagination: true,
columns: [{
field: "dept_id",
checkbox:true,
},{
field: 'dept_name',
title: '推荐位名称',
switchable: true
},{
field: 'create_time',
title: '创建时间',
switchable: true,
sortable: true
}]
});

$('#dg3').bootstrapTable('load',{total:1,rows:[{dept_name:'abc'}]});
}
</script>
</head>
<body>
<div class="panel panel-default">
    <div class="panel-body">我是一个基础面板，带有默认主题样式风格</div>
</div>

<h5>带有头和尾的面板</h5>
<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-body">
    <table id="dg" class="table table-bordered table-striped dataTable" data-toggle="dg" >
    <thead>
                <tr role="row">
                <th class="" style="">序号</th>
                <th class="" style="">服务名</th>
                </tr>
                </thead>
                <tbody>
</tbody>
    </table>
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-body">
    <table id="dg2" data-toggle="dg2" class="table table-bordered table-striped dataTable" >
<thead style="background:#efefef;">
<tr>
<th data-checkbox="true"></th>
<th data-field="dept_id">ID</th>
<th data-field="dept_name">Name</th>
</tr>
</thead>
</table>
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-body">
    <table id="dg3" class="table table-bordered table-striped dataTable">

</table>
    </div>
</div>

<button type="button" class="btn btn-default" onclick="getSelect()">选中</button>

</body>
</html>