bootstrap table表格使用方法详解
程序员文章站
2024-02-02 22:44:52
本文实例为大家分享了bootstrap table表格的使用方法，供大家参考，具体内容如下
1.进入页面，根据指定的url加载数据(json格式)
2.加载成功，根...
本文实例为大家分享了bootstrap table表格的使用方法，供大家参考，具体内容如下
1.进入页面，根据指定的url加载数据(json格式)
2.加载成功，根据$table.bootstraptable({options})显示表格样式。
感觉还是挺漂亮的哈，ok，下面贴代码解释功能。
开始之前，当然要引用js啦
<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>
html代码，一是指定table要使用的工具栏，而是写一个空的table
<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>
js代码，使用("#table").bootstraptable({options})填充table
$("#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);
}
});
其中url是table 数据源地址，如果table启动了分页功能，后台取数据的方法要加上limit、offset两个int类型的参数，这里把后台代码也贴一下。
public jsonresult gettestdata(int limit, int offset)
{
bugzillamodelcontainer db = new bugzillamodelcontainer();
list<b_systeminfo> systeminfo = db.b_systeminfo.tolist();
for (int i = 0; i < 20; i++)
{
b_systeminfo tempsystem = new b_systeminfo();
tempsystem.systemcode = (i + 1).tostring();
tempsystem.systemdesc = "测试系统" + (i + 1).tostring();
tempsystem.isvalid = "y";
tempsystem.uuser = "result_for" + (i + 1).tostring();
tempsystem.udate = system.datetime.now.toshortdatestring();
systeminfo.add(tempsystem);
}
var total = systeminfo.count();
var rows = systeminfo.skip(offset).take(limit).tolist();
return json(systeminfo, jsonrequestbehavior.allowget);
}
offset表示从多少条数据开始取，limit表示取多少条数据。
客户端搜索只要设置search=true即可。
服务端搜索，需要设置参数。
首先设置
("#table").bootstraptable({queryparams: otableinit.queryparams}),//传递参数（*）
然后获取查询的参数
//得到查询的参数
otableinit.queryparams = function (params) {
var temp = {
//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit: params.limit, //页面大小
offset: params.offset, //页码
systemcode: $("#systemcode").val(),
};
return temp;
};
通过button事件刷新table，重新获取数据源，即可。
$("#btnquery").click(function () {
$table.bootstraptable('refresh');
});
最后贴上全部html代码~
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>index</title>
<link href="~/content/bootstrap.min.css" rel="external nofollow" rel="stylesheet" />
<link href="~/content/bootstrap-theme.min.css" rel="external nofollow" rel="stylesheet" />
<link href="~/content/bootstrap-table/bootstrap-table.min.css" rel="external nofollow" 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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。