没有合适的资源?快使用搜索试试~ 我知道了~
废话不多说了,直接给大家贴代码了,具体代码如下所示: [removed] var $table = $('#table'); var columns = []; //获取表头信息 function buildColumnsStyle(url, align, valign, ignore) { $.ajax({ 'method': 'GET', 'url': url, 'async': false, 'success': function (data, status) {
资源详情
资源评论
资源推荐
bootstrap table实例详解实例详解
废话不多说了,直接给大家贴代码了,具体代码如下所示:
<script type="text/javascript">
var $table = $('#table');
var columns = [];
//获取表头信息
function buildColumnsStyle(url, align, valign, ignore) {
$.ajax({
'method': 'GET',
'url': url,
'async': false,
'success': function (data, status) {
//此处设置columns
}
});
}
buildColumnsStyle('/api/v1/ArticleItem/info', 'center', null, []);
//动态表格渲染
$(function () {
$table.bootstrapTable({
columns: columns, //表格的列,取决于后台获取的数据
pageList: [10, 20, 50], //表格每页数据条数控制
onClickCell: function (row, field, value, $element) {
//单元格事件
},
onPageChange: function (number, size) {
//表格页面切换事件
}
});
//搜索按钮事件,用于bootstrap table 数据加载
$('#searchArticle').click(function () {
$.get(generateSearchArticleUrl(true), function (data, status) {
//创建bootstrap模态对话框
createBootstrapModal(data.result, 100);
createLabels(data.result);
//数据加载
if (data.success && data.result.length != 0) {
$table.bootstrapTable('load', {data: data.result});
} else {
$table.bootstrapTable('load', {data: []});
}
renderLabels();
});
});
});
</script>
以上所述是小编给大家介绍的bootstrap table实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时
回复大家的。在此也非常感谢大家对软件开发网网站的支持!
weixin_38728624
- 粉丝: 4
- 资源: 882
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0