bootstrap-table的使用
来源:互联网 发布:淘宝赚差价采集软件 编辑:程序博客网 时间:2024/05/16 05:35
一、前言
项目中用到了bootstrap-table,以前没有接触过这个,现在项目做完,做一个关于 使用bootstrap-table的小总结
二、使用
1.引入所需jar包以及css样式文件
<script src="~/Content/bootstrap-table/bootstrap-table.js"></script><link href="~/Content/bootstrap-table/bootstrap-table.css" rel="stylesheet" /><script src="~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>2.在页面中定义<table>标签
<table id="elderTable"></table>3.在js中对之前定义的table进行初始化
var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#elderTable').bootstrapTable({ url:"getDataByNewlyidAndMonth", contentType: "application/x-www-form-urlencoded",//必须写! method: 'get', //请求方式(*) toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination: true, //是否显示分页(*) sortable: false, //是否启用排序 sortOrder: "asc", //排序方式 queryParams: function(params) { //用于传递分页需要的参数 var newly_id = $(".focusOn").children("a").children(".newly_id").val(); var month = $('#month').val(); return { pageNumber: params.offset/10+1, pageSize: params.limit, search: params.search, newly_id: newly_id, month: month }; }, sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*) pageNumber:1, //初始化加载第一页,默认第一页 pageSize: 10, //每页的记录行数(*) pageList: [10], //可供选择的每页的行数(*) search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大 strictSearch: true, showColumns: false, //是否显示所有的列 showRefresh: false, //是否显示刷新按钮 minimumCountColumns: 2, //最少允许的列数 clickToSelect: true, //是否启用点击选中行 height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度 uniqueId: "id", //每一行的唯一标识,一般为主键列 showToggle:false, //是否显示详细视图和列表视图的切换按钮 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表 columns: [ { field: 'number', title: '序号', width: '60px', formatter: function (value, row, index) { var page = $('#elderTable').bootstrapTable("getPage"); return page.pageSize * (page.pageNumber - 1) + index + 1; } /*formatter: function (value, row, index) { var h = $("#newly_id_now").val(); return h; }*/ }, { field: 'name', title: '姓名', width: '80px' }, { field: 'id_code', title: '身份证号', width: '150px' }, { field: 'elderly_money', title: '基数', width: '80px' }, { field: 'company', title: '公司', width: '120px' }, ] }); }; return oTableInit; };
后续会完善一个demo出来...
阅读全文
0 0
- bootstrap-table的使用
- bootstrap-table的使用
- bootstrap-table 插件的使用
- Bootstrap Table的使用小结
- bootstrap table插件的使用
- bootstrap的table表格使用
- Bootstrap的table类的使用
- Bootstrap table的一些简单使用总结
- 关于bootstrap table 插件的使用总结
- 使用bootstrap-table遇到的一个坑
- Bootstrap table的一些简单使用总结
- bootstrap-table的使用与条件搜索
- Bootstrap table的一些简单使用总结
- bootstrap-table使用时遇到的坑
- Struts2结合Bootstrap-Table分页的使用
- bootstrap-Table sub父子表的使用
- bootstrap table使用小记
- bootstrap-table使用总结
- 树状数组模板
- Python--Namespace.IO.String
- js实现日期控件
- linux安装opencv
- Java知识---抽象类
- bootstrap-table的使用
- 瞬时极性法判断反馈类型
- hdoj 5583 Kingdom of Black and White
- spring boot项目中使用spring-boot-devtools模块进行代码热部署,避免重新启动web项目
- DS18B20温度传感器在90c51上的使用
- 设计模式--适配器模式
- 内部类二
- 字符串的其它注意事项--cookbook读书笔记
- 是否接种狂犬疫苗