845 lines
28 KiB
PHP
845 lines
28 KiB
PHP
<?php
|
||
#
|
||
# @Author: fm453
|
||
# @Date: 2024/7/17
|
||
# @updated: 上午3:31
|
||
# @Email: 1280880631@qq.com
|
||
use yii\helpers\Html;use yii\helpers\Url;
|
||
$_csrf_backend = Yii::$app->request->csrfToken;
|
||
?>
|
||
|
||
|
||
<!--列排序-->
|
||
<?=Html::cssFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/dragtable/dragtable.css?v=2.0.15')?>
|
||
<!--列排序-->
|
||
<!--列宽调整-->
|
||
<?=Html::cssFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/jquery-resizable-columns/jquery.resizableColumns.min.css?v=0.2.3')?>
|
||
<!--列宽调整-->
|
||
<!--树形表-->
|
||
<?=Html::cssFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/jquery-treegrid/jquery.treegrid.css?v=0.3.0')?>
|
||
<!--树形表-->
|
||
|
||
<!--基础样式-->
|
||
<?=Html::cssFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/bootstrap/bootstrap.min.css?v=5.3.3')?>
|
||
<?=Html::cssFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/bootstrap-icons/bootstrap-icons.css?v=1.11.3')?>
|
||
<?=Html::cssFile('@web/js/plugins/bootstrap-table-V1.23.1/bootstrap-table.min.css?v=1.23.1')?>
|
||
<!--基础样式-->
|
||
|
||
<!--行排序-->
|
||
<?=Html::cssFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/reorder-rows/bootstrap-table-reorder-rows.css?v=1.23.1')?>
|
||
<!--行排序-->
|
||
<!--表头固定-->
|
||
<?=Html::cssFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/sticky-header/bootstrap-table-sticky-header.css?v=1.23.1')?>
|
||
<!--表头固定-->
|
||
|
||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/jquery/jquery.min.js?v=3.7.1')?>
|
||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/jquery-ui/jquery-ui.min.js?v=1.11.1')?>
|
||
<!--数据导出-->
|
||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/tableExport/tableExport.min.js?v=1.29.0')?>
|
||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/tableExport/jspdf.umd.min.js?v=1.29.0')?>
|
||
<!--数据导出-->
|
||
<!--列排序-->
|
||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/dragtable/dragtable.js?v=2.0.15')?>
|
||
<!--列排序-->
|
||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/jquery/jquery.tablednd.min.js?v=1.0.5')?>
|
||
<!--列宽调整-->
|
||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/jquery-resizable-columns/jquery.resizableColumns.min.js?v=0.1.0')?>
|
||
<!--列宽调整-->
|
||
<!--树形表-->
|
||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/jquery-treegrid/jquery.treegrid.min.js?v=0.3.0')?>
|
||
<!--树形表-->
|
||
|
||
|
||
<!-- 基础JS-->
|
||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/bootstrap/bootstrap.bundle.min.js?v=5.3.3')?>
|
||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/bootstrap-table.min.js?v=1.23.1')?>
|
||
|
||
|
||
<!--cookie缓存数据-->
|
||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/cookie/bootstrap-table-cookie.min.js?v=1.23.1')?>
|
||
<!--cookie缓存数据-->
|
||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/auto-refresh/bootstrap-table-auto-refresh.min.js?v=1.23.1')?>
|
||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/locale/bootstrap-table-zh-CN.min.js?v=1.23.1')?>
|
||
|
||
<!-- 基础JS-->
|
||
|
||
|
||
|
||
<!--表数据导出-->
|
||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/export/bootstrap-table-export.min.js?v=1.23.1')?>
|
||
<!--表数据导出-->
|
||
<!--列筛选过滤-->
|
||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/filter-control/bootstrap-table-filter-control.min.js?v=1.23.1')?>
|
||
<!--列筛选过滤-->
|
||
<!--行分组-->
|
||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/group-by-v2/bootstrap-table-group-by.min.js?v=1.23.1')?>
|
||
<!--行分组-->
|
||
<!--复合排序-->
|
||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/multiple-sort/bootstrap-table-multiple-sort.js?v=1.23.1')?>
|
||
<!--复合排序-->
|
||
<!--表格打印-->
|
||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/print/bootstrap-table-print.min.js?v=1.23.1')?>
|
||
<!--表格打印-->
|
||
<!--列排序-->
|
||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/reorder-columns/bootstrap-table-reorder-columns.min.js?v=1.23.1')?>
|
||
<!--列排序-->
|
||
<!--行排序-->
|
||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/reorder-rows/bootstrap-table-reorder-rows.min.js?v=1.23.1')?>
|
||
<!--行排序-->
|
||
<!--列宽调整-->
|
||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/resizable/bootstrap-table-resizable.min.js?v=1.23.1')?>
|
||
<!--列宽调整-->
|
||
<!--表头固定-->
|
||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/sticky-header/bootstrap-table-sticky-header.min.js?v=1.23.1')?>
|
||
<!--表头固定-->
|
||
<!--高级搜索-->
|
||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/toolbar/bootstrap-table-toolbar.min.js?v=1.23.1')?>
|
||
<!--高级搜索-->
|
||
<!--树形表-->
|
||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/treegrid/bootstrap-table-treegrid.min.js?v=1.23.1')?>
|
||
<!--树形表-->
|
||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/addrbar/bootstrap-table-addrbar.min.js?v=1.23.1')?>
|
||
<!--表格可编辑-->
|
||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/editable/bootstrap-table-editable.js?v=1.23.1')?>
|
||
<!--表格可编辑-->
|
||
<!--绑定键盘事件监听-->
|
||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/key-events/bootstrap-table-key-events.min.js?v=1.23.1')?>
|
||
<!--绑定键盘事件监听-->
|
||
|
||
<style>
|
||
.select{
|
||
width: 100%;
|
||
}
|
||
.operateIcon {
|
||
margin-right: 10px;
|
||
}
|
||
.uppercase {
|
||
text-transform: uppercase;
|
||
}
|
||
td.success {
|
||
background: green;
|
||
color: white;
|
||
}
|
||
#forTable {
|
||
width:98%;
|
||
padding-left:1%;
|
||
}
|
||
</style>
|
||
<div class="wrapper wrapper-content">
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<div class="ibox float-e-margins">
|
||
<div class="ibox-content">
|
||
|
||
<div class="col-sm-12" id="forTable">
|
||
<div id="toolbar">
|
||
<button id="remove" class="btn btn-danger" disabled>
|
||
<i class="fa fa-trash"></i>
|
||
</button>
|
||
<button id="add" class="btn btn-primary">
|
||
<i class="fa fa-plus"></i>
|
||
</button>
|
||
<div class="btn-group">
|
||
<select id="select" class="form-control" name="filterAlgorithm">
|
||
<option value="and" selected>全部符合</option>
|
||
<option value="or">满足任一</option>
|
||
</select>
|
||
<button class="btn btn-secondary" id="filterBy" style="width:80px;">筛选</button>
|
||
</div>
|
||
</div>
|
||
<table id="table">
|
||
</table>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
var $table = $('#table')
|
||
var $remove = $('#remove')
|
||
var $add = $('#add')
|
||
var selections = []
|
||
const dataUrl = "<?=Url::toRoute(['json'])?>" //获取数据的链接
|
||
const dataSaveUrl = "<?=Url::toRoute(['save'])?>" //保存数据的链接
|
||
var icons = {
|
||
detailOpen:"bi-toggle-on",
|
||
detailClose:"bi-toggle-off",
|
||
advancedSearchIcon: 'bi-search',
|
||
//bi-*或fa-*，取决于图标前缀配置
|
||
}
|
||
var sortPriority = [{"sortName": "title","sortOrder":"desc"},{"sortName":"des","sortOrder":"desc"}]
|
||
|
||
var columns2 = [
|
||
[
|
||
{
|
||
colspan: 2,
|
||
align: 'center',
|
||
valign: 'middle',
|
||
title: '选择'
|
||
},
|
||
{
|
||
colspan: 2,
|
||
align: 'center',
|
||
valign: 'middle',
|
||
title: '详情'
|
||
},
|
||
{
|
||
title: '操作',
|
||
field: 'options',
|
||
rowspan: 2,
|
||
class: 'success',
|
||
align: 'center',
|
||
valign: 'middle',
|
||
sortable: true,
|
||
width:80,
|
||
widthUnit:"px",
|
||
halign: 'left',
|
||
clickToSelect:false,
|
||
formatter: operateFormatter,
|
||
footerFormatter: TextCountFormatter,
|
||
events: 'operateEvents',
|
||
visible:true,
|
||
cellStyle:'cellStyle',
|
||
filterControl:"select",
|
||
searchable:false
|
||
}
|
||
],
|
||
[
|
||
{
|
||
field: 'state',
|
||
checkbox: true,
|
||
rowspan: 2,
|
||
align: 'center',
|
||
valign: 'middle',
|
||
width:10,
|
||
widthUnit:"px",
|
||
escape:true,
|
||
//忽略该列的传值
|
||
formatter:stateFormatter,
|
||
footerFormatter:"CountTitleFormatter",
|
||
searchable:false
|
||
},
|
||
{
|
||
title: 'ID',
|
||
field: 'id',
|
||
rowspan: 2,
|
||
align: 'center',
|
||
valign: 'middle',
|
||
sortable: true,
|
||
width:20,
|
||
widthUnit:"px",
|
||
halign: 'left',
|
||
footerFormatter: NumCountFormatter,
|
||
searchable:false
|
||
}
|
||
],
|
||
[
|
||
{
|
||
title: '标题',
|
||
field: 'title',
|
||
rowspan: 1,
|
||
align: 'center',
|
||
valign: 'middle',
|
||
sortable: true,
|
||
width:120,
|
||
widthUnit:"px",
|
||
halign: 'left',
|
||
footerFormatter: TextCountFormatter,
|
||
searchHighlightFormatter:customSearchFormatter,
|
||
editable: {
|
||
type: 'text',
|
||
title: 'Enter Name',
|
||
validate: function(value) {
|
||
if (!value) {
|
||
return 'The name is required';
|
||
}
|
||
}
|
||
},
|
||
cellStyle:'cellStyle',
|
||
filterControl:"input",
|
||
searchable:false
|
||
},
|
||
{
|
||
title: '代码',
|
||
field: 'des',
|
||
rowspan: 1,
|
||
align: 'center',
|
||
valign: 'middle',
|
||
sortable: true,
|
||
width:80,
|
||
widthUnit:"px",
|
||
halign: 'left',
|
||
footerFormatter: TextCountFormatter,
|
||
searchHighlightFormatter:customSearchFormatter,
|
||
titleTooltip:'英文简写的代码，后期用于权限判断等场景',
|
||
visible:true,
|
||
cellStyle:'cellStyle',
|
||
filterControl:"select",
|
||
searchable:false
|
||
}
|
||
]
|
||
]
|
||
|
||
var columns = [
|
||
{
|
||
align: 'left',
|
||
valign: 'middle',
|
||
width:10,
|
||
widthUnit:"px",
|
||
style:'width:15px',
|
||
escape:true,
|
||
//忽略该列的传值
|
||
formatter:indexFormatter,
|
||
searchable:false
|
||
},
|
||
{
|
||
field: 'state',
|
||
checkbox: true,
|
||
align: 'center',
|
||
valign: 'middle',
|
||
width:10,
|
||
widthUnit:"px",
|
||
escape:true,
|
||
//忽略该列的传值
|
||
formatter:stateFormatter,
|
||
footerFormatter:"CountTitleFormatter",
|
||
searchable:false
|
||
},
|
||
{
|
||
title: 'ID',
|
||
field: 'id',
|
||
align: 'center',
|
||
valign: 'middle',
|
||
sortable: true,
|
||
width:20,
|
||
widthUnit:"px",
|
||
halign: 'left',
|
||
footerFormatter: NumCountFormatter,
|
||
searchable:false
|
||
},
|
||
{
|
||
title: '标题',
|
||
field: 'title',
|
||
rowspan: 1,
|
||
align: 'center',
|
||
valign: 'middle',
|
||
sortable: true,
|
||
width:120,
|
||
widthUnit:"px",
|
||
halign: 'left',
|
||
footerFormatter: TextCountFormatter,
|
||
searchHighlightFormatter:customSearchFormatter,
|
||
editable:titleEditor,
|
||
cellStyle:'cellStyle',
|
||
filterControl:"input",
|
||
searchable:true
|
||
},
|
||
{
|
||
title: '代码',
|
||
field: 'des',
|
||
align: 'center',
|
||
valign: 'middle',
|
||
sortable: true,
|
||
editable:$.fn.editableTable,
|
||
width:80,
|
||
widthUnit:"px",
|
||
halign: 'left',
|
||
footerFormatter: TextCountFormatter,
|
||
searchHighlightFormatter:customSearchFormatter,
|
||
titleTooltip:'英文简写的代码，后期用于权限判断等场景',
|
||
visible:true,
|
||
cellStyle:'cellStyle',
|
||
filterControl:"select",
|
||
searchable:true
|
||
},
|
||
{
|
||
title: '操作',
|
||
field: 'options',
|
||
// class: 'success',
|
||
align: 'center',
|
||
valign: 'middle',
|
||
sortable: false,
|
||
width:80,
|
||
widthUnit:"px",
|
||
halign: 'left',
|
||
clickToSelect:false,
|
||
formatter: operateFormatter,
|
||
footerFormatter: TextCountFormatter,
|
||
events: 'operateEvents',
|
||
visible:true,
|
||
cellStyle:'cellStyle',
|
||
filterControl:"select",
|
||
searchable:false
|
||
}
|
||
]
|
||
|
||
// 定义表格操作
|
||
const options = {
|
||
// locale:"zh-CN",
|
||
//中文(直接JS添加了中文引用时可以不用设置
|
||
toolbar:"#toolbar",
|
||
//指定工具栏
|
||
autoRefresh:true,
|
||
//自动刷新
|
||
columns:columns,
|
||
//定义表列标题
|
||
showColumns: true,
|
||
//列标题筛选
|
||
showColumnsToggleAll:true,
|
||
//一键筛选全部列
|
||
showColumnsSearch:true,
|
||
//筛选列时可搜索列名
|
||
showRefresh: true,
|
||
//刷新
|
||
showToggle: true,
|
||
//切换卡片视图
|
||
showExport:true,
|
||
exportTypes:['json', 'xml', 'csv', 'txt', 'sql', 'excel', 'pdf'],
|
||
//导出(TBD PDF导出时中文乱码，待修正）
|
||
search: true,
|
||
//搜索
|
||
showSearchClearButton:true,
|
||
//搜索框可清空
|
||
showSearchButton:false,
|
||
// 显示搜索图标
|
||
searchHighlight:true,
|
||
//高亮搜索结果
|
||
visibleSearch:true,
|
||
//只在可视单元格内搜索
|
||
advancedSearch:true,
|
||
idTable:"advancedTable",
|
||
//高级搜索
|
||
showFullscreen:true,
|
||
// 全屏
|
||
addrbar: true,
|
||
//地址栏 TBD 未调试
|
||
// showHeader:false,
|
||
//关闭表头列标题
|
||
headerStyle:"headerStyle",
|
||
//表头样式定义函数
|
||
showFooter:true,
|
||
//显示表格底部
|
||
footerStyle:"footerStyle",
|
||
//表格底部风格定义函数
|
||
pagination:false,
|
||
//分页
|
||
showPaginationSwitch:true,
|
||
//分页切换
|
||
clickToSelect:false,
|
||
//行点击即选中
|
||
|
||
responseHandler:"responseHandler",
|
||
//获取数据的后续响应操作
|
||
buttonsClass:"secondary",
|
||
//按钮样式（secondary，default,primary,warning,danger,success……）
|
||
detailView:true,
|
||
detailViewIcon:false,
|
||
showDetail:false,
|
||
//行首添加显示详情按钮（图标必须false,否则会在表首添加1列；开启列拖动排序时，需要禁用该项）
|
||
detailFormatter:"detailFormatter",
|
||
//卡片视图格式化操作
|
||
|
||
idField: 'id',
|
||
//指定ID列
|
||
buttons:'Buttons',
|
||
// 添加自定义按钮
|
||
showButtonText:false,
|
||
//显示按钮文字
|
||
// singleSelect:true,
|
||
//设置仅单选
|
||
theadClasses:"thead-dark",
|
||
//表头样式(thead-light,thead-dark) TBD 未调试
|
||
sortClass:"table-active",
|
||
//排序列的样式
|
||
sortReset:true,
|
||
// 在第三次点击的时候重置排序
|
||
totalField:"total",
|
||
dataField:"rows",
|
||
//仅在设置了直接从URL取数据时有效，总数变量、数据集变量
|
||
iconSize:"undefined",
|
||
// 图标大小 undefined，lg,sm
|
||
icons:"icons",
|
||
//自定义图标
|
||
filterControl:false,
|
||
//开启列筛选( TBD 选择式筛选不能正确显示 ，且与搜索功能有些冲突，暂不开启）
|
||
groupBy:false,
|
||
//分组
|
||
groupByField: "des",
|
||
// groupByField: ["des","id"],
|
||
// 按指定字段分组
|
||
showMultiSort:true,
|
||
// sortPriority:"sortPriority",
|
||
//高级筛选（默认筛选条件设置项有问题，暂不设置）
|
||
showPrint:true,
|
||
// printStyles:['https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css'],
|
||
//打印及配置
|
||
reorderableColumns:true,
|
||
//列排序
|
||
useRowAttrFunc:true,
|
||
reorderableRows:true,
|
||
//行排序
|
||
resizable:true,
|
||
// 列宽调整
|
||
stickyHeader: true,
|
||
stickyHeaderOffsetLeft: parseInt($('body').css('padding-left'), 10),
|
||
stickyHeaderOffsetRight: parseInt($('body').css('padding-right'), 10),
|
||
// 固定表头
|
||
rememberOrder:false,
|
||
//记住排序 TBD 仅列标题记录了，暂不开启
|
||
|
||
// treeShowField: 'title',
|
||
// parentIdField: 'pcat_id',
|
||
//树形表 TBD 未调试完成
|
||
editable:true,
|
||
//表格可编辑
|
||
cookie:true,
|
||
cookieIdTable:'NewsCatListTable',
|
||
// COOKIE缓存
|
||
keyEvents: true,
|
||
}
|
||
|
||
function getIdSelections() {
|
||
return $.map($table.bootstrapTable('getSelections'), function (row) {
|
||
return row.id
|
||
})
|
||
}
|
||
|
||
function responseHandler(res) {
|
||
$.each(res.rows, function (i, row) {
|
||
row.state = $.inArray(row.id, selections) !== -1
|
||
})
|
||
return res
|
||
}
|
||
|
||
function test(index) {
|
||
$table.bootstrapTable('toggleDetailView', index);
|
||
}
|
||
|
||
window.operateEvents = {
|
||
'click .like': function (e, value, row, index) {
|
||
console.log(e)
|
||
console.log(value)
|
||
console.log(row)
|
||
console.log(index)
|
||
alert('You click like action, row: ' + JSON.stringify(row))
|
||
},
|
||
'click .remove': function (e, value, row, index) {
|
||
$table.bootstrapTable('remove', {
|
||
field: 'id',
|
||
values: [row.id]
|
||
})
|
||
},
|
||
'click .save': function (e, value, row, index) {
|
||
saveData(datasaveUrl,row)
|
||
},
|
||
'click .editable-click':function (e, value, row, index) {
|
||
console.log('要编辑')
|
||
},
|
||
}
|
||
|
||
//单元格编辑操作
|
||
function titleEditor(value,row,index){
|
||
let options = {
|
||
"url": dataSaveUrl,
|
||
"callback": function(sValue, y) {
|
||
let aPos = DTable.fnGetPosition(this);
|
||
DTable.fnUpdate(sValue, aPos[0], aPos[1])
|
||
},
|
||
"submitdata": function(value, settings) {
|
||
return {
|
||
"row_id": this.parentNode.getAttribute("id"),
|
||
"column": DTable.fnGetPosition(this)[2]
|
||
}
|
||
},
|
||
"width": "90%",
|
||
"height": "100%"
|
||
}
|
||
return $.fn.editableTable(options);
|
||
}
|
||
|
||
// 各种格式化操作
|
||
//操作动作列
|
||
function operateFormatter(value, row, index) {
|
||
return [
|
||
'<a class="operateIcon like" onclick="test(this)" title="Like">',
|
||
'<i class="fa fa-heart"></i>',
|
||
'</a> ',
|
||
'<a class="operateIcon view" onclick="test('+index+')" title="浏览">',
|
||
'<i class="fa fa-eye"></i>',
|
||
'</a> ',
|
||
'<a class="operateIcon save" href="javascript:void(0)" title="Save">',
|
||
'<i class="fa fa-save"></i>',
|
||
'</a> ',
|
||
'<a class="operateIcon remove" href="javascript:void(0)" title="Remove">',
|
||
'<i class="fa fa-trash"></i>',
|
||
'</a>'
|
||
].join('')
|
||
}
|
||
//搜索匹配项高亮
|
||
function customSearchFormatter(value, searchText){
|
||
console.log(searchText)
|
||
return value.toString().replace(new RegExp('(' + searchText + ')', 'gim'), '<span style="background-color: pink;border: 1px solid red;border-radius:90px;padding:4px">$1</span>')
|
||
}
|
||
// 行内容格式化 卡片视图（仅对当前行生效）
|
||
function detailFormatter(index, row) {
|
||
var html = []
|
||
$.each(row, function (key, value) {
|
||
html.push('<p><kbd>' + key + ':</kbd> ' + value + '</p>')
|
||
})
|
||
return html.join('')
|
||
}
|
||
|
||
// 单元格格式化操作 TBD，根据具体业务需要再作更改
|
||
function indexFormatter(value, row, index) {
|
||
return index+1;
|
||
}
|
||
function stateFormatter(value, row, index) {
|
||
if (index === 2) {
|
||
return {
|
||
disabled: true
|
||
}
|
||
}
|
||
if (index === 1) {
|
||
return {
|
||
disabled: true,
|
||
checked: true
|
||
//指定选中
|
||
}
|
||
}
|
||
return value
|
||
}
|
||
function titleFormatter(value, row) {
|
||
var icon = row.id % 2 === 0 ? 'fa-star' : 'fa-star-and-crescent'
|
||
return '<i class="fa ' + icon + '"></i> ' + value
|
||
}
|
||
|
||
function priceFormatter(value) {
|
||
// 16777215 == ffffff in decimal
|
||
var color = '#' + Math.floor(Math.random() * 6777215).toString(16)
|
||
return '<div style="color: ' + color + '">' +
|
||
'<i class="fa fa-dollar-sign"></i>' +
|
||
value.substring(1) +
|
||
'</div>'
|
||
}
|
||
|
||
//表格底统计格式化操作
|
||
function CountTitleFormatter(){
|
||
return '总计'
|
||
}
|
||
function TextCountFormatter() {
|
||
return ''
|
||
}
|
||
function PriceCountFormatter(data) {
|
||
var field = this.field
|
||
return '$' + data.map(function (row) {
|
||
return +row[field].substring(1)
|
||
}).reduce(function (sum, i) {
|
||
return sum + i
|
||
}, 0)
|
||
}
|
||
function NumCountFormatter(data) {
|
||
return data.length
|
||
}
|
||
|
||
//表格样式
|
||
function cellStyle(value, row, index) {
|
||
var classes = [
|
||
'bg-blue',
|
||
'bg-green',
|
||
'bg-orange',
|
||
'bg-yellow',
|
||
'bg-red'
|
||
]
|
||
|
||
if (index % 2 === 0 && index / 2 < classes.length) {
|
||
return {
|
||
classes: classes[index / 2]
|
||
}
|
||
}
|
||
return {
|
||
css: {
|
||
color: 'blue'
|
||
}
|
||
}
|
||
}
|
||
function footerStyle(column) {
|
||
return {
|
||
id: {
|
||
classes: 'uppercase'
|
||
},
|
||
name: {
|
||
css: {'font-weight': 'normal'}
|
||
},
|
||
price: {
|
||
css: {color: 'red'}
|
||
}
|
||
}[column.field]
|
||
}
|
||
function headerStyle(column) {
|
||
return {
|
||
id: {
|
||
classes: 'uppercase'
|
||
},
|
||
title: {
|
||
css: {background: 'yellow'}
|
||
},
|
||
des: {
|
||
css: {color: 'red'}
|
||
}
|
||
}[column.field]
|
||
}
|
||
|
||
//toolbar按钮操作
|
||
//注入自定义按钮
|
||
function Buttons () {
|
||
return {
|
||
btnAdd: {
|
||
text: '新增一行',
|
||
icon: 'bi-plus',
|
||
event: function () {
|
||
alert('将添加新一行数据')
|
||
},
|
||
attributes: {
|
||
title: '新增一行数据'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 复合筛选
|
||
$('#filterBy').click(function () {
|
||
var filterAlgorithm = $('[name="filterAlgorithm"]').val()
|
||
|
||
$table.bootstrapTable('refreshOptions', {
|
||
filterOptions: {
|
||
filterAlgorithm: filterAlgorithm
|
||
}
|
||
})
|
||
|
||
$table.bootstrapTable('filterBy', {
|
||
id: 3,
|
||
title: '价格'
|
||
})
|
||
})
|
||
// 保存编辑后的数据 TBD
|
||
$table.on('editable-save.bs.table', function(e, field, row, oldValue, $el) {
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "your_update_url",
|
||
data: {name: row.name, price: row.price, id: row.id},
|
||
dataType: "json",
|
||
success: function(response) {
|
||
// 处理服务器响应
|
||
},
|
||
error: function(response) {
|
||
// 处理错误情况
|
||
}
|
||
});
|
||
});
|
||
|
||
// 更新表格参数 TBD 未调试
|
||
function refreshTable(key,value){
|
||
$table.bootstrapTable('refreshOptions', {
|
||
key: value
|
||
})
|
||
}
|
||
// 表格初始化
|
||
function initTable() {
|
||
$table.bootstrapTable('destroy').bootstrapTable(options)
|
||
$table.on('check.bs.table uncheck.bs.table ' +
|
||
'check-all.bs.table uncheck-all.bs.table',
|
||
function () {
|
||
$remove.prop('disabled', !$table.bootstrapTable('getSelections').length)
|
||
|
||
// save your data, here just save the current page
|
||
selections = getIdSelections()
|
||
// push or splice the selections if you want to save all data selections
|
||
})
|
||
$table.on('all.bs.table', function (e, name, args) {
|
||
// console.log(name, args)
|
||
})
|
||
$remove.click(function () {
|
||
var ids = getIdSelections()
|
||
$table.bootstrapTable('remove', {
|
||
field: 'id',
|
||
values: ids
|
||
})
|
||
$remove.prop('disabled', true)
|
||
})
|
||
}
|
||
|
||
// 表格之外的方法 S
|
||
// 网络获取数据
|
||
function getData(url){
|
||
var _data = {
|
||
'_csrf-backend': "<?=$_csrf_backend ;?>"
|
||
}
|
||
return fetch(url, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
// 'Content-Type': 'application/x-www-form-urlencoded'
|
||
},
|
||
body: JSON.stringify(_data)
|
||
})
|
||
.then(
|
||
function(res){
|
||
if(res.ok) {
|
||
return res.json();
|
||
}else{
|
||
throw new Error('网络连接出现问题.');
|
||
}
|
||
}
|
||
)
|
||
.then(
|
||
function(data){
|
||
return data;
|
||
}
|
||
)
|
||
.catch(error => console.error('Error:', error));
|
||
}
|
||
//保存数据
|
||
function saveData(url,data){
|
||
data['_csrf-backend'] = "<?=$_csrf_backend ;?>";
|
||
|
||
return fetch(url, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify(data)
|
||
})
|
||
.then(
|
||
function(res){
|
||
if(res.ok) {
|
||
return res.json();
|
||
}else{
|
||
throw new Error('网络连接出现问题.');
|
||
}
|
||
}
|
||
)
|
||
.then(
|
||
function(data){
|
||
return data;
|
||
}
|
||
)
|
||
.catch(error => console.error('Error:', error));
|
||
}
|
||
|
||
// 表格之外的方法 E
|
||
|
||
// 启动时页面加载
|
||
$(function() {
|
||
initTable()
|
||
getData(dataUrl).then(
|
||
function(data){
|
||
var _emptyRow = {id:''}
|
||
$table.bootstrapTable('append',data.rows) //向表格追加数据
|
||
$table.bootstrapTable('append',_emptyRow) //添加空白行
|
||
$table.bootstrapTable('scrollTo','bottom') //添加完数据转至表格底
|
||
}
|
||
)
|
||
})
|
||
</script>
|