bootstrap-table的使用
2017-10-15 17:10
85 查看
一、前言
项目中用到了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(); ret 837c urn 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出来...
相关文章推荐
- ABP+AdminLTE+Bootstrap Table权限管理系统第一节--使用ASP.NET Boilerplate模板创建解决方案
- Bootstrap Table使用整理(一)
- MVC+EF bootstrap-table使用DataTable遇到问题与解决
- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
- bootstrap-table地表第二强使用指南(目前还没着手写)
- Bootstrap Table使用整理(二)
- bootstrap-table使用记录
- 在Bootstrap开发框架中使用bootstrapTable表格插件和jstree树形列表插件时候,对树列表条件和查询条件的处理
- bootStrap table 使用
- Bootstrap Table使用方法详解 作者:aozeahj
- bootstrap 表格插件bootstrap-table的使用
- 基于Metronic的Bootstrap开发框架经验总结(16)-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
- bootstrap-table的一些基本使用及表内编辑的实现
- bootstrap table 使用详细讲解
- bootstrap--table,select2及x-editable的使用小结
- bootstrap-table使用笔记
- bootstrap table使用(上)——客户端分页
- bootstrap-table分页插件使用
- bootstrap-table使用总结
- bootstrap-table 初始化数据及使用问题