1248 lines
42 KiB
PHP
1248 lines
42 KiB
PHP
<?php
|
||
|
||
#
|
||
# @Author: fm453
|
||
# @Date: 2024/7/17
|
||
# @updated: 上午3:31
|
||
# @Email: 1280880631@qq.com
|
||
|
||
use yii\helpers\Url;
|
||
use yii\helpers\Html;
|
||
$_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-11">
|
||
<div class="alert alert-success">
|
||
单元格部分内容被管理员设置为不可编辑状态的，已做标红显示。 <a data-toggle="modal" data-href="<?=Url::toRoute('index/welcome')?>" data-backdrop="false" data-title="帮助" data-target="#modal-help">点击查看更多帮助</a>.
|
||
</div>
|
||
</div>
|
||
<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>
|
||
<table id="table">
|
||
</table>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let $table = $('#table')
|
||
let $remove = $('#remove')
|
||
let $add = $('#add')
|
||
let PageTable
|
||
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添加了中文引用时可以不用设置
|
||
toolbar:"#toolbar",
|
||
//指定工具栏
|
||
columns:columns,
|
||
//定义表列标题
|
||
|
||
// height:'',
|
||
// height参数不允许设定，太多BUG，影响列宽调整、列排序
|
||
showColumns: true,
|
||
//列控制-显示或隐藏
|
||
showColumnsToggleAll:true,
|
||
//一键筛选全部列
|
||
showColumnsSearch:true,
|
||
//筛选列时可搜索列名
|
||
|
||
showRefresh: true,
|
||
//刷新
|
||
autoRefresh:false,
|
||
//自动刷新
|
||
showToggle: true,
|
||
//切换卡片视图
|
||
|
||
showExport:true,
|
||
exportDataType: 'selected',
|
||
// 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:true,
|
||
// 全屏
|
||
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:false,
|
||
//行点击即选中
|
||
undefinedText: 'N/A',
|
||
// 空值默认文本
|
||
|
||
// url:dataUrl,
|
||
//从网络获取数据
|
||
ajaxOptions: window.ajaxOptions,
|
||
//未生效
|
||
responseHandler:resHandler,
|
||
//获取数据的后续响应操作
|
||
|
||
buttonsClass:"secondary",
|
||
//按钮样式（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:true,
|
||
// 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，不好用
|
||
|
||
rememberOrder:false,
|
||
//记住排序 TBD 仅列标题记录了，暂不开启
|
||
|
||
// treeShowField: 'title',
|
||
// parentIdField: 'pcat_id',
|
||
//树形表 TBD 未调试完成
|
||
editable:true,
|
||
//表格可编辑；相应地，在需要编辑的列使用参数editable传入编辑设定（注意列参数的editable是函数，不应该是bool值）
|
||
|
||
cookie:false,
|
||
cookieIdTable:'NewsListTable',
|
||
// 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 {
|
||
btnAdd: {
|
||
text: '新增一行',
|
||
icon: 'bi-plus',
|
||
event: function () {
|
||
addNewRow()
|
||
},
|
||
attributes: {
|
||
title: '新增一行数据'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
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 .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) {
|
||
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 .href':function (e, value, row, index) {
|
||
var url = "<?=Url::toRoute('edit');?>"+"?&id="+row.id;
|
||
parent.layer.open({
|
||
type: 2,
|
||
title: '内容编辑',
|
||
shadeClose: true,
|
||
shade: 0.8,
|
||
area: ['90%', '90%'],
|
||
content: url //iframe的url
|
||
});
|
||
},
|
||
}
|
||
// 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);
|
||
let $field = $cell.find("a[href=\"javascript:void(0)\"");
|
||
if($field.length===1){
|
||
return $field.click();
|
||
}else{
|
||
$cell.attr('contenteditable',"true") //不起作用
|
||
// layer.msg(value, {time: 3 * 1000}, function () {});
|
||
}
|
||
|
||
}
|
||
|
||
//实现单元格编辑操作，必须为对应列设置单元格格式函数（在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,row,element)
|
||
var field = element[0].dataset.name;
|
||
// console.log('字段',field);
|
||
row[field] = value;
|
||
var res = mySaveData(dataSaveUrl,row);
|
||
res.then(
|
||
function(data){
|
||
// console.log('得到数据保存结果',data)
|
||
var id = data.data.id;
|
||
row.id = id;
|
||
$table.bootstrapTable('load',row);
|
||
})
|
||
return 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
|
||
//是否选中
|
||
}
|
||
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)"';
|
||
html += '<a class="operateIcon '+ _op.class +' '+ func +' title="'+ _op.title +'">';
|
||
html += '<i class="fa fa-'+ _op.icon +'"></i>';
|
||
html += '</a>';
|
||
}
|
||
return html;
|
||
}
|
||
|
||
function catFormatter(value, row, index,field) {
|
||
//指定分类数据的格式化
|
||
if(!row.title) return '';
|
||
|
||
var url = "<?=Url::toRoute(['newscat/select','callback'=>'cid']);?>";
|
||
row['cat_title'] = row['cat_title'] || '';
|
||
var html = [
|
||
'<div class="input-group">',
|
||
'<input type="text" class="form-control" name="'+field+'_title" id="'+field+'-'+row.id+'-title" value="'+row['cat_title']+'" placeholder="点击选择" autocomplete="off" href="'+url+'&id='+row.id+'&cid='+value+'" w="80%;" h="90%;" title="选择分类" mini="load">',
|
||
'<input type="hidden" class="form-control" name="'+field+'_id" id="'+field+'-'+row.id+'-value" value="'+row[field]+'">',
|
||
// '<span class="input-group-btn">',
|
||
// '<button type="button" class="btn btn-info" onclick='+clearCat(field,row.id,row)+'>清除</button>',
|
||
// '</span>',
|
||
// '</div>'
|
||
]
|
||
return html.join('');
|
||
}
|
||
function selectCat(title,id,callback,rowId)
|
||
{
|
||
layer.closeAll();
|
||
// layer.msg('已选择');
|
||
$('#'+callback+'-value').val(id);
|
||
$('#'+callback+'-title').val(title);
|
||
var row = $table.bootstrapTable('getRowByUniqueId', rowId);
|
||
row.cid = id;
|
||
mySaveData(dataSaveUrl,row);
|
||
}
|
||
function clearCat(callback,rowId)
|
||
{
|
||
layer.closeAll();
|
||
// console.log('#'+field+'-value');
|
||
$('#'+callback+'-value').val('');
|
||
$('#'+callback+'-title').val('');
|
||
var row = $table.bootstrapTable('getRowByUniqueId', rowId);
|
||
row.cid = 0;
|
||
mySaveData(dataSaveUrl,row);
|
||
}
|
||
|
||
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'}
|
||
},
|
||
price: {
|
||
css: {color: 'red'}
|
||
}
|
||
}[column.field]
|
||
}
|
||
function headerStyle(column) {
|
||
return {
|
||
id: {
|
||
classes: 'uppercase'
|
||
},
|
||
title: {
|
||
css: {background: 'yellow'}
|
||
},
|
||
des: {
|
||
css: {color: 'red'}
|
||
}
|
||
}[column.field]
|
||
}
|
||
//表格样式 E
|
||
|
||
//toolbar按钮事件 S
|
||
// 复合筛选
|
||
$('#filterBy').click(function () {
|
||
var filterAlgorithm = $('[name="filterAlgorithm"]').val()
|
||
|
||
$table.bootstrapTable('refreshOptions', {
|
||
filterOptions: {
|
||
filterAlgorithm: filterAlgorithm
|
||
}
|
||
})
|
||
|
||
$table.bootstrapTable('filterBy', {
|
||
id: 3,
|
||
title: '价格'
|
||
})
|
||
})
|
||
//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 ;?>"
|
||
}
|
||
|
||
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) //添加空白行
|
||
}
|
||
// 表格之外的方法 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 () {
|
||
$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)
|
||
// }
|
||
// );
|
||
|
||
// 监听列移动事件
|
||
// $table.on('column-moving.bs.table', function(e, field, from, to) {
|
||
// // 列移动后重设表格高度
|
||
// let $tableBody = $table.find('tbody');
|
||
// let tableHeight = $tableBody.height();
|
||
// $tableBody.css('height', tableHeight);
|
||
//
|
||
// // 或者你可以计算所有行的高度之和，并设置为表格高度
|
||
// // var rowHeights = $tableBody.find('tr').map(function() {
|
||
// // return $(this).outerHeight();
|
||
// // }).get();
|
||
// // var totalHeight = rowHeights.length > 0 ? rowHeights.sum() : 0;
|
||
// // $tableBody.css('height', totalHeight);
|
||
//
|
||
// //平滑过渡效果
|
||
// let totalHeight = tableHeight;
|
||
// $tableBody.animate({
|
||
// 'height': totalHeight
|
||
// }, 'slow');
|
||
// });
|
||
|
||
$remove.click(function () {
|
||
var ids = getIdSelections()
|
||
$table.bootstrapTable('remove', {
|
||
field: 'id',
|
||
values: ids
|
||
})
|
||
$remove.prop('disabled', true)
|
||
lay.msg('所选行已删除，数据仍然存在，下次刷新页面时将重新加载')
|
||
})
|
||
|
||
$add.click(
|
||
function(){
|
||
addNewRow()
|
||
}
|
||
)
|
||
|
||
//初始化可移动列
|
||
$('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('scrollTo','bottom') //添加完数据转至表格底
|
||
}
|
||
)
|
||
})
|
||
</script>
|
||
<div class="modal inmodal" id="modal-help" tabindex="-1" role="dialog" aria-hidden="true" style="height:500px;z-index:999">
|
||
<div class="modal-dialog modal-lg">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||
<h4 class="modal-title">操作帮助</h4>
|
||
<small class="font-bold">请认真阅读操作手册。</small>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<p>帮助内容</p>
|
||
</div>
|
||
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
.modal-backdrop.in {
|
||
opacity: .3;
|
||
}
|
||
</style>
|
||
<script>
|
||
//模态框
|
||
</script>
|