1132 lines
38 KiB
PHP
1132 lines
38 KiB
PHP
<?php
|
||
|
||
#
|
||
# @Author: fm453
|
||
# @Date: 2024/7/25
|
||
# @updated: 下午4:54
|
||
# @Email: 1280880631@qq.com
|
||
|
||
use yii\helpers\Html;use yii\helpers\Url;
|
||
|
||
$_csrf_backend = Yii::$app->request->csrfToken;
|
||
?>
|
||
|
||
<?= Html::cssFile('@web/js/plugins/jquery-ui/jquery-ui-1.13.3.css?v=1.13.3') ?>
|
||
<!--基础样式-->
|
||
<?= 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/dependence/jquery-resizable-columns/jquery.resizableColumns.min.css?v=0.2.3') ?>
|
||
<!--列宽调整-->
|
||
<!--列排序-->
|
||
<?= 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/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::cssFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/jquery-treegrid/jquery.treegrid.css?v=0.3.0') ?>
|
||
<!--树形表-->
|
||
|
||
|
||
<?= Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/jquery/jquery.min.js?v=3.7.1') ?>
|
||
<?= Html::jsFile('@web/js/plugins/jquery-ui/jquery-ui-1.13.3.js?v=1.13.3') ?>
|
||
<!--数据导出-->
|
||
<?= Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/pdfmake/pdfmake.js?v=0.2.10') ?>
|
||
<?= Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/pdfmake/vfs_fonts.js?v=0.2.10') ?>
|
||
<?= Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/tableExport/tableExport.min.js?v=1.29.0') ?>
|
||
<!--@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/jeditable/jquery.jeditable.js') ?>
|
||
<!--表格编辑需要引入该插件-->
|
||
<?= 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>
|
||
:root {
|
||
--bs-body-font-size: 1.5rem;
|
||
}
|
||
|
||
.btn {
|
||
--bs-btn-font-size: 1.5rem;
|
||
}
|
||
|
||
.btn.dropdown-toggle > span.caret {
|
||
display: none;
|
||
}
|
||
|
||
.select {
|
||
width: 100%;
|
||
}
|
||
|
||
a {
|
||
text-decoration: none;
|
||
color: black;
|
||
}
|
||
|
||
/* 去除类名为no-underline的所有超链接下划线 */
|
||
a.no-underline {
|
||
text-decoration: none;
|
||
}
|
||
|
||
.operateIcon {
|
||
margin-right: 10px;
|
||
font-size: 25px;
|
||
}
|
||
|
||
.uppercase {
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
td.bg-blue {
|
||
background: cadetblue;
|
||
color: white;
|
||
}
|
||
|
||
td.bg-green {
|
||
background: greenyellow;
|
||
color: black;
|
||
}
|
||
|
||
td.bg-orange {
|
||
background: coral;
|
||
color: whitesmoke;
|
||
}
|
||
|
||
td.bg-yellow {
|
||
background: yellow;
|
||
color: black;
|
||
}
|
||
|
||
td.bg-red {
|
||
background: darkred;
|
||
color: whitesmoke;
|
||
}
|
||
|
||
#forTable {
|
||
width: 98%;
|
||
padding-left: 1%;
|
||
}
|
||
|
||
#table {
|
||
th, td {
|
||
border: 1px solid #0095f6;
|
||
}
|
||
|
||
td.input-group {
|
||
display: inline-table;
|
||
}
|
||
|
||
td.input-group > .form-control {
|
||
width: 100%;
|
||
}
|
||
}
|
||
</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">
|
||
<table id="table">
|
||
</table>
|
||
</div>
|
||
<div class="col-sm-12">
|
||
<div class="hr-line-dashed"></div>
|
||
<div class="form-group">
|
||
<div class="col-sm-12 col-sm-offset-3">
|
||
<button class="btn btn-primary" onclick="confirmSelect()">确认</button>
|
||
<button class="btn btn-warning" onclick="cancelSelect()">取消</button>
|
||
<button class="btn btn-danger" onclick="clearSelect()">清除</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let $table = $('#table');
|
||
let _id = "<?=$id;?>" //有此值且非空时，则过滤掉相应的列数据
|
||
let selected_id = "<?=$selected_id;?>" //已选中的列
|
||
let _callback = "<?=$callback;?>"
|
||
let selections = []
|
||
const dataUrl = "<?=Url::toRoute(['json'])?>" //获取数据的链接
|
||
const dataSaveUrl = "<?=Url::toRoute(['save'])?>" //保存数据的链接
|
||
const dataAjaxUrl = "<?=Url::toRoute(['ajax'])?>" //ajax操作数据的链接（软删除、状态切换等）
|
||
let icons = {
|
||
detailOpen: "bi-toggle-on",
|
||
detailClose: "bi-toggle-off",
|
||
advancedSearchIcon: 'bi-search',
|
||
//bi-*或fa-*，取决于图标前缀配置
|
||
}
|
||
let sortPriority = [{"sortName": "title", "sortOrder": "desc"}, {"sortName": "des", "sortOrder": "desc"}]
|
||
|
||
let optionCol = {
|
||
title: '操作',
|
||
field: 'options',
|
||
align: 'center',
|
||
valign: 'middle',
|
||
sortable: false,
|
||
// width:80,
|
||
// widthUnit:"px",
|
||
halign: 'left',
|
||
clickToSelect:false,
|
||
formatter: operateFormatter,
|
||
footerFormatter: TextCountFooter,
|
||
events: 'operateEvents',
|
||
visible:true,
|
||
cellStyle:'cellStyle',
|
||
searchable:false
|
||
}
|
||
let columns = dynamicHeader();
|
||
function dynamicHeader(){
|
||
var thead = [{
|
||
field: 'rowIndexId',
|
||
align: 'left',
|
||
valign: 'middle',
|
||
width:20,
|
||
widthUnit:"px",
|
||
style:'min-width:15px',
|
||
escape:true,
|
||
//忽略该列的传值
|
||
formatter:indexFormatter,
|
||
searchable:false
|
||
},
|
||
{
|
||
field: 'state',
|
||
checkbox: true,
|
||
align: 'center',
|
||
valign: 'middle',
|
||
width:20,
|
||
widthUnit:"px",
|
||
escape:true,
|
||
//忽略该列的传值
|
||
formatter:stateFormatter,
|
||
footerFormatter:CountTitleFooter,
|
||
searchable:false
|
||
}];
|
||
var cs = <?=$columns;?>;
|
||
// console.log('自定义列',cs)
|
||
for(col in cs){
|
||
thead.push(cs[col]);
|
||
}
|
||
thead.push(optionCol);
|
||
return thead;
|
||
}
|
||
|
||
// 定义表格操作
|
||
const options = {
|
||
locale: "zh-CN",
|
||
//中文(直接JS添加了中文引用时可以不用设置
|
||
columns: columns,
|
||
//定义表列标题
|
||
|
||
showColumns: true,
|
||
//列控制-显示或隐藏
|
||
showColumnsToggleAll: true,
|
||
//一键筛选全部列
|
||
showColumnsSearch: true,
|
||
//筛选列时可搜索列名
|
||
|
||
showRefresh: true,
|
||
//刷新
|
||
autoRefresh: true,
|
||
//自动刷新
|
||
showToggle: true,
|
||
//切换卡片视图
|
||
|
||
showExport: false,
|
||
exportDataType: 'all',
|
||
// basic, all, selected
|
||
exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel', 'pdf'],
|
||
//pdf 不支持中文，暂时不搞
|
||
exportFooter: true,
|
||
exportOptions: OptionsFuncExport,
|
||
//导出(TBD PDF导出时中文乱码，已部分修正，待优化）
|
||
|
||
search: true,
|
||
//搜索
|
||
showSearchClearButton: true,
|
||
//搜索框可清空
|
||
showSearchButton: false,
|
||
// 显示搜索图标
|
||
searchHighlight: true,
|
||
//高亮搜索结果,开启高亮后，需要对搜索结果中单元格内容进行重新格式化才能正常被修改，否则乱码
|
||
visibleSearch: true,
|
||
//只在可视单元格内搜索
|
||
advancedSearch: true,
|
||
// searchText:"演示预置搜索文字",
|
||
// searchAccentNeutralise:true,
|
||
// 应该是支持正则表达式，还没测试
|
||
// trimOnSearch:true,
|
||
idTable: "advancedTable",
|
||
//高级搜索,搜索格式化后结果、高亮搜索结果 2个选项都禁用，才能正常使用单元格编辑功能
|
||
|
||
showFullscreen: false,
|
||
// 全屏
|
||
addrbar: true,
|
||
//地址栏 TBD 未调试
|
||
// showHeader:false,
|
||
//关闭表头列标题
|
||
headerStyle: headerStyle,
|
||
//表头样式定义函数
|
||
stickyHeader: true,
|
||
stickyHeaderOffsetLeft: parseInt($('body').css('padding-left'), 10),
|
||
stickyHeaderOffsetRight: parseInt($('body').css('padding-right'), 10),
|
||
// 固定表头
|
||
showFooter: true,
|
||
//显示表格底部
|
||
footerStyle: footerStyle,
|
||
//表格底部风格定义函数
|
||
|
||
pagination: false,
|
||
//分页
|
||
showPaginationSwitch: true,
|
||
//分页切换
|
||
clickToSelect: true,
|
||
//行点击即选中
|
||
undefinedText: 'N/A',
|
||
// 空值默认文本
|
||
|
||
// url:dataUrl,
|
||
//从网络获取数据
|
||
ajaxOptions: window.ajaxOptions,
|
||
//未生效
|
||
responseHandler: resHandler,
|
||
//获取数据的后续响应操作
|
||
|
||
buttonsClass: "primary",
|
||
//按钮样式（secondary，default,primary,warning,danger,success……）
|
||
buttonsOrder: ['refresh', 'paginationSwitch', 'toggle', 'columns', 'advancedSearch', 'print', 'export', 'fullscreen'],
|
||
buttons: optionsFuncButtons,
|
||
// 添加自定义按钮
|
||
showButtonText: false,
|
||
//显示按钮文字
|
||
|
||
detailView: true,
|
||
detailViewIcon: false,
|
||
showDetail: false,
|
||
//行首添加显示详情按钮（图标必须false,否则会在表首添加1列；开启列拖动排序时，需要禁用该项）
|
||
detailFormatter: detailFormatter,
|
||
//卡片视图格式化操作
|
||
|
||
idField: 'id',
|
||
//指定ID列
|
||
// uniqueId: 'rowIndexId', //TBD该字段未生效
|
||
uniqueId: 'id',
|
||
//使用哪一列数据 做唯一序号(必须保证该值记录是唯一的 TBD 未生效
|
||
|
||
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: true,
|
||
//开启列筛选( TBD 选择式筛选不能正确显示 ，且与搜索功能有些冲突，暂不开启）
|
||
groupBy: false,
|
||
//分组
|
||
groupByField: "des",
|
||
// groupByField: ["des","id"],
|
||
// 按指定字段分组
|
||
showMultiSort: true,
|
||
// sortPriority:"sortPriority",
|
||
//高级筛选（默认筛选条件设置项有问题，暂不设置）
|
||
showPrint: false,
|
||
// printStyles:['https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css'],
|
||
//打印及配置
|
||
reorderableColumns: true,
|
||
//列排序
|
||
useRowAttrFunc: false,
|
||
reorderableRows: true,
|
||
//行排序
|
||
resizable: false,
|
||
// 列宽调整 // TBD 有BUG，不好用;已重新用jquery.resizable实现
|
||
|
||
rememberOrder: false,
|
||
//记住排序 TBD 仅列标题记录了，暂不开启
|
||
|
||
// treeShowField: 'title',
|
||
// parentIdField: 'pcat_id',
|
||
//树形表 TBD 未调试完成
|
||
editable: true,
|
||
//表格可编辑；相应地，在需要编辑的列使用参数editable传入编辑设定（注意列参数的editable是函数，不应该是bool值）
|
||
|
||
cookie: false,
|
||
cookieIdTable: 'NewsCatListSelect',
|
||
// COOKIE缓存
|
||
keyEvents: false,
|
||
//使用键盘响应事件，启用后会屏蔽一些键的系统默认响应
|
||
|
||
onDblClickCell: dbClickCellFunc,
|
||
//单元格双击响应事件
|
||
}
|
||
|
||
// 各种options定义函数 S
|
||
//导出功能设定
|
||
function OptionsFuncExport() {
|
||
return {
|
||
fileName: function () {
|
||
return '表格数据导出' + time();
|
||
},
|
||
pdfmake: {
|
||
enabled: true,
|
||
fonts: {
|
||
Roboto: {
|
||
normal: 'Alibaba-PuHuiTi-Light.ttf',
|
||
bold: 'Alibaba-PuHuiTi-Bold.ttf',
|
||
italics: 'Alibaba-PuHuiTi-Regular.ttf',
|
||
bolditalics: 'Alibaba-PuHuiTi-Medium.ttf'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
//注入自定义按钮
|
||
function optionsFuncButtons() {
|
||
return {}
|
||
}
|
||
|
||
window.ajaxOptions = {
|
||
beforeSend: function (xhr) {
|
||
xhr.setRequestHeader('csrf-param', '_csrf-backend')
|
||
xhr.setRequestHeader('csrf-token', "<?=$_csrf_backend;?>")
|
||
}
|
||
}
|
||
// 各种options定义函数 E
|
||
|
||
// cloumns>>events 各列预定义事件注入 S
|
||
window.operateEvents = {
|
||
'click .select': function (e, value, row, index) {
|
||
parent.selectCat(row.title,row.id,_callback,_id)
|
||
},
|
||
'click .remove': function (e, value, row, index) {
|
||
confirmRemoveRow(row, index)
|
||
},
|
||
'click .view': function (e, value, row, index) {
|
||
toggleDetail(index);
|
||
},
|
||
'click .save': function (e, value, row, index) {
|
||
var res = mySaveData(dataSaveUrl, row)
|
||
// console.log('数据保存结果', res)
|
||
|
||
},
|
||
'click .editable-click': function (e, value, row, index) {
|
||
// console.log('要编辑', value, row, index)
|
||
},
|
||
}
|
||
// cloumns>>events 各列预定义事件注入 S
|
||
|
||
// 获取已选择的ID
|
||
function getIdSelections() {
|
||
return $.map($table.bootstrapTable('getSelections'), function (row) {
|
||
return row.id
|
||
})
|
||
}
|
||
|
||
//网络数据加载成功时执行
|
||
function resHandler(res) {
|
||
$.each(res.rows, function (i, row) {
|
||
row.state = $.inArray(row.id, selections) !== -1
|
||
})
|
||
return res
|
||
}
|
||
|
||
//切换显示详情卡片视图
|
||
function toggleDetail(index) {
|
||
$table.bootstrapTable('toggleDetailView', index);
|
||
}
|
||
|
||
//单元格编辑操作
|
||
//单元格双击时，选中当前列
|
||
function dbClickCellFunc(field, value, row, $cell) {
|
||
// 双击单元格时的操作
|
||
// console.log('双击了单元格，列：', field, '，值：', value, '，行数据：', row);
|
||
parent.selectCat(row.title,row.id,_callback,_id)
|
||
}
|
||
|
||
//实现单元格编辑操作，必须为对应列设置单元格格式函数（在cloumns中的formatter参数项设定）
|
||
function textEditor(index, row, element) {
|
||
//文本内容编辑
|
||
// console.log(index,row,element)
|
||
let _this = this;
|
||
return {
|
||
id: options.idField,
|
||
name: _this.field,
|
||
//提交到服务端用到的id跟name的表单键名{id:'',title:'XXX'}
|
||
type: 'text',
|
||
//编辑内容类型 defaults,text,textarea,select,
|
||
tooltip: "双击编辑",
|
||
placeholder: "请添加数据",
|
||
ajaxoptions: {
|
||
url: dataSaveUrl,
|
||
dataType: 'json'
|
||
},
|
||
target: dataSaveUrl,
|
||
// target: function(value){
|
||
// console.log(value)
|
||
// },
|
||
// target设置为网址，刚向网址发送新数据；设置则函数，则需要自行处理相关的逻辑
|
||
|
||
// event:'',
|
||
// 绑定事件，一旦设置，会中断原本功能；禁止设置
|
||
|
||
// 数据保存网址
|
||
callback: function (res, settings) {
|
||
//服务端返回的结果(需要服务端返回完整的一行数据
|
||
// console.log('接收到服务端数据',res)
|
||
if (res.code == 200) {
|
||
row[_this.field] = res.data[_this.field];
|
||
var d = titleFormatter(res.data[_this.field], row, index)
|
||
$(this).html(d);
|
||
}
|
||
},
|
||
submitdata: function (value, settings) {
|
||
//2个参数 ，单元格原始数值、editable设置
|
||
// 补充提交到服务端的数据
|
||
// console.log('保存前数据',value)
|
||
var data = {
|
||
id: row.id,
|
||
"row_id": _this.fieldIndex,
|
||
//行号
|
||
"column_id": _this.colspanIndex,
|
||
//列号
|
||
'_csrf-backend': "<?=$_csrf_backend;?>",
|
||
};
|
||
// console.log('合并提交的数据',data)
|
||
// 返回的数据要合并到提交保存的表单中
|
||
return data;
|
||
},
|
||
noEditFormatter: function (value, row, index, field) {
|
||
//该函数可以设置禁止编辑参数
|
||
if (row['no_edit']) {
|
||
return '<code>' + value + '</code>';
|
||
}
|
||
//在服务端数据设置了该项为不可编辑时，禁止编辑
|
||
},
|
||
|
||
data: row[this.field],
|
||
// data为进入编辑后的默认内容，没必要不设置
|
||
//该设置针对做过单元格内容重新格式化显示的，有用，避免编辑时出现其他错误格式
|
||
|
||
// loadurl:'',
|
||
// loadtype:"GET",
|
||
// loadurl:"",
|
||
// loadtext:"加载中……",
|
||
// loaddata: {},
|
||
// 从别处加载指定类型及数据
|
||
|
||
onblur: 'cancel',
|
||
// 失焦时的动作；submit ,cancle, function();启用tab按钮响应时应该禁用
|
||
|
||
cssclass: "",
|
||
//为格式化后的输入表单设置样式类
|
||
style: "min-width:200px;",
|
||
// style 为格式化后的输入表单设置样式
|
||
width: "99%",
|
||
height: "100%"
|
||
}
|
||
}
|
||
|
||
// 各种格式化操作 S
|
||
//搜索匹配项高亮 //TBD,这里提前调整了bootstrap-table的searchHighlightFormatter函数(添加4个参数），代码在1808行，主程序函数initRow
|
||
function customSearchFmt(value, searchText, row, index, field, id) {
|
||
// console.log('自定义搜索高亮',value, searchText,row,index,field,id)
|
||
// 此功能仅普通搜索时有效
|
||
if (!row[field]) {
|
||
return '';
|
||
}
|
||
if (row['no_edit'] === 1) {
|
||
return value.toString().replace(new RegExp('(' + searchText + ')', 'gim'), '<span style="background-color: pink;border: 1px solid red;border-radius:90px;padding:4px">$1</span>');
|
||
} else {
|
||
var regex = new RegExp('>(.*?)<\/a>', 'gim'),
|
||
str = value,
|
||
newValue = value,
|
||
res;
|
||
var match = regex.exec(value)
|
||
if (match !== null) {
|
||
str = match[1];
|
||
console.log('原始值', str)
|
||
if (str === 'N/A') {
|
||
return value;
|
||
}
|
||
// res = str.toString().replace(new RegExp('(' + searchText + ')', 'gim'), '<span style="background-color: pink;border: 1px solid red;border-radius:90px;padding:4px">$1</span>');
|
||
res = str.toString().replace(new RegExp('(' + searchText + ')', 'gim'), '<span style="background-color: pink;border: 1px solid red;border-radius:90px;padding:4px">$1</span>');
|
||
console.log('替换值', res)
|
||
var arr = newValue.split(new RegExp('(' + str + ')', 'gim'))
|
||
console.log('美化值分割数组', arr)
|
||
if (arr.length === 5) {
|
||
arr['3'] = res
|
||
} else if (arr.length === 3) {
|
||
arr['1'] = res
|
||
}
|
||
return arr.join('')
|
||
}
|
||
}
|
||
}
|
||
|
||
// 行内容格式化 卡片视图（仅对当前行生效）
|
||
function detailFormatter(index, row) {
|
||
var html = []
|
||
$.each(row, function (key, value) {
|
||
html.push('<p><kbd>' + key + ':</kbd> ' + value + '</p>')
|
||
})
|
||
return html.join('')
|
||
}
|
||
|
||
// formatter,单元格格式化操作 根据具体业务需要再作更改
|
||
function indexFormatter(value, row, index, field) {
|
||
// 行首序号标记
|
||
return index + 1;
|
||
}
|
||
|
||
function stateFormatter(value, row, index, field) {
|
||
// 行选中状态预设
|
||
var state = {
|
||
disabled: false,
|
||
//是否可选
|
||
checked: false
|
||
//是否选中
|
||
}
|
||
// console.log('已选中的ID',selected_id)
|
||
if(row.id>0 && row.id == selected_id){
|
||
row['_isSelected'] = true;
|
||
}
|
||
if (row['_isSelected']) {
|
||
state.checked = true;
|
||
}
|
||
if (row['_isUnselectable']) {
|
||
state.disabled = true;
|
||
}
|
||
return state;
|
||
}
|
||
|
||
//操作列的格式化
|
||
let defaultOperater = [
|
||
// '<a class="operateIcon editable-click" href="javascript:void(0)" title="Like">',
|
||
// '<i class="fa fa-pencil-square"></i>',
|
||
// '</a> ',
|
||
'<a class="operateIcon view" href="javascript:void(0)" title="查看详情">',
|
||
'<i class="fa fa-eye"></i>',
|
||
'</a> ',
|
||
'<a class="operateIcon save" href="javascript:void(0)" title="保存">',
|
||
'<i class="fa fa-save"></i>',
|
||
'</a> ',
|
||
'<a class="operateIcon remove" href="javascript:void(0)" title="移除">',
|
||
'<i class="fa fa-trash"></i>',
|
||
'</a>'
|
||
];
|
||
function operateFormatter(value, row, index) {
|
||
if(!row.id) return '';
|
||
var ops = <?=$operator;?>;
|
||
// console.log('自定义操作项',ops)
|
||
if(!ops) return defaultOperater.join('');
|
||
var html = '';
|
||
for(op in ops){
|
||
var _op = ops[op];
|
||
var func = _op.func || ' href="javascript:void(0)"';
|
||
var _html = '';
|
||
_html += '<a class="operateIcon '+ _op.class +' '+ func +' title="'+ _op.title +'">';
|
||
_html += '<i class="fa fa-'+ _op.icon +'"></i>';
|
||
_html += '</a>';
|
||
if(row.id == selected_id && op=='select' ){
|
||
_html = '';
|
||
}
|
||
html += _html;
|
||
}
|
||
return html;
|
||
}
|
||
|
||
function catFormatter(value, row, index, field) {
|
||
return value ? row['pcat_title'] : '';
|
||
}
|
||
|
||
function titleFormatter(value, row, index, field) {
|
||
var icon = row.id % 2 === 0 ? 'fa-star' : 'fa-star-and-crescent'
|
||
return '<i class="fa ' + icon + '"></i> ' + value
|
||
}
|
||
|
||
function textFormatter(value, row, index) {
|
||
return value || '';
|
||
}
|
||
|
||
function yesnoFormatter(value,row,index){
|
||
if(value>=1){
|
||
return "是"
|
||
}
|
||
if(value<=0){
|
||
return "否"
|
||
}
|
||
}
|
||
|
||
function numFormatter(value, row, index) {
|
||
return value ? Number(value) : 0;
|
||
}
|
||
|
||
function timeFormatter(value,row,index){
|
||
if(!value) return '';
|
||
return formatTime.toStrFull(value*1000);
|
||
}
|
||
function dateFormatter(value,row,index){
|
||
if(!value) return '';
|
||
return formatTime.toStrYMD(value*1000);
|
||
}
|
||
|
||
function priceFormatter(value) {
|
||
// 16777215 == ffffff in decimal
|
||
value = value ? parseFloat(value) : 0;
|
||
|
||
var color = '#' + Math.floor(Math.random() * 16777215).toString(16);
|
||
//随机颜色
|
||
return '<div style="color: ' + color + '">' +
|
||
'<i class="fa fa-cny"></i>' +
|
||
value +
|
||
'</div>'
|
||
}
|
||
|
||
//footerFormatter 表格底统计格式化操作
|
||
function CountTitleFooter() {
|
||
// 统计标题
|
||
return '总计';
|
||
}
|
||
|
||
function CountTotalFooter(data) {
|
||
// 统计总数
|
||
return data.length;
|
||
}
|
||
|
||
function TextCountFooter() {
|
||
//文本格式统计
|
||
return '';
|
||
}
|
||
|
||
function PriceCountFooter(data) {
|
||
// 价格格式统计
|
||
var field = this.field
|
||
return '￥' + data.map(function (row) {
|
||
return +row[field].substring(1)
|
||
}).reduce(function (sum, i) {
|
||
return sum + i
|
||
}, 0)
|
||
}
|
||
|
||
function NumCountFooter(data) {
|
||
//数值累计格式
|
||
var field = this.field;
|
||
return data.map(
|
||
function (row) {
|
||
return row[field] ? Number(row[field]) : 0;
|
||
}
|
||
).reduce(
|
||
function (sum, i) {
|
||
return sum + i
|
||
},
|
||
0
|
||
);
|
||
}
|
||
|
||
// 各种格式化操作 E
|
||
|
||
//表格样式 S
|
||
function cellStyle(value, row, index) {
|
||
return {}
|
||
//暂不设置
|
||
var classes = [
|
||
'bg-blue',
|
||
'bg-green',
|
||
'bg-orange',
|
||
'bg-yellow',
|
||
'bg-red'
|
||
]
|
||
if (index / 5 < classes.length) {
|
||
return {
|
||
css: {},
|
||
classes: classes[index / 5]
|
||
}
|
||
}
|
||
return {
|
||
css: {},
|
||
classes: ''
|
||
}
|
||
}
|
||
|
||
function footerStyle(column) {
|
||
return {
|
||
id: {
|
||
classes: 'uppercase'
|
||
},
|
||
name: {
|
||
css: {'font-weight': 'normal'}
|
||
},
|
||
orderby: {
|
||
css: {color: 'red'}
|
||
}
|
||
}[column.field]
|
||
}
|
||
|
||
function headerStyle(column) {
|
||
return {
|
||
id: {
|
||
classes: 'uppercase'
|
||
},
|
||
title: {
|
||
css: {}
|
||
},
|
||
des: {
|
||
css: {color: 'red'}
|
||
}
|
||
}[column.field]
|
||
}
|
||
|
||
//表格样式 E
|
||
|
||
//toolbar按钮事件 S
|
||
|
||
//toolbar按钮事件 E
|
||
|
||
|
||
// 更新表格参数 TBD 未调试
|
||
function refreshTable(key, value) {
|
||
$table.bootstrapTable('refreshOptions', {
|
||
key: value
|
||
})
|
||
}
|
||
|
||
// 表格初始化
|
||
function myInitTable() {
|
||
$table.bootstrapTable('destroy').bootstrapTable(options)
|
||
}
|
||
|
||
// 表格之外的方法-自定义的 S
|
||
// 网络获取数据
|
||
function myGetData(url) {
|
||
var _data = {
|
||
'_csrf-backend': "<?=$_csrf_backend;?>",
|
||
'id':_id
|
||
}
|
||
|
||
return fetch(url, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
// 'Content-Type': 'application/x-www-form-urlencoded',
|
||
'csrf-param': '_csrf-backend',
|
||
'csrf-token': "<?=$_csrf_backend;?>"
|
||
},
|
||
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 mySaveData(url, data) {
|
||
data['_csrf-backend'] = "<?=$_csrf_backend;?>";
|
||
|
||
return fetch(url, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'csrf-param': '_csrf-backend',
|
||
'csrf-token': "<?=$_csrf_backend;?>"
|
||
},
|
||
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 myDelData(url, data) {
|
||
data['_csrf-backend'] = "<?=$_csrf_backend;?>";
|
||
var url = url + '?op=del';
|
||
$.ajax({
|
||
type: "POST",
|
||
url: url,
|
||
data: data,
|
||
dataType: "json",
|
||
headers: {
|
||
'csrf-param': '_csrf-backend',
|
||
'csrf-token': "<?=$_csrf_backend;?>"
|
||
},
|
||
success: function (res) {
|
||
// 处理服务器响应
|
||
if (res.code == 200) {
|
||
layer.msg(res.msg)
|
||
}
|
||
},
|
||
error: function (res) {
|
||
// 处理错误情况
|
||
console.log(res);
|
||
}
|
||
});
|
||
}
|
||
|
||
//删除行数据
|
||
function confirmRemoveRow(row, index) {
|
||
var str = '您确定要删除该行数据？'
|
||
layer.confirm(str, {
|
||
btn: ['确定', '取消'] //按钮
|
||
}, function () {
|
||
// 点击确定执行下一步的动作
|
||
layer.closeAll();
|
||
//关闭所有的窗口
|
||
myDelData(dataAjaxUrl, row);
|
||
$table.bootstrapTable('remove', {
|
||
field: '$index',
|
||
values: [index]
|
||
})
|
||
}, function () {
|
||
//点击取消执行的动作
|
||
console.log("放弃删除了")
|
||
}
|
||
);
|
||
}
|
||
|
||
//格式化显示日期
|
||
let formatTime = {
|
||
UNITS: {
|
||
'年': 31557600000,
|
||
'月': 2629800000,
|
||
'天': 86400000,
|
||
'小时': 3600000,
|
||
'分钟': 60000,
|
||
'秒': 1000
|
||
},
|
||
|
||
//将毫秒时间戳转换成美化时间
|
||
beauty: function(milliseconds) {
|
||
var beauty = '';
|
||
for (var key in this.UNITS) {
|
||
if (milliseconds >= this.UNITS[key]) {
|
||
beauty = Math.floor(milliseconds / this.UNITS[key]) + key + '前';
|
||
break;
|
||
}
|
||
}
|
||
return beauty || '刚刚';
|
||
},
|
||
//将时间戳转换成格式化时间
|
||
toStrFull: function(dateStr,isTimestamp=false) {
|
||
var date;
|
||
if(isTimestamp){
|
||
date = this.toTime(dateStr)
|
||
}else{
|
||
date = new Date(dateStr)
|
||
}
|
||
|
||
var diff = Date.now() - date.getTime();
|
||
if (diff < this.UNITS['天']) {
|
||
return this.beauty(diff);
|
||
}
|
||
var _format = function(number) {
|
||
return (number < 10 ? ('0' + number) : number);
|
||
};
|
||
return date.getFullYear() + '/' + _format(date.getMonth() + 1) + '/' + _format(date.getDate()) + '-' +
|
||
_format(date.getHours()) + ':' + _format(date.getMinutes());
|
||
},
|
||
//将时间戳转换成格式化时间
|
||
toStrYMD: function(dateStr,isTimestamp=false) {
|
||
var date;
|
||
if(isTimestamp){
|
||
date = this.toTime(dateStr)
|
||
}else{
|
||
date = new Date(dateStr)
|
||
}
|
||
|
||
var diff = Date.now() - date.getTime();
|
||
if (diff < this.UNITS['分']) {
|
||
return this.beauty(diff);
|
||
}
|
||
var _format = function(number) {
|
||
return (number < 10 ? ('0' + number) : number);
|
||
};
|
||
return date.getFullYear() + '/' + _format(date.getMonth() + 1) + '/' + _format(date.getDate());
|
||
},
|
||
toTime: function(str) { //将"yyyy-mm-dd HH:MM:ss"格式的字符串，转化为一个Date对象
|
||
var a = str.split(/[^0-9]/);
|
||
return new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]);
|
||
}
|
||
}
|
||
|
||
function addNewRow(){
|
||
var _emptyRow = {id:''}
|
||
$table.bootstrapTable('append',_emptyRow) //添加空白行
|
||
}
|
||
|
||
// 选择操作相关
|
||
function confirmSelect(){
|
||
selections = getIdSelections();
|
||
var s_id = selections[0];
|
||
var row = $table.bootstrapTable('getRowByUniqueId', s_id);
|
||
parent.selectCat(row.title,row.id,_callback,_id);
|
||
}
|
||
function cancelSelect(){
|
||
parent.layer.closeAll();
|
||
}
|
||
function clearSelect(){
|
||
parent.clearCat(_callback,_id);
|
||
}
|
||
|
||
// 表格之外的方法 E
|
||
|
||
// 启动时页面加载
|
||
$(function () {
|
||
myInitTable()
|
||
// 绑定事件监听
|
||
// 修复官方BUG，高级搜索按钮点击时，去除模态框的fade类以使其显示
|
||
$("button[name='advancedSearch']").on('click',
|
||
function (e) {
|
||
var id = "#avdSearchModal_" + options.idTable;
|
||
$(id).removeClass('fade');
|
||
}
|
||
);
|
||
//高级搜索执行后的动作 TBD 计划使之关联到服务端做即时查询
|
||
$table.on('column-advanced-search.bs.table',
|
||
function (e) {
|
||
console.log('高级搜索已执行')
|
||
}
|
||
);
|
||
$table.on('check.bs.table uncheck.bs.table ' +
|
||
'check-all.bs.table uncheck-all.bs.table',
|
||
function () {
|
||
// save your data, here just save the current page
|
||
selections = getIdSelections()
|
||
// push or splice the selections if you want to save all data selections
|
||
}
|
||
);
|
||
|
||
$('th.resize_able').resizable({
|
||
'handles': 'e'
|
||
//可以控制移动方向的变量，w,e,s,n,
|
||
//e (east东，横向移动）
|
||
})
|
||
//直接引用jquery-ui的大小拖放功能,指定带 class:"resize_able" 类的列表头 th 可拖动
|
||
myGetData(dataUrl).then(
|
||
function (data) {
|
||
if (data) {
|
||
var _rows = [];
|
||
if (typeof (data.rows) == 'object') {
|
||
for (var key in data.rows) {
|
||
_rows.push(data.rows[key]);
|
||
}
|
||
} else {
|
||
_rows = data.rows
|
||
}
|
||
$table.bootstrapTable('append', _rows) //向表格追加数据
|
||
}
|
||
// $table.bootstrapTable('append', {'id':0}) //向表格追加数据
|
||
$table.bootstrapTable('scrollTo', 'bottom') //添加完数据转至表格底
|
||
}
|
||
)
|
||
})
|
||
</script>
|