bootStrap table 使用
2017-12-05 19:55
387 查看
html:
<table id="listTable" class="table table-striped table-bordered table-hover text-center"> <thead> <tr class="info"> <th class="text-center" data-field="index" >序号</th> <th class="text-center" data-field="collegeName">院系</th> <th class="text-center" data-field="cataCount">专业</th> <th class="text-center" data-field="createDate">创建时间</th> <th class="text-center tdLine-nowrap" data-formatter="operateFormatter" data-events="operateEvents"><i class="fa fa-fw fa-cog txt-color-blue hidden-md hidden-sm hidden-xs"></i> 操作</th> </tr> </thead> </table>
js:
$(document).ready(function() { // 初始化列表 initTable(); //查询事件(初始化列表参数为空,查询时传入查询参数) $("#search").on("click", function(){ $('#listTable').bootstrapTable('selectPage', 1); }); }); // 初始化列表 function initTable() { // 初始化列表 var table = $('#listTable').bootstrapTable({ url : getContextPath() + '/training/deplist', method : 'GET', striped: true, //表格显示条纹 pagination : true,//在表格底部显示分页工具栏 sidePagination : 'server',//表格分页的位置(服务端) cache: false, //是否使用缓存,默认为true pageNumber: 1, //初始化加载第一页,默认第一页 pageSize : 10, //每页显示记录条数 pageList: [5, 10, 15, 20, 25],//记录数可选列表 uniqueId : 'id',//每一行的唯一标识,一般为主键列 undefinedText : '', queryParams : function(params) {//查询参数,每次调用是会带上这个参数,可自定义 params.collegeName = $("#depart").val();// 院系名称 return params; }, responseHandler : responseHandler, //在表体上渲染并在DOM中可用。 onPostBody : function() { //resetView : 重置引导表视图,例如重置表高度。 $('#listTable').bootstrapTable("resetView"); //操作按钮鼠标经过显示 popover:启用弹出框 trigger() 方法触发被选元素的指定事件类型。 $("a").popover({ trigger : 'hover' }); } }); //根据窗口调整表格高度 resize : 当调整浏览器窗口的大小时,发生 resize 事件。 // $(window) Window 对象表示一个浏览器窗口或一个框架。 $(window).resize(function() { $('#listTable').bootstrapTable('resetView'); }); // 操作事件 window.operateEvents = { // 编辑 'click .edit' : function(e, value, row, index) { getInfo(row.uscId,row.collegeName, "EDIT"); }, 'click .delete' : function(e, value, row, index) { deleteConfig(row.uscId, "DELETE"); } }; } //设置列表数据 function responseHandler(res) { if ("success" == res.RET_CODE && res.rows != null) { $.each(res.rows, function(i, row) { row.index = res.pageIndex + i + 1; }); return res; } else { return res; } } // 列表操作列格式化 function operateFormatter(value, row, index) { var content = '<a class="edit" ' + ' rel="popover-hover" data-placement="top" data-content="编辑" ' + ' href="javascript:void(0)"> ' + ' 编辑 ' + ' </a> ' + '<a class="delete" ' + ' rel="popover-hover" data-placement="top" data-content="删除" ' + ' href="javascript:void(0)"> ' + ' 删除 ' + ' </a> ' return content; }后台:
bootstrap-table要求服务器返回的json须包含:totlal,rows
相关文章推荐
- 使用tableExport导出bootstrap-table表格 支持中文的Excel等格式
- 在ABP框架中使用BootstrapTable组件的方法
- Bootstrap-table使用footerFormatter做统计列功能
- BootstrapTable的使用教程
- BootStrap-table-contextmenu使用过程的一些总结
- 表格组件神器:bootstrap table详细使用指南
- bootstrap-table使用记录
- bootstrap-table操作使用
- $("#table").bootstrapTable({...})前为何使用$("#table").bootstrapTable('destroy');
- JS组件Bootstrap Table使用实例分享
- bootstrap-table的一些基本使用及表内编辑的实现
- bootstrap-table与mybatis结合使用
- 数据表格:angualrjs和bootstrap一起使用做成的table
- bootstrap-table的使用与条件搜索
- 关于python的web框架django和Bootstrap-table的使用
- 使用bootstrap-table简化CRUD
- 使用Bootstrap 基于MVC输出移动化table 列表
- 值得分享的Bootstrap Table使用教程
- bootstrap-table使用时遇到的坑
- Bootstrap Table使用整理(一)