FastAdmin表格实例化
在使用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表格初始化
在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只是扩展了工具栏、按钮组和事件绑定等信息。
发表评论 取消回复