标签：middle toggle asc src doc open tco bar handle
记录下 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>
标签：middle toggle asc src doc open tco bar handle
原文地址：https://www.cnblogs.com/wsq-blog/p/10281851.html
