fastAdmin的tablefromselectpage组件如何实现高效的多条件筛选和分页查询？

本文共计1849个文字，预计阅读时间需要8分钟。

一、前端table表格+1、基础介绍FastAdmin中前端表格的常用第三方插件有Layer和Toastr。Layer用于弹出窗口，Toastr用于提示信息。

二、测试方法浏览器 - 检查 - 控制台 + layer.alert(111); 输入layer.会自动提示Layer弹窗插件。

一、前端table表格

1、基础介绍

FastAdmin中前端的常用的第三方插件有Layer,Toastr，Layer用于弹窗，Toastr用于提示。

测试方法：浏览器->检查->控制台

layer.alert(111); 输入“layer.”会自动提示

toastr. 也会提示

作用：弹窗提示等。

2、标准模块

每个控制器都对应一个JS模块，控制器名称和JS中模块名称是一一对应的。

比如我们的控制器是application/admin/controller/Article.php，则我们JS中对应的JS模块是public/assets/js/backend/article.js。

每一个控制器请求的方法对应JS模块中一个方法。

比如控制器Article.php中的index方法，对应的是JS的article模块中的Controller.index方法，如果我们添加了自己的方法detail方法，则对应Controller.detail方法。

一个JS标准控制器模块的写法如下：

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) { var Controller = { index: function () { // 初始化表格参数配置 Table.api.init({ extend: { index_url: 'category/index', add_url: 'category/add', edit_url: 'category/edit', del_url: 'category/del', multi_url: 'category/multi', dragsort_url: '', table: 'category', } }); var table = $("#table"); // 初始化表格 table.bootstrapTable({ //查询网址 url: $.fn.bootstrapTable.defaults.extend.index_url, //参数可以百度一下bootstraptable 参数查询，或找require-table.js escape: false, pk: 'id', sortName: 'weigh', pagination: false, commonSearch: false, columns: [ [ {checkbox: true}, {field: 'id', title: __('Id')}, {field: 'type', title: __('Type')}, {field: 'name', title: __('Name'), align: 'left'}, {field: 'nickname', title: __('Nickname')}, {field: 'flag', title: __('Flag'), operate: false, formatter: Table.api.formatter.flag}, {field: 'image', title: __('Image'), operate: false, formatter: Table.api.formatter.image}, {field: 'weigh', title: __('Weigh')}, {field: 'status', title: __('Status'), operate: false, 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); }, add: function () { Controller.api.bindevent(); }, edit: function () { Controller.api.bindevent(); }, api: { bindevent: function () { Form.api.bindevent($("form[role=form]")); } } }; return Controller; });

// 初始化表格

table.bootstrapTable({

//查询网址

url: $.fn.bootstrapTable.defaults.extend.index_url,

//参数可以百度一下bootstraptable 参数查询，或找require-table.js

require-table.js非常重要，表格属性和参数都在这个文件中有说明，可以参照配置。

columns: [] // 为表格列表的项！

其中：operate: false, //为搜索配置，如果为true，则在表格上面的搜索列表中，显示该项。

二、前端from表单

表单模块主要用于框架表单组件元素的渲染和事件绑定，当我们自定义了一个表单后，必须使用表单模块中Form.api.bindevent进行绑定表单，否则不会有任何作用。

注：一键生成CURD后，会自动进行表单绑定，如下：

ceshi.js

api: { bindevent: function () { Form.api.bindevent($("form[role=form]")); } }

• 表单事件都在：require-form.js 中定义，可以查看或修改。

使用示例

Form.api.bindevent($("form[role=form]"), function(data, ret){ //如果我们需要在提交表单成功后做跳转，可以在此使用location.href="链接";进行跳转 Toastr.success("成功"); }, function(data, ret){ Toastr.success("失败"); }, function(success, error){ //bindevent的第四个参数为提交前的回调 //如果我们需要在表单提交前做一些数据处理，则可以在此方法处理 //注意如果我们需要阻止表单，可以在此使用return false;即可 //如果我们处理完成需要再次提交表单则可以使用submit提交,注意这里的this应当为表单元素如下 //Form.api.submit(this, success, error); return false; });

以上代码表格当表单提交处理成功后提示成功，处理失败提示失败。

三、selectpage组件

FastAdmin中的动态下拉列表使用的是优秀强大的Selectpage插件，FastAdmin对其进行了二次开发。

常规用法

下面介绍一个基础的动态下拉列表示例，如下

<input id="c-name" data-rule="required" data-source="category/selectpage" class="form-control selectpage" name="row[name]" type="text" value="">

其中需要给元素class添加一个selectpage，其次需要增加一个data-source="category/selectpage"这个属性，category/selectpage为我们控制器提交列表的方法

FastAdmin的Selectpage列表中显示字段默认读取的是name字段，如果我们返回的列表中不包含name字段，将无法展现下拉列表数据。此时我们需要添加使用data-field="你要显示的字段"即可，例如data-field="title"。

FastAdmin的Selectpage列表中主键字段默认读取的是id字段，如果我们的主键不是id字段，则我们可以添加并使用data-primary-key="你的主键ID字段"来修改,例如data-primary-key="productid"。

例如：/admin/view/ceshi/add.html

<div class="form-group"> <label class="control-label col-xs-12 col-sm-2">选择用户:</label> <div class="col-xs-12 col-sm-8"> <input id="c-ceshiint" class="form-control selectpage" data-source="auth/admin/index" data-field="username" name="row[ceshiint]"> </div> </div>