bootstrap-table (jquery 插件)

来源：互联网发布：汉诺塔递归算法python 编辑：程序博客网时间：2024/05/29 19:32

使用前提

页面引入bootstrap-table.js

bootstrap-table.min.css

html页面

<div style=""><table id="tradeList" ></table>

inittableing=function(tableData){$('#tradeList').bootstrapTable({    url: ContextPath + urls.getPlatoonList,         //请求后台的URL（*）    method: 'post',                      //请求方式（*）    toolbar: '#toolbar',                //工具按钮用哪个容器    toolbarAlign:'center',    contentType:"application/x-www-form-urlencoded; charset=UTF-8",//这个一定要写，要不然后台接不到传递的参数    striped: true,                        //是否显示行间隔色                      cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）    pagination: true,                   //是否显示分页（*）//    paginationPreText:'<',//    paginationNextText:'>',    sortable: true,                     //是否启用排序    sortOrder: "asc",                   //排序方式    queryParams: queryParams,//传递参数（*）    sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）    pageNumber:1,                       //初始化加载第一页，默认第一页    pageSize: 10,                       //每页的记录行数（*）    pageList: [10, 20, 50, 100],        //可供选择的每页的行数（*）//    strictSearch: true,//设置为 true启用 全匹配搜索，否则为模糊搜索//    clickToSelect: true,                //是否启用点击选中行//    height: 460,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度    uniqueId: "platoonCode",                     //每一行的唯一标识，一般为主键列    cardView: false,                    //是否显示详细视图    detailView: false,                   //是否显示父子表//    showPaginationSwitch:true,    columns: [    [{        field: 'platoonCode',        title: '隊列番号',        align: 'center',        valign: 'middle',        rowspan: 2,        sortable: true // 开启排序功能    }, {        field: 'platoonName',        title: '隊列名前',        align: 'center',        valign: 'middle',        rowspan: 2    }, {        field: 'vehicleCount',        title: '車数',        align: 'center',        valign: 'middle',        rowspan: 2    }, {        field: 'startTime',        title: '出発時間',        valign: 'middle',        align: 'center',        rowspan: 2,        sortable: true // 开启排序功能    }, {        field: 'startPoi',        title: '出発地',        valign: 'middle',        align: 'center',        rowspan: 2    }, {        field: 'endPoi',        title: '目的地',        valign: 'middle',        align: 'center',        rowspan: 2    },  {        field: 'driver',        title: 'ドライバー',        valign: 'middle',        align: 'center',        rowspan: 2,        formatter:function (driver){                return 'ID：'+driver.driverCode        +'名前：'+driver.driverName        +'スーギル：'+driver.driverSkill;        }    },  {        field: 'distance',        title: '走行距離',        valign: 'middle',        align: 'center',        colspan: 2            }, {        field: 'time',        title: '走行時間',        valign: 'middle',        colspan: 2,        align: 'center',    },{        field: 'status',        title: '隊列状態',        valign: 'middle',        align: 'center',        rowspan: 2,        formatter:function (status){        if(status!=9){        return '走行中';        }        else {        return '走行完了';        }                }    }, {        field: 'dangerAct',        title: '危険運転',        valign: 'middle',        align: 'center',        rowspan: 2,        formatter:function (dangerAct){                return '急加速：'+dangerAct.acc+'回'        +'急速：'+dangerAct.dec+'回'        +'急ハンドル：'+dangerAct.handle+'回';        }    },{        field: 'warnCount',        title: '警告総計',        valign: 'middle',        align: 'center',        rowspan: 2,        formatter:function (warnCount){                return 'H：'+warnCount.high+'回'        +'M：'+warnCount.middle+'回'        +'L：'+warnCount.low+'回';        }    }    ,{        field: 'platoonCode',        title: '',        valign: 'middle',        align: 'center',        rowspan: 2,               formatter:function (code){                return '<input type="button" onclick=godetail('+code+') value="详细"></input>'        }    }],    [{    field: 'distance',        title: '実績',        valign: 'middle',        align: 'center',            },    {    field: 'time',        title: '計画',        valign: 'middle'    },    {    field: 'totalDistance',        title: '実績',        align: 'center',        valign: 'middle'            },    {    field: 'totalTime',        title: '計画',        valign: 'middle',        align: 'center'    }    ]    ],    responseHandler: function(res) {            return {                "total": res.count,//总页数                "rows": res.list   //数据             };        },    });$(".fixed-table-body").width(1300);$(".fixed-table-body").height(300);$(".fixed-table-pagination").width(1300);}

参数

function queryParams(params) {    var param = {       //platoonCode : "",//vehicleCode : "",statusList : '1,2,9',//startDate : "",//endDate : "",p : this.pageNumber,s : this.pageSize    }    return param;}

效果

说实话，刚开始用的的时候，坑还是很多的。

更多功能请参考官方文档：

http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

如有问题也可以评论问我，拜了个拜！^_^

阅读全文

0 0