您的位置：首页 > Web前端 > BootStrap

Bootstrap插件系列——Bootstrap-table初始化、分页、客户端搜索、服务端搜索

2016-07-08 09:42 761 查看
又好久不写博客，最近项目都是用的bootstrap的样式，不出意外，应该是要在bootstrap的道路上越走越远了，所以下定决心，把bootstrap的插件都好好学学。

昨天写了boostrap-table的范例，拿出来给大家分享一下，如果有不对的地方，还请大家指正以及多多包含~

先上效果图：

1.进入页面，根据指定的URL加载数据(json格式)

$("#btnQuery").click(function () {
$table.bootstrapTable('refresh');
});


View Code
最后贴上全部html代码~

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Content/bootstrap-table/bootstrap-table.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">

</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="btn-group" id="toobar" role="group" aria-label="...">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus"></span>新增
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>修改
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove"></span>删除
</button>
</div>
<table id="myTable"></table>
</div>
</div>
</div>
<script>

$(function () {
var itable = TableInit();
itable.Init();
});

var TableInit = function () {
var myTableInit = new Object();

myTableInit.Init = function () {
$("#myTable").bootstrapTable({
url: '/BootstrapTable/GetTestData',
method: 'get',
toolbar: '#toobar',//工具列
striped: true,//隔行换色
cache: false,//禁用缓存
pagination: true,//启动分页
sidePagination: 'client',//分页方式
pageNumber: 1,//初始化table时显示的页码
pageSize: 10,//每页条目
showFooter: false,//是否显示列脚
showPaginationSwitch: true,//是否显示 数据条数选择框
sortable: false,//排序
search: true,//启用搜索
showColumns: true,//是否显示 内容列下拉框
showRefresh: true,//显示刷新按钮
idField: 'SystemCode',//key值栏位
clickToSelect: true,//点击选中checkbox
singleSelect: true,//启用单行选中
columns: [{
checkbox: true
},
{
field: 'SystemCode',
title: '系统代码',
titleTooltip: 'young for you'
},
{
field: 'SystemDesc',
title: '系统名称'
},
{
field: 'Isvalid',
title: '是否有效'
},
{
field: 'UUser',
title: '更新人'
},
{
field: 'UDate',
title: '更新时间'
}],
onClickCell: function (field, value, row, $element) {
//alert(row.SystemDesc);
}
});
};

return myTableInit;
};
</script>
</body>
</html>


OK，今天就写到这儿了~下篇应该会写boostrap-table的行内编辑等内容~
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航