Bootstrap Table 的用法
程序员文章站
2023-08-19 13:46:50
记录下 Bootstrap Table 的用法，备忘。 ......
记录下 bootstrap table 的用法，备忘。
<!doctype html>
<style type="text/css">
/*bootstrap-table选中行颜色*/
.table tbody .selected td
{
background-color: #eee8aa;
}
/*表头颜色*/
/*thead
{
background-color: #333333;
color: #fdfdfd;
}*/
/*隔行变色*/
/*table tbody tr:nth-child(even)
{
background-color: #b6ff00;
}*/
#divtable
{
height: 900px;
}
/*表头固定 todo*/
</style>
</head>
<body>
<div class="container-fluid">
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="btn_edit" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
</div>
<div id="divtable" class="table-responsive">
<%--自适应水平滚动条--%>
<table id="table">
<%--<thead>
<tr>
<th data-checkbox="true"></th>
<th data-sortable="true" data-field="account">账户</th>
<th data-sortable="true" data-field="realname">真实姓名</th>
<th data-sortable="true" data-field="gender">性别</th>
<th data-sortable="true" data-field="mobile">手机号码</th>
<th data-sortable="true" data-field="email">邮箱</th>
<th data-sortable="true" data-field="lastvisit">最后一次访问时间</th>
<th data-sortable="true" data-field="createdate">创建时间</th>
</tr>
</thead>--%>
</table>
</div>
</div>
<script type="text/javascript">
window.onload = function () {
getbootstraptable();
//$("#btn-search-list").click(function () {
// getbootstraptable();
//})
}
function getbootstraptable() {
//生成用户数据
$('#table').bootstraptable('destroy');
$('#table').bootstraptable({
method: 'post', //请求方式
contenttype: "application/x-www-form-urlencoded",
url: "test.aspx?action=getbootstraptabledata", //要请求数据的文件路径
// height: return $(window).height(), //高度调整
// searchtimeout: '5000',
// showheader:true,
striped: true, //是否显示行间隔色
pagenumber: 1, //初始化加载第一页，默认第一页
pagination: true, //是否分页
sidepagination: 'server', //指定服务器端分页
pagesize: 50, //单页记录数
pagelist: [10, 20, 50], //分页步进值
showrefresh: true, //刷新按钮
showcolumns: true, //是否显示所有的列
minimumcountcolumns: 2, //最少允许的列数
clicktoselect: true, //是否启用点击选中行
sortable: 'true', //是否启用排序
sortname: 'lastvisit',
sortorder: 'desc', //排序方式
toolbar: '#toolbar', //工具按钮用哪个容器
cache: true, //是否使用缓存，默认是true
search: true, //搜索框
searchonenterkey: true, //按回车触发搜索方法
//showtoggle: true, //详细视图和列表视图的切换按钮
//cardview:false,
//fixedcolumns: true,
//fixednumber:1, //固定列数
queryparamstype: 'undefined', //查询参数组织方式
//queryparams: queryparams, //请求服务器时所传的参数
responsehandler: function (res) {
return res;
},
//双击触发的事件，当双击就会获取row，row就是该整行的内容，其中"row.realname"中"realname"是data-field定义的字段.
ondblclickrow: function (row, field) {
layer.msg("当前行用户的真实姓名:" + row.realname);
},
//onclickrow: function (row) {
// layer.msg("onclickrow:" + row.realname)
//},
singleselect: true, //单选checkbox，只能选中一行
columns: [
{
checkbox: true
},
{
title: '编号',
//align: 'center',
//valign: 'bottom',
//手动实现编号
formatter: function (value, row, index) {
var pagenumber = $('#table').bootstraptable("getoptions").pagenumber;
var pagesize = $('#table').bootstraptable("getoptions").pagesize;
return pagesize * (pagenumber - 1) + index + 1;
}
},
{
field: 'account',
title: '账户',
sortable: true,
formatter: function (value, row, index) {
return "<span style='color:#ff0000'>" + value + "</span>";
//return "<img onclick=\"findpersonmeg('" + procode + "','" + projectname + "')\" title='点击查看责任人信息' src='/themes/images/16/application_form_magnify.png' style='vertical-align: middle;cursor: pointer;' alt='' />";
//return "<span style='color:#ff0000' onclick='testlayer()'>" + value + "</span>";
}
},
{
field: 'realname',
title: '真实姓名',
sortable: true
},
{
field: 'gender',
title: '性别',
sortable: true
},
{
field: 'mobile',
title: '手机号码',
sortable: true
},
{
field: 'email',
title: '邮箱',
sortable: true
},
{
field: 'lastvisit',
title: '最后一次访问时间',
sortable: true
},
{
field: 'createdate',
title: '创建时间',
sortable: true
}
]
});
//初始化表格高度,以保证分页工具栏始终显示
//inittableheight();
}
//function queryparams(params) {
//方式一
// params.project = $("#project").val();
// params.start = $("#start").val();
// params.end = $("#end").val();
// params.alarmtype = $("#alarm-type").val();
// return params;
//方式二
// return {
// pagesize: params.limit,
// pagenumber: params.pagenumber
// }
//}
//function testlayer() {
// alert('hello');
//}
/**
* 初始化表格高度
*/
//function inittableheight() {
// //拿到父窗口的divtable高度(这是iframe子页面拿到父窗口元素的方法，需要根据自己项目所使用的框架自行修改元素的id)
// var panelh = $("#divtable", parent.document).height();
// //拿到顶部工具栏高度
// var toolbarh = $(".bs-bars.pull-left").height();
// //计算表格container该设置的高度
// var height = panelh - toolbarh - 91;
// var container = $(".fixed-table-container").css({ "height": height });
//}
// 获取选中行的数据
$("#btn_edit").click(function (e) {
//var alltabledata = $('#table').bootstraptable('getdata');//获取表格的所有内容行
var getselectionsrows = $('#table').bootstraptable("getselections"); //获取suoyou选中行的内容
var account = getselectionsrows[0].account;
var realname = getselectionsrows[0].realname;
var gender = getselectionsrows[0].gender;
var mobile = getselectionsrows[0].mobile;
var email = getselectionsrows[0].email;
var lastvisit = getselectionsrows[0].lastvisit;
var createdate = getselectionsrows[0].createdate;
if (getselectionsrows.length == 1) {
layer.open({
type: 2, // iframe层
title: '编辑',
shadeclose: true,
shade: 0.8,
area: ['800px', '600px'],
content: ['./test3form.aspx?account=' + escape(account) + "&realname=" + escape(realname)
+ "&gender=" + escape(gender) + "&mobile=" + escape(mobile) + "&email=" + escape(email)
+ "&lastvisit=" + escape(lastvisit) + "&createdate=" + escape(createdate), 'no']
});
//alert(getselectionsrows[0].realname);
} else {
alert("请只选中一行！！！");
}
});
</script>
</body>
</html>
上一篇： 重磅 | 希沃成为5G智慧教育联盟一员
推荐阅读