bootstrap-table

基本使用

<script type="text/javascript">
    /**
        table-layout: fixed;       // 固定列宽，可在columns 设置列宽 width
        word-break:break-all; word-wrap:break-all;   //自动换行

     <table class="table table-hover" id="table-request"
     style="table-layout: fixed;
     word-break:break-all; word-wrap:break-all;">
     </table>
     
     <div id="toolbar" class="btn-group">
    <button id="btn_add" type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
    </button>
    <button id="btn_edit" type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
    </button>
    <button id="btn_delete" type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
    </button>
</div>
     
    */

    $('#bsTable').bootstrapTable({

        url: 'url',                           //请求后台的URL（*）
        method: 'post',                     //请求方式（*）
        toolbar: "#toolbar",                   //工具按钮用哪个容器
        striped: true,                      //是否显示行间隔色
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,                   //是否显示分页（*）
        sortable: false,                    //是否启用排序
        sortOrder: "asc",                   //排序方式
        queryParams: queryParams,           //传递参数（*），这里应该返回一个object，即形如{param1:val1,param2:val2}
        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
        pageNumber:1,                       //初始化加载第一页，默认第一页
        pageSize: 20,                       //每页的记录行数（*）
        pageList: [20, 50, 100],            //可供选择的每页的行数（*）
        search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
        strictSearch: true,
        showColumns: true,                  //是否显示所有的列
        showRefresh: true,                  //是否显示刷新按钮
        minimumCountColumns: 2,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
        //height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
        showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
    	showExport: true,
        cardView: false,                    //是否显示详细视图
        detailView: false,                  //是否显示父子表
        columns: [
            {
                checkbox: true,
                width:60,
            },
            {
                field:'name',
                title:'名称',
                width:120

            },{
                field:'url',
                title:'请求链接',
            },{
                field:'method',
                title:'请求方式',
                width:60,
            },{
                field:'headers',
                title:'请求头',
                class:'W120',
            },{
                field:'data',
                title:'请求参数',
            },{
                field:'action',
                title:'操作',
                width:100,
                events:'operateEvents',
                formatter:'operateFormatter',           //自定义表格内容，字符串内是方法名称
            }
        ],                                              //列设置,


    });
	/*
	* 请求参数设置
	* pageSize对应的就是limit
	*/
    function queryParams(params) {
        return {
            offset: params.offset,      //从数据库第几条记录开始
            limit: params.limit,        //找多少条
            //name: $(...).val()   //其他自定义参数，从页面获取
        }
    }
    // 单元格，自定义设置
    // 操作按钮
    // 定义删除、更新操作
        function operateFormatter(value, row, index) {
            var htm = '<a href="#" data-addtab="traindata" data-url="train-data.html" data-title="' + row.sTrainNo + '数据">数据</a>' +
                '&nbsp;&nbsp;<a href="#" data-addtab="trainrepaire" data-url="train-suggest.html" data-title="' + row.sTrainNo + '详情">检修</a>';

            return htm;
        }
    // 行内按钮，点击事件
    window.operateEvents = {
        'click .edit': function (e, value, row, index) {
            alert("edit");
        },
        'click .remove': function (e, value, row, index) {
            alert("remove");
        },
    };

//自定义查询  refresh刷新远程服务器数据
$(document).on('click', ".queryButton",function(){
  $('#table').bootstrapTable('refresh');
});

</script>

public function getIndexData(Request $request)
{
    $limit = $request->param('limit');
    $arr = [];
    $res =  Db::table('a_import')
        ->field('sTrainNo,sMonCarNo,sMotoCarNo,nFlagType,tDate,tMinTime,nTickAlt,nTCDSAlt,nRepaire')
        ->paginate($limit)
        ->toArray();
    $arr['total'] = $res["total"];
    $arr['rows'] = $res["data"];

    return json($arr);
}

行内编辑

https://www.php.cn/js-tutorial-411593.html