<?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>
    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);
    }

    let $table = $('#table');
    let _id = "<?=$id;?>"   //有此值且非空时，则过滤掉相应的列数据
    let _callback = "<?=$callback;?>"
    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 columns = [
        {
            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
        },
        {
            title: 'ID',
            field: 'id',
            align: 'center',
            valign: 'middle',
            sortable: true,
            width: 30,
            widthUnit: "px",
            halign: 'left',
            footerFormatter: CountTotalFooter,
            searchable: false
        },
        {
            title: '上级分类',
            field: 'pcat_title',
            align: 'center',
            valign: 'middle',
            sortable: true,
            width: 120,
            widthUnit: "px",
            halign: 'left',
            formatter: catFormatter,
            class: "resize_able",
            filterControl: "select",
            searchable: false
        },
        {
            title: '标题',
            field: 'title',
            rowspan: 1,
            align: 'center',
            valign: 'middle',
            sortable: true,
            // width:120,
            // widthUnit:"px",
            halign: 'left',
            formatter: textFormatter,
            searchFormatter: true,
            searchHighlightFormatter: customSearchFmt,
            editable: textEditor,
            //该列数据的可编辑性设定
            class: "resize_able",
            cellStyle: cellStyle,
            filterControl: "input",
            //列标头筛选时使用输入框
            searchable: true
        },
        {
            title: '代码',
            field: 'des',
            align: 'center',
            valign: 'middle',
            sortable: true,
            // width:80,
            // widthUnit:"px",
            halign: 'left',
            formatter: textFormatter,
            searchFormatter: false,
            searchHighlightFormatter: customSearchFmt,
            editable: textEditor,
            titleTooltip: '英文简写的代码，后期用于权限判断等场景',
            visible: true,
            class: "resize_able",
            cellStyle: cellStyle,
            filterControl: "select",
            searchable: true
        },
        {
            title: '排序',
            field: 'orderby',
            align: 'center',
            valign: 'middle',
            sortable: true,
            width: 40,
            widthUnit: "px",
            halign: 'left',
            visible: true,
            formatter: numFormatter,
            searchFormatter: false,
            searchHighlightFormatter: customSearchFmt,
            editable: textEditor,
            searchable: true
        },
        {
            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
        }
    ]

    // 定义表格操作
    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，不好用

        rememberOrder: false,
        //记住排序  TBD 仅列标题记录了，暂不开启

        treeShowField: 'title',
        parentIdField: 'pcat_id',
        //树形表   TBD 未调试完成
        editable: true,
        //表格可编辑；相应地，在需要编辑的列使用参数editable传入编辑设定（注意列参数的editable是函数，不应该是bool值）

        cookie: false,
        cookieIdTable: 'NewsCatListTable',
        // 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
            //是否选中
        }
        if (row['_isSelected']) {
            state.checked = true;
        }
        if (row['_isUnselectable']) {
            state.disabled = true;
        }
        return state;
    }

    function operateFormatter(value, row, index) {
        return [
            // '<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 select" href="javascript:void(0)" title="选择">',
            '<i class="fa fa-check-square-o"></i>',
            '</a>'
        ].join('')
    }

    function catFormatter(value, row, index, field) {
        return value || '';
    }

    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 numFormatter(value, row, index) {
        return value ? Number(value) : 0;
    }

    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("放弃删除了")
            }
        );
    }

    // 表格之外的方法 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('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>