bootstrap table表格插件使用详解
程序员文章站
2022-06-20 18:30:09
bootstrp-table学习,具体内容如下
$table.bootstraptable({
url: '../data/data1.json',...
bootstrp-table学习,具体内容如下
$table.bootstraptable({ url: '../data/data1.json', striped: true, minimumcountcolumns: 2, clicktoselect: true, detailview: true, detailformatter: 'detailformatter', pagination: true, paginationloop: false, classes: 'table table-hover table-no-bordered', sidepagination: 'server', silentsort: false, queryparamstype:'', queryparams: queryparams : function(params) { var subcompany = $('#subcompany option:selected').val(); var name = $('#name').val(); return { pagenumber: params.offset+1, pagesize: params.limit, companyid:subcompany, name:name }; }, smartdisplay: false, idfield: 'id', sortable: false, escape: true, idfield: 'systemid', maintainselected: true, toolbar: '#toolbar', columns: [ {field: 'state', checkbox: true}, {field: 'id', title: '编号', sortable: true, halign: 'center'}, {field: 'username', title: '账号', sortable: true, halign: 'center'}, {field: 'password', title: '密码', sortable: true, halign: 'center'}, {field: 'name', title: '姓名', sortable: true, halign: 'center'}, {field: 'sex', title: '性别', sortable: true, halign: 'center'}, {field: 'age', title: '年龄', sortable: true, halign: 'center'}, {field: 'phone', title: '手机', sortable: true, halign: 'center'}, {field: 'email', title: '邮箱', sortable: true, halign: 'center'}, {field: 'address', title: '地址', sortable: true, halign: 'center'}, {field: 'remark', title: '备注', sortable: true, halign: 'center'}, {field: 'action', title: '操作', halign: 'center', align: 'center', formatter: 'actionformatter', events: 'actionevents', clicktoselect: false} ] }).on('all.bs.table', function (e, name, args) { $('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="popover"]').popover(); });
bootstrap-table是一种表格插件,可用作后管系统的数据处理和回显,当然,bootstrap-table的使用需要前后台协调进行。
在使用bootstrap-table过程中需要注意:
接口返回数据格式[json]包含的两个字段: total(数据总计)与rows(数据),即{"total":24,"rows":[...]}
分页包括服务器端和客户端两种情况,务器端分页的参数默认值为limit,offset,search,sort,order else,通过queryparamstype参数可对其进行重写
columns字段中:file 表示返回字段的属性名;title表示th标题内容;formatter表示自定义列表显示内容,包含三个参数,value, row, index,对应 为file值,行数据,行数
function actionformatter(value, row, index) { return [ '<a class="like" href="detail.html" rel="external nofollow" data-toggle="tooltip" title="详情"><i class="glyphicon glyphicon-pencil"></i></a> ', '<a class="edit ml10" href="javascript:createaction()" rel="external nofollow" data-toggle="tooltip" title="修改密码"><i class="glyphicon glyphicon-edit"></i></a> ', ].join(''); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
jquery表单插件form使用方法详解
-
jquery图片播放浏览插件prettyPhoto使用详解
-
vue iview组件表格 render函数的使用方法详解
-
laydate时间日历插件使用方法详解
-
angular项目中bootstrap-datetimepicker时间插件的使用示例
-
详解使用element-ui table组件的筛选功能的一个小坑
-
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
-
jQuery Masonry瀑布流插件使用详解
-
Bootstrap fileinput文件上传预览插件使用详解
-
Bootstrap进度条与AJAX后端数据传递结合使用实例详解