发布时间:2020-10-26编辑:佚名阅读(2936)
columns主要参数
field:表格的主体内容
title:表格的表头内容
formatter:function(value, row, index){}
events:function(value, row, index){}
value:字段值
row:行记录数据
index:行索引
<table data-toggle="table" id="workTable"></table>
Bootstrap Table js代码
$('#workTable').bootstrapTable({ striped: true, // 显示条纹表格 pagination: true, // 显示表格分页组件 pageList: [1, 3, 5], // 设置每页显示数据条数框 pageSize: 3, // 页面默认每页显示数据条数 pageNumber: 1, // 设置首页页码 // 以下为本文章核心代码 columns columns: [{ field: 'id', title: '编 号' }, { field: 'username', title: '用 户' }, { field: 'description', title: '角 色' }, { field: 'task', title: '描 述' }, { field: 'user', title: '员 工' }, { field: 'operate', title: '操作', formatter: btnGroup, // 自定义方法,添加按钮组 events: { // 注册按钮组事件 'click #modRole': function (event, value, row, index) { showUser(row.id, row.username) }, 'click #modUser': function (event, value, row, index) { showInfo(row.id, row.username, row.user) }, 'click #delUser': function (event, value, row, index) { showUsername(row.id, row.username) } } }] }); function btnGroup () { // 自定义方法,添加操作按钮 // data-target="xxx" 为点击按钮弹出指定名字的模态框 let html = '<a href="####" class="btn btn-info" id="modRole" data-toggle="modal" data-target="#editrole" title="修改权限">' + '<span class="glyphicon glyphicon-edit"></span></a>' + '<a href="####" class="btn btn-warning" id="modUser" data-toggle="modal" data-target="#editinfo" ' + 'style="margin-left:15px" title="修改用户">' + '<span class="glyphicon glyphicon-info-sign"></span></a>' + '<a href="####" class="btn btn-danger" id="delUser" data-toggle="modal" data-target="#deleteuser" ' + 'style="margin-left:15px" title="删除用户">' + '<span class="glyphicon glyphicon-trash"></span></a>' return html }; ...... ...... ...... // 以下内容为触发一定条件来刷新Bootstrap Table数据,核心为 // $("#workTable").bootstrapTable('load', data); $('#rolelist li').on('click', function () { let count=$(this).index() let rolecontent=$('#rolelist li').eq(count).text() $('#current_role').text(rolecontent) let deliver_id = $(this).attr('data-roleid') $.ajax({ type: 'POST', url: '/user/refresh', async: false, data: { role: deliver_id }, success: function (data) { console.log(data) $("#workTable").bootstrapTable('load', data) // 根据Json动态加载Table } }) });
行记录数据 row 示例:
关键字: Bootstrap Table 列参数 columns 使用总结
2人
0人
2人
0人