BootStrap-table教程
2019-09-18 17:22
1031 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_41861558/article/details/100990204
BootStrap-table官网下载地址: http://bootstrap-table.wenzhixin.net.cn/zh-cn/
1、head引入link、js资源
[code]<!-- 引入bootstrap样式 --> <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <!-- 引入bootstrap-table样式 --> <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"> <!-- jquery --> <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!-- bootstrap-table.min.js --> <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script> <!-- 引入中文语言包 --> <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
2 、html创建一个表格
[code]<section> <div class="content-wrapper"> <table id="tabList"></table> </div> </section>
3 、调用方法(javascript)
(1)queryParams:是传递给controller的数据,其中params.limit是页面大小,params.offset是每一页其实行数。且这两个字段名字不能变。
(2)传递方法(get,post)以及传递格式contentType(json..)的设置会影响到controller是否会接收到数据
[code]$('#' + tableId).bootstrapTable({ url: url, //请求后台的URL(*) method: 'post', //请求方式(*) toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination: true, //是否显示分页(*) sortable: false, //是否启用排序 sortOrder: "asc", //排序方式 queryParams: Sys.queryParams,//传递参数(*) sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*) pageNumber: 1, //初始化加载第一页,默认第一页 pageSize: 10, //每页的记录行数(*) // pageList: [10, 25, 50, 100], //可供选择的每页的行数(*) search: false, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大 // contentType: "application/x-www-form-urlencoded", contentType: "application/json", strictSearch: true, singleSelect: false, //是否单一选择 showColumns: false, //是否显示所有的列 showRefresh: false, //是否显示刷新按钮 minimumCountColumns: 2, //最少允许的列数 clickToSelect: true, //是否启用点击选中行 height: 600, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度 uniqueId: "no", //每一行的唯一标识,一般为主键列 showToggle: false, //是否显示详细视图和列表视图的切换按钮 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表 columns: [ {checkbox:true}, { "field": "name", //字段名字,对应bean类属性名字 "title": "名称", //显示在前端页面表头的名字 "titleTooltip":"school name", //鼠标放在标题上会提示的信息 "halign":"center", //表头列名位置 "align": "center" //数据位置 }, { "field": "seq", "title": "排名", "halign":"center", "align": "center", "sortable":"true", }, { "field": "score", "title": "分数", "halign":"center", "align": "center" }, { "field": "level", "title": "级别", "halign":"center", "align": "center" },{ "field": "remark", "title": "备注", "halign":"center", "align": "center" }, { field: 'id', title: '操作', // align: 'center', formatter: Sys.operateFormatter } ], }); //得到查询的参数 queryParams: function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 pageSize: params.limit, //页面大小 pageNumber: params.offset, }; return temp; }, //操作 operateFormatter: function (value, row, index) {//赋予的参数 var btnEdit = '<a href="javascript:;" οnclick="Index.edit(\'ID\')" id="editBtn" class="btn btn-link" style="padding:0px 6px">编辑</a>'; var btnRemove = '<a href="javascript:;" οnclick="Index.remove(\'ID\')" class="btn btn-link" style="padding:0px 6px">删除</a>'; return [btnEdit, btnRemove] .join('').replace(/ID/g, value); },
相关文章推荐
- 值得分享的Bootstrap Table使用教程
- 基于Bootstrap-Table的Web表格教程
- BootstrapTable的使用教程
- bootstrap-table+spring MVC 入门教程
- bootstrap-table教程演示
- bootstrap table 分页序号递增问题
- 基于Servlet+JDBC+Bootstrap+MySQL+AJAX权限管理系统项目实战教程
- ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十六节--SignalR与ABP框架Abp.Web.SignalR及扩展
- JavaScript强化教程——Bootstrap 包的内容
- bootstrap table
- BootStrap入门教程 (三)
- 关于bootstrap-table的使用
- ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十五节--缓存小结与ABP框架项目中 Redis Cache的实现
- ios开发学习--列表(Table)效果源码分享--系列教程3
- Bootstrap教程JS插件弹出框学习笔记分享
- JS组件系列——表格组件神器:bootstrap table
- Bootstrap CSS教程
- Bootstrap教程JS插件滚动监听学习笔记分享
- 《基于BootStrap3的JSP项目实例教程》第1讲
- Swt/Jface tableviewer入门教程四(加入filter ,改变行的颜色)