Initial commit，修正
This commit is contained in:
@@ -0,0 +1,845 @@
|
||||
<?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>
|
||||
Reference in New Issue
Block a user