bootstrapTable全选⾃定义事件使⽤
bootstrapTable样式实现如下：
第⼀种样式和功能：（指定页⾯跳转）
第⼆种样式和功能：（全选按钮事件和表单内⾃定义事件）
第三种样式和功能：（表单刷新按钮、表单头部排序、可配置显⽰列的内容）
bootstraptable需要引⼊的⽂件(以下⼀律采⽤cdn⽅式引⼊)
<!-- 最新版本的 Bootstrap 核⼼ CSS ⽂件 -->
<link rel="stylesheet" href="cdn.jsdelivr/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcw <link rel="stylesheet" href="unpkg/bootstrap-table@1.14.2/dist/bootstrap-table.min.css">
<script src="code.jquery/jquery-2.1.1.min.js"></script>
<!-- 最新的 Bootstrap 核⼼ JavaScript ⽂件 -->
<script src="cdn.jsdelivr/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9m
<script src="unpkg/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>bootstrapTable表单</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<!-- 最新版本的 Bootstrap 核⼼ CSS ⽂件 -->
<link rel="stylesheet" href="cdn.jsdelivr/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32Om <link rel="stylesheet" href="unpkg/bootstrap-table@1.14.2/dist/bootstrap-table.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-table-pagejump.css" />
<style type="text/css">
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="container">
<div class="first">
<h3>第⼀种样式</h3>
<table id="mytab" class="table table-hover">
</table>
</div>
<div class="second">
<h3>第⼆种样式</h3>
<table id="AmountTable" class="table table-hover">
</table>
</div>
</div>
<script src="code.jquery/jquery-2.1.1.min.js"></script>
<!-- 最新的 Bootstrap 核⼼ JavaScript ⽂件 -->
<script src="cdn.jsdelivr/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG
<script src="unpkg/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table-pagejump.js"></script>
<script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript">
$('#mytab').bootstrapTable({
url: 'data.json',
// method: 'POST',
queryParams: "queryParams",
toolbar: "#toolbar",
sidePagination: "true",
striped: true, // 是否显⽰⾏间隔⾊
// search : "true",
uniqueId: "ID",
pageSize: "5",
pagination: true, // 是否分页
sortable: true, // 是否启⽤排序
paginationShowPageGo: true,
columns: [{
field: 'id',
title: '序号',
width: 120,
align: 'center',
valign: 'middle'
},
{
field: 'id',
title: '历史记录',
width: 120,
align: 'center',
valign: 'middle',
formatter: actionFormatter,
},
{
{
field: 'budget_code',
title: '预算编号',
width: 120,
align: 'center',
valign: 'middle'
},
{
field: 'budget_state',
title: '状态',
width: 120,
align: 'center',
valign: 'middle'
},
{
field: 'budget_type',
title: '预算类型',
width: 120,
align: 'center',
valign: 'middle'
},
{
field: 'proj_code',
title: '项⽬编号',
width: 120,
align: 'center',
valign: 'middle'
},
{
field: 'proj_name',
title: '项⽬名称',
width: 120,
align: 'center',
valign: 'middle'
},
{
field: 'customer_operate_pattern', title: '项⽬操作模式',
width: 120,
align: 'center',
valign: 'middle'
},
{
field: 'ground_district',
title: '落地⼤区',
width: 120,
align: 'center',
valign: 'middle'
},
{
field: 'proj_start_date',
title: '驱动⽇期',
width: 120,
align: 'center',
valign: 'middle'
},
{
field: 'proj_period',
title: '项⽬周期',
width: 120,
align: 'center',
valign: 'middle'
},
{
field: 'proj_date',
title: '最近修改⽇期',
title: '最近修改⽇期',
width: 120,
align: 'center',
valign: 'middle'
}
],
onLoadSuccess: function (res) {
console.log('数据')
}
})
//操作栏的格式化
function actionFormatter(value, row, index) {
var id = value;
var result = "";
result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><button type='button' class='btn btn-defaul return result;
}
//查看内容
function EditViewById (id) {
alert(id)
}
// 预计合同总⾦额表单
$('#AmountTable').bootstrapTable({
url: 'Amount.json',
// method: 'POST',
queryParams: "queryParams",
toolbar: "#toolbar",
sidePagination: "true",
striped: true, // 是否显⽰⾏间隔⾊
// search : "true",
uniqueId: "ID",
pageSize: "5",
pagination: false, // 是否分页
sortable: true, // 是否启⽤排序
paginationShowPageGo: true,
columns: [
{
checkbox:true
},
{
field: 'id',
title: '序号',
width: 120,
align: 'center',
valign: 'middle',
},
{
field: 'material_code',
title: '材料代码',
width: 120,
align: 'center',
valign: 'middle'
},
{
field: 'material_name',
title: '材料名称',
width: 120,
align: 'center',
valign: 'middle'
},
{
field: 'contract_area',
title: '合同⾯积',
width: 120,
align: 'center',
valign: 'middle'
valign: 'middle'
},
{
field: 'contract_unit_price',
title: '合同单价',
width: 120,
align: 'center',
valign: 'middle'
},
{
field: 'subitem_prop',
title: '分项占⽐',
width: 120,
align: 'center',
valign: 'middle'
},
{
field: 'contract_subitem_amount',
title: '合同分项⾦额',
width: 120,
align: 'center',
valign: 'middle'
},
{
field: 'price',
title: '操作',
width: 120,
align: 'center',
valign: 'middle',
formatter: ActionWrite
}
]
,
onLoadSuccess: function (res) {
console.log('数据')
},
onClickRow: function (row, tr,flied) {
console.log('选中⾏事件')
bootstrap项目},
onCheckAll: function (rows) {
console.log('全部选中事件')
},
onUncheckAll: function (rows) {
console.log('全部不选中事件')
},
onUnCheckAll: function (rows) {
console.log('全部不选中事件')
},
onCheck: function (row) {
console.log('单独选中事件')
},
onUncheck:function(row){
console.log('取消选中')
}
})
function ActionWrite (value, row, index) {
var id = value;
var result = "";
result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"GetHeTongId('" + index+ "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a> result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"GetHeTongId('" + index + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></ return result
}
function GetHeTongId (id) {
alert(id)
}
</script>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论