<?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 class="btn-group">
                                <select id="select" class="form-control" name="filterAlgorithm">
                                    <option value="and" selected>全部符合</option>
                                    <option value="or">满足任一</option>
                                </select>
                                <button class="btn btn-secondary" id="filterBy" style="width:80px;">筛选</button>
                            </div>
                        </div>
                        <table id="table">
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<script>
    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 columns2 = [
        [
            {
                colspan: 2,
                align: 'center',
                valign: 'middle',
                title: '选择'
            },
            {
                colspan: 2,
                align: 'center',
                valign: 'middle',
                title: '详情'
            },
            {
                title: '操作',
                field: 'options',
                rowspan: 2,
                class: 'success',
                align: 'center',
                valign: 'middle',
                sortable: true,
                width:80,
                widthUnit:"px",
                halign: 'left',
                clickToSelect:false,
                // formatter: operateFormatter,
                // footerFormatter: TextCountFormatter,
                events: 'operateEvents',
                visible:true,
                cellStyle:'cellStyle',
                filterControl:"select",
                searchable:false
            }
        ],
        [
            {
                field: 'state',
                checkbox: true,
                rowspan: 2,
                align: 'center',
                valign: 'middle',
                width:10,
                widthUnit:"px",
                escape:true,
                //忽略该列的传值
                // formatter:stateFormatter,
                // footerFormatter:"CountTitleFormatter",
                searchable:false
            },
            {
                title: 'ID',
                field: 'id',
                rowspan: 2,
                align: 'center',
                valign: 'middle',
                sortable: true,
                width:20,
                widthUnit:"px",
                halign: 'left',
                // footerFormatter: NumCountFormatter,
                searchable:false
            }
        ],
        [
            {
                title: '标题',
                field: 'title',
                rowspan: 1,
                align: 'center',
                valign: 'middle',
                sortable: true,
                width:120,
                widthUnit:"px",
                halign: 'left',
                // footerFormatter: TextCountFormatter,
                // searchHighlightFormatter:customSearchFormatter,
                editable: {
                    type: 'text',
                    title: 'Enter Name',
                    validate: function(value) {
                        if (!value) {
                            return 'The name is required';
                        }
                    }
                },
                cellStyle:'cellStyle',
                filterControl:"input",
                searchable:false
            },
            {
                title: '代码',
                field: 'des',
                rowspan: 1,
                align: 'center',
                valign: 'middle',
                sortable: true,
                width:80,
                widthUnit:"px",
                halign: 'left',
                // footerFormatter: TextCountFormatter,
                // searchHighlightFormatter:customSearchFormatter,
                titleTooltip:'英文简写的代码，后期用于权限判断等场景',
                visible:true,
                cellStyle:'cellStyle',
                filterControl:"select",
                searchable:false
            }
        ]
    ]

    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_id',
            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,
            footerFormatter: NumCountFooter,
            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添加了中文引用时可以不用设置
        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:'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 {
            btnAdd: {
                text: '新增一行',
                icon: 'bi-plus',
                event: function () {
                    alert('将添加新一行数据')
                },
                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 .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);
        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)
            // },
            // 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 remove" href="javascript:void(0)" title="移除">',
            '<i class="fa fa-trash"></i>',
            '</a>'
        ].join('')
    }

    function catFormatter(value, row, index,field) {
        //指定分类数据的格式化
        if(!row.title) return '';

        var url = "<?=Url::toRoute(['select','callback'=>'pcat_id']);?>";
        row['pcat_title'] = row['pcat_title'] || '';
        var html = [
            '<div class="input-group">',
            '<input type="text" class="form-control" name="'+field+'_title" id="'+field+'-'+row.id+'-title" value="'+row['pcat_title']+'" placeholder="点击选择" autocomplete="off" href="'+url+'&id='+row.id+'" 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.pcat_id = id;
        mySaveData(dataSaveUrl,row);
    }
    function clearCat(field,rowID)
    {
        layer.closeAll();
        // console.log('#'+field+'-value');
        $('#'+field+'-value').val('');
        $('#'+field+'-title').val('');
        var row = $table.bootstrapTable('getRowByUniqueId', rowId);
        row.pcat_id = 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 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'}
            },
            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("放弃删除了")
            }
        );
    }

    // 表格之外的方法 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('所选行已删除，数据仍然存在，下次刷新页面时将重新加载')
        })

        $('th.resize_able').resizable({
            'handles':'e'
            //可以控制移动方向的变量，w,e,s,n,
            //e (east东，横向移动）
        })
        //直接引用jquery-ui的大小拖放功能,指定带 class:"resize_able" 类的列表头 th 可拖动
        myGetData(dataUrl).then(
            function(data){
                var _emptyRow = {id:''}
                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',_emptyRow)   //添加空白行
                $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>