表格 - 实例化

优质

小牛编辑

134浏览

2023-12-01

在使用JS实例化表格之前，首先我们的HTML中必须存在一个table表格，在后台管理列表中常见的表格如：

<table id="table" class="table table-striped table-bordered table-hover table-nowrap"
       data-operate-edit="{:$auth->check('test/edit')}" 
       data-operate-del="{:$auth->check('test/del')}" 
       width="100%">
</table>

初始化

在FastAdmin中可以使用Table.api.init进行表格的初始化配置操作，比如表格参数，列参数，语言包等等。

// 初始化表格参数配置
Table.api.init({
    extend: {
        index_url: 'test/index' + location.search,
        add_url: 'test/add',
        edit_url: 'test/edit',
        del_url: 'test/del',
        multi_url: 'test/multi',
        table: 'test',
    }
});

以上初始化的方法是我们在JS代码中最常看见的，我们还可以使用

Table.api.init({
    pageSize: 20, //调整分页大小为20
    pageList: [10, 25, 50, 100, 'All'], //增加一个100的分页大小
});

等方式来修改表格的默认参数和默认列参数信息，具体可修改的参数请参考表格参数章节和列参数章节

参数中的extend这个参数值是非常重要的一个信息点，此参数用于配置我们加载数据列表的URL、添加文档的URL、编辑文档的URL和删除文档URL等

实例化

通过以上的初始化以后即可使用以下代码进行表格实例化操作了

var table = $("#table");

// 初始化表格
table.bootstrapTable({
    url: $.fn.bootstrapTable.defaults.extend.index_url,
    pk: 'id',
    sortName: 'weigh',
    columns: [
        [
            {checkbox: true},
            {field: 'id', title: __('Id')},
            {field: 'category_id', title: __('Category_id')},
            {field: 'title', title: __('Title')},
            {field: 'image', title: __('Image'), events: Table.api.events.image, formatter: Table.api.formatter.image},
            {field: 'images', title: __('Images'), events: Table.api.events.image, formatter: Table.api.formatter.images},
            {field: 'refreshtime', title: __('Refreshtime'), operate:'RANGE', addclass:'datetimerange', formatter: Table.api.formatter.datetime},
            {field: 'weigh', title: __('Weigh')},
            {field: 'switch', title: __('Switch'), searchList: {"1":__('Yes'),"0":__('No')}, formatter: Table.api.formatter.toggle},
            {field: 'status', title: __('Status'), searchList: {"normal":__('Normal'),"hidden":__('Hidden')}, formatter: Table.api.formatter.status},
            {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
        ]
    ]
});

// 为表格绑定事件
Table.api.bindevent(table);

如果你的表格只是需要单纯的将普通表格转化为Bootstrap-table，可以直接使用

$('#table').bootstrapTable({
    url: 'data1.json',
    columns: [{
        field: 'id',
        title: 'Item ID'
    }, {
        field: 'name',
        title: 'Item Name'
    }, {
        field: 'price',
        title: 'Item Price'
    }, ]
});

的方式来渲染，无需进行Table.api.init和Table.api.bindevent操作，Table.api.bindevent只是扩展了工具栏、按钮组和事件绑定等信息。