bootstraptable基本样式操作
2019-04-10 15:05
387 查看
版权声明:版权来自tjeneifer https://blog.csdn.net/asdfghjkl110292/article/details/89183591
var oTable; //table var findyouwant = ""; //模糊查询的text $(function () { oTable = new TableInit(); oTable.Init(); }) var oTableInit = new Object(); var TableInit = function () { //初始化Table oTableInit.Init = function () { $('#usertable').bootstrapTable({ url: '/get/usertable', //请求后台的URL(*) method: 'get', //请求方式(*) toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination: true, //是否显示分页(*) sortable: true, //是否启用排序 sortOrder: "asc", //排序方式 queryParams: oTableInit.queryParams,//传递参数(*) sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*) pageNumber: 1, //初始化加载第一页,默认第一页 pageSize: 10, //每页的记录行数(*) pageList: [10, 25, 50, 100], //可供选择的每页的行数(*) search: false, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大 contentType: "application/x-www-form-urlencoded", strictSearch: false, showColumns: true, //是否显示所有的列 showRefresh: true, //是否显示刷新按钮 minimumCountColumns: 2, //最少允许的列数 clickToSelect: true, //是否启用点击选中行 height: 700, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度 uniqueId: "no", //每一行的唯一标识,一般为主键列 showToggle: true, //是否显示详细视图和列表视图的切换按钮 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表 columns: [ { field: 'selectItem', radio: true }, { field: 'id', title: '用户id' }, { field: 'username', title: '用户账号' }, { field: 'filetype', title: '用户姓名' } ], rowStyle: function (row, index) { var classesArr = ['warning', 'info']; var strclass = ""; if (index % 2 == 0) {//偶数行 strclass = classesArr[0]; } else {//奇数行 strclass = classesArr[1]; } return { classes: strclass }; },//隔行变色 }); //console.log(data); }; //bootstraptable的传递参数 //得到查询的参数 oTableInit.queryParams = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 limit: params.limit, //页面大小 offset: params.offset, find: findyouwant }; return temp; }; return oTableInit; };
获取selectitem操作
function openChangeRole() { var rowselect = $("#usertable").bootstrapTable('getSelections'); //取得当前选定的selectItem对象,其中包括整行值 console.log(rowselect); }
更新数据操作
//模糊查询 function customSearch() { findyouwant = $("#findtext").val(); var queryData = {}; queryData['limit'] = 10; queryData['offset'] = 0; queryData['menu'] = clickmenu; queryData['find'] = findyouwant; //调用这个函数来进行刷新数据 $('#usertable').bootstrapTable('refresh', queryData); //alert(ss); }
相关文章推荐
- bootstrap-table基本应用
- Bootstrap 基本样式-其他
- jQueryday05(动画效果 切换样式 tab切换 DOM基本操作)
- mysql中table schema的基本操作
- bootstrap设置table的样式
- Bootstrap 基本样式-栅格布局
- BootStrap的table表格,栅格系统,form表单的样式
- 学习使用bootstrap基本控件(table、form、button)
- BootstrapTable 实现toolbar删除操作
- BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
- bootstrap-table自定义复选框样式
- Bootstrap-table的使用及如何给单元格添加功能按钮和事件等操作!
- bootstrap-table的一些基本使用及表内编辑的实现
- Bootstrap 之Table样式
- Bootstrap学习总结笔记(6)-- 基本样式之图片
- Bootstrap基本样式学习笔记之表格(2)
- Bootstrap基本样式学习笔记之图片(6)
- Javascript操作table,tr,td和表格CSS样式设置小常识
- Jquery Table 的基本操作
- Chrome查看html样式基本操作-div