首页 > 网站 > WEB开发 > 正文

bootstrap table插件运用

2024-04-27 15:13:49
字体:
来源:转载
供稿:网友

 首先我们需要去下载相应的 jquery bootstrap  bootstrap-table的包。

注意bootstrap,下载编译过的压缩包中只有三个文件夹 CSS ,fonts, js

       1. jquery-2.2.1.js  ----  最新的jquery文件

       2. bootstrap.min.js --- 最新的bootstrap/js中bootstrap.min.js 压缩文件

       3.bootstrap.min.css ---最新的bootstrap/css中bootstrap.min.css 压缩文件

       4.bootstrap-table-all.js ---最新bootstrap-table下的js文件

       5.bootstrap-table-zh-CN.js ----最新bootstrap-table/locale下的中文初始文件

       6.bootstrap-table.min.css ---最新的bootstrap-table下css压缩文件

这六个必须配置,其中bootstrap-table-zh-CN.js是支持中文的js文件,只有加载了这个文件我们的一些表格显示信息才会被设置成中文。

1、引入js、css

?
12345678<!--css样式--><linkhref="css/bootstrap/bootstrap.min.css"rel="stylesheet"><linkhref="css/bootstrap/bootstrap-table.css"rel="stylesheet"><!--js--><scriptsrc="js/bootstrap/jquery-1.12.0.min.js"type="text/javascript"></script><scriptsrc="js/bootstrap/bootstrap.min.js"></script><scriptsrc="js/bootstrap/bootstrap-table.js"></script><scriptsrc="js/bootstrap/bootstrap-table-zh-CN.js"></script>

2、table数据填充

bootStrap table获取数据有两种方式,一是通过table 的data-url属性指定数据源,二是通过Javascript初始化表格时指定url来获取数据

?
123456<tabledata-toggle="table"> <thead> ... </thead></table> ...
?
123$('#table').bootstrapTable({  url:'data.json' });

 第二种方式较第一种而言在处理复杂数据时更为灵活,一般使用第二种方式来进行table数据填充。

?
$('#id').bootstrapTable({
    //url: influ_url,    data:data,    search: true,//是否搜索    pagination: true,//是否分页    pageSize: 5,//单页记录数    pageList: [5, 10, 20, 50],//分页步进值    sidePagination: "client",//服务端分页    searchAlign: "left",    searchOnEnterKey: false,//回车搜索    showRefresh: true,//刷新按钮    showColumns: true,//列选择按钮    buttonsAlign: "right",//按钮对齐方式    locale: "zh-CN",//中文支持    detailView: false,    showToggle:true,    sortName:'bci',    sortOrder:"desc",    columns: [        {            title: "",//标题            field: "",//键名            sortable: true,//是否可排序            order: "desc",//默认排序方式            align: "center",//水平            valign: "middle",//垂直            formatter: function (value, row, index) {                            }        },        {            title: "",//标题            field: "",//键名            sortable: true,//是否可排序            order: "desc",//默认排序方式            align: "center",//水平            valign: "middle",//垂直            formatter: function (value, row, index) {                            },        },            ],    onClickRow: function (rows, tr) {            },    });
此插件运用起来相当方便实用,还有很多方法和属性没有举例,大家可以参考
http://bootstrap-table.wenzhixin.net.cn/zh-cn/  
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表