使用bootstrap-table表格插件实现表格
2018-02-21 20:29
801 查看
依赖的jar包 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table/src/bootstrap-table.css">
<script src="/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap-table/src/bootstrap-table.js"></script>在body中定义table所在位置 和toobar所在位置 //表格主体
<table id="table"></table>
//toobar主体
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#addModal">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>修改学生信息
</button>
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除学生信息
</button>
</div>
table的初始化js
<link rel="stylesheet" href="bootstrap-table/src/bootstrap-table.css">
<script src="/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap-table/src/bootstrap-table.js"></script>在body中定义table所在位置 和toobar所在位置 //表格主体
<table id="table"></table>
//toobar主体
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#addModal">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>修改学生信息
</button>
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除学生信息
</button>
</div>
table的初始化js
<script type="text/javascript"> $('#table').bootstrapTable({ url: '/studentInfo/listStudentInfo', method: 'post', dataType: 'json', height: 560, toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 pagination: true, //是否显示分页(*) maintainSelected: true, //设置为 true 在点击分页按钮或搜索按钮时,将记住checkbox的选择项 sidePagination: "client", //分页方式:client客户端分页,server服务端分页(*) pageNumber: 1, //初始化加载第一页,默认第一页 pageSize: 10, //每页的记录行数(*) pageList: [10, 25, 50, 100], //可供选择的每页的行数(*) search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大 strictSearch: true, //设置为 true启用 全匹配搜索,否则为模糊搜索 showRefresh: true, //是否显示刷新按钮 minimumCountColumns: 2, //最少允许的列数 clickToSelect: true, //是否启用点击选中行 uniqueId: "studentID", //每一行的唯一标识,一般为主键列\ sortStable: true, columns: [ {checkbox: true}, {field: 'studentID', title: '学号'}, {field: 'name', title: '姓名'}, {field: 'sex', title: '性别'}, {field: 'college', title: '学院'}, {field: 'majorName', title: '专业名称'}, {field: 'adminClass', title: '行政班'}, {field: 'birthDate', title: '出生年月'}, {field: 'politicsStatus', title: '政治面貌'}, {field: 'nation', title: '民族'}, {field: 'areaSource', title: '来源地区'}, {field: 'enrollmentDate', title: '入学日期'}, {field: 'graduationMiddleSchool', title: '毕业中学'}, {field: 'phone', title: '联系电话'}, {field: 'idNumber', title: '身份证号'}, {field: 'sourceProvince', title: '来源省'}, {field: 'language', title: '主修外语语种'} ], }); </script>
相关文章推荐
- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
- 基于Metronic的Bootstrap开发框架经验总结(16)-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
- 【前端H5】bootstrap-table表格插件使用js设置高度及高度自适应
- 在Bootstrap开发框架中使用bootstrapTable表格插件和jstree树形列表插件时候,对树列表条件和查询条件的处理
- Django 使用 bootstrap-table插件,表格分页 + UTC、时间戳 互转
- BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
- bootstrap 表格插件bootstrap-table的使用
- 结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程
- JS组件Bootstrap Table表格行拖拽效果实现代码
- BootStrap使用popover插件实现鼠标经过显示并保持显示框
- 使用Bootstrap typeahead插件实现搜索框自动补全的方法
- 基于Bootstrap使用jQuery实现简单可编辑表格
- JS组件Bootstrap Table表格多行拖拽效果实现代码
- 使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
- Bootstrap3使用typeahead插件实现自动补全功能
- 值得分享的轻量级Bootstrap Table表格插件
- 基于Bootstrap使用jQuery实现简单可编辑表格
- 使用nodejs,express,mysql,Bootstrap开发采购招标网站(三)Bootstrap-table实现Ajax删除数据
- 好用的自适应表格插件-bootstrap table (支持固定表头)