了解fastadmin标准的控制器模块js的表格事件

于 2020-08-07 10:52:05 发布
阅读量1.5k 收藏
点赞数
分类专栏： js 文章标签： fastadmin 表格事件
原文链接：https://blog.csdn.net/aochijing0046/article/details/101493598
版权

controller/A.php<-------------->public/assets/js/backend/a.js

controller/b/A.php<-------------->public/assets/js/backend/b/a.js

标准的控制器模块js

<script src="/assets/js/require.js" data-main="/assets/js/require-backend.js?v=1551685919"></script>

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,
                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;
});

View Code

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

js中有定义一个Controller 对象，它有index/add/edit/api四个方法，这四个方法分别与我们控制器中的方法一一对应

如果我们在js中添加了自己的方法，如detail方法，则对应添加Controller下的对应控制器文件下的detail方法

在public/assets/js/backend/a.js用define()定义了a模块

加载用require(['a'], function (a){...}

我们在require配置文件/assets/js/require-backend.js中找到

//加载相应模块
if (Config.jsname) {
    require([Config.jsname], function (Controller) {
        Controller[Config.actionname] != undefined && Controller[Config.actionname]();
    }, function (e) {
        console.error(e);
        // 这里可捕获模块加载的错误
    });
}
参数Config.jsname即为自定义的模块名（js文件），格式为：backend/a ;
Config.actionname为你在js模块定义的一个Controller对象的属性，属性有index/add/edit/api四个方法（对象），这四个方法分别与我们控制器中的方法一一对应
分别执行了模块js的idnex、add、edit、api这四个对象属性
Controller.index：
index 调用的是Table.api.bindevent(table); 即调用的是require-table.js里的Table对象
上面这个table有什么对象呀，事件有哪些呢
Table.list                 //已经渲染的表格对象
Table.defaults             Bootstrap-table表格默认列的配置
Table.columnDefaults       bootstraptable  column的默认参数
Table.config               表格相关DOM元素类配置 如定义的button等选择器
Table.api.init(Table.defaults, Table.columnDefaults, locales)      初始化table 在这自定义修改表的前两个默认参数
Table.api.bindevent(table)  //绑定事件
Table.api.multi(action, ids, table, element)   // 批量操作请求
Table.api.events          //单元格元素事件
Table.api.formatter       //单元格数据格式化

> `Table.api.formatter.icon` 快速将字段渲染成一个按钮，仅支持Fontawesome按钮
> `Table.api.formatter.image` 快速将字段渲染成图片展示的形式
> `Table.api.formatter.images` 快速将字段渲染成多图片展示的形式,字段数据请以`,`进行分隔
> `Table.api.formatter.status` 快速将字段渲染成状态，默认`normal/hidden/deleted/locked`这四个状态
> `Table.api.formatter.url` 快速将字段渲染成URL框
> `Table.api.formatter.search` 快速将字段渲染成可搜索的链接，点击后将执行搜索
> `Table.api.formatter.addtabs` 快速将字段渲染成可添加到选项卡的链接，点击后将把链接添加到选项卡
> `Table.api.formatter.flag` 快速将字段渲染成标志，仅支持`index/hot/recommend/new`这四种标志
> `Table.api.formatter.label` 快速将字段渲染Label标签
> `Table.api.formatter.datetime` 快速时间戳数据渲染成日期时间数据
> `Table.api.formatter.operate` 操作栏固定按钮
> `Table.api.formatter.buttons` 快速生成多个按钮
> `Table.api.formatter.toggle` 快速生成切换按钮
Table.api.buttonlink(column, buttons, value, row, index, type) //生成button样式的链接 
Table.api.replaceurl(url, row, table) //替换URL中的数据（{变量名}）
Table.api.selectedids(table) // 获取选中的条目ID集合
Table.api.toggleattr(table)  // 切换复选框状态    
Table.api.getrowdata(table, index) //根据行索引获取行数据
Table.api.getrowbyindex(table, index)// 根据行索引获取行数据
Table.api.getrowbyid(table, id) // 根据主键ID获取行数据

 

Table主要功能

load-error.bs.table  当远程数据被加载出错后触发   
refresh.bs.table      当点击刷新按钮对表格进行刷新时触发 在.btn-refresh .fa的元素上添加一个fa-spin的类，转圈的图标。。。
dbl-click-row.bs.table  当双击单元格时  向.btn-edit元素传递一个click事件
post-body.bs.table     当内容渲染完成后  移除.fa-spin  向.btn-disabled类元素添加disabled属性禁止交互、不是卡片视图的的type是checkebox的td的data-index属性大于0 时拖拽选择需要重新绑定事件
check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table  选中一行。取消选中一行全选框选中全选框取消时.btn-disabled类元素disabled状态的切换
绑定panel-heading类的tab事件
.toolbar .btn-refresh下的刷新按钮事件
.toolbar .btn-add下的添加按钮事件
.toolbar .btn-import下的导入按钮事件
.toolbar .btn-edit下的编辑按钮事件
.toolbar .btn-multi批量操作按钮事件
.toolbar btn-del批量删除按钮事件
绑定拖动排序
input[data-id][name='checkbox']点击事件
[data-id].btn-change点击事件
[data-id].btn-edit点击事件
[data-id].btn-del
批量操作请求
单元格元素事件 click .btn-editone和click .btn-delone
单元格数据格式化

View Code

按钮显示： 

 

这里的默认几个自定义的按钮或者自己在添加的直接在view模板里写注意类名要对应上；

fastadmin给默认的按钮都指定了类别如下：

Table.config.firsttd: 'tbody tr td:first-child:not(:has(div.card-views))',//不是卡片视图的的哥td（即checkebox那列）
Table.config.toolbar: '.toolbar',//包裹下面这几个自定义表格按钮的盒子
Table.config.refreshbtn: '.btn-refresh',//刷新
Table.config.addbtn: '.btn-add',//增加
Table.config.editbtn: '.btn-edit',//编辑
Table.config.delbtn: '.btn-del',//删除
Table.config.importbtn: '.btn-import',//导入
Table.config.multibtn: '.btn-multi',//批量更新
Table.config.disabledbtn: '.btn-disabled',
Table.config.editonebtn: '.btn-editone',//操作里的删除
Table.config.dragsortfield: 'weigh'

事件：

点击刷新    触发 .toolbar Table.config.refreshbtn的click事件

点击添加    触发 .toolbar Table.config.addbtn点击事件

点加导入：触发 Table.config.importbtn  点加事件

点击批量编辑按钮(螺母形状)：触发 .toolbar Table.config.editbtn 点击事件

点击删除：触发 .toolbar Table.config.delbtn 点击事件

 

表格默认button：输出和禁用默认button

            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'weixinitem/config/index',
                    add_url: 'weixinitem/config/add',
                    edit_url: 'weixinitem/config/edit',//默认为空则不生成
                    del_url: 'weixinitem/config/del',//默认为空则不生成
                    dragsort_ur:'',//为空则不生成
                    multi_url: 'weixinitem/config/multi',
                    table: 'weixinitem_config',
                }
            });
拖拽图标的话、在数据库不用建默认的weigh字段或者responseHandler里修改row的field字段名、或者修改require_table.js里的Table.config里的dragsortfield的值

重点说下拖拽的图标显示我们需要后台传过来的字段名（传过来前可随意组装）与table表field的值相同且与Table.config.dragsortfield的值相同且与Table.defaults.extend.dragsort_url有值

事件：

拖拽事件require(['dragsort'], function () {})

编辑：触发.btn-editone点击事件 Table.api.events.operate

 删除：触发btn-delone的点击事件Table.api.events.operate

 

 ps

表单的生成：

fastadmin form表单组件（每个表单元素的生成）

<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('文本框')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::text('row[text]', '', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('多行文本框')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::textarea('row[textarea]', '', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('富文本编辑器')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::editor('row[editor]', '', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('单选')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::radios('row[radio]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('复选')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::checkboxs('row[checkbox]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('下拉列表')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::select('row[select]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('下拉列表(多选)')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::selects('row[select]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('下拉列表(友好)')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::selectpicker('row[selectpicker]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('下拉列表(友好)(多选)')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::selectpickers('row[selectpickers]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('动态下拉列表')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::selectpage('row[select]', 2, 'category/selectpage', null, null, ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('动态下拉列表(多选)')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::selectpages('row[select]', 2, 'category/selectpage', null, null, ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('城市选择框')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::citypicker('row[citypicker]', 2, ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('日期')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::datepicker('row[datepicker]', '', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('时间')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::timepicker('row[timepicker]', '', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('日期时间')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::datetimepicker('row[timepicker]', '', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('日期区间')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::daterange('row[daterange]', '', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('时间区间')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::timerange('row[timerange]', '', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('日期时间区间')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::datetimerange('row[datetimerange]', '', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('动态字段列表')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::fieldlist('row[fieldlist]', ['aa'=>'AA', 'bb'=>'BB'], null, '', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('单图')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::image('row[image]', '/uploads/20180629/b83227ea668e7b2d61def9812bbce3da.png', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('多图')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::images('row[images]', '', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('单文件')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::upload('row[upload]', '', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('多文件')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::uploads('row[uploads]', '', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('开关')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::switcher('row[switcher1]', '0', ['color'=>'success'])}
                                {:Form::switcher('row[switcher2]', '1', ['color'=>'yellow', 'disabled'=>true])}
                                {:Form::switcher('row[switcher3]', 'Y', ['color'=>'navy', 'yes'=>'Y', 'no'=>'N'])}
                                {:Form::switcher('row[switcher4]', '1', ['color'=>'info'])}
                                {:Form::switcher('row[switcher4]', '1', ['color'=>'danger', 'disabled'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('联动选择')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::cxselect('ajax/area', ['province','city'], ['province'=>37, 'city'=>38])}
                            </div>
                        </div>

                        <div class="form-group layer-footer">
                            <label class="control-label col-xs-12 col-sm-2"></label>
                            <div class="col-xs-12 col-sm-8">
                                <button type="submit" class="btn btn-success btn-embossed disabled">{:__('Submit')}</button>
                                <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
                            </div>
                        </div>
                    </form>

View Code

注意：必须还要在js中用Form.api.bindevent("form[role=form]");进行组件初始化，否则部分组件会不生效。

 

转载于:https://www.cnblogs.com/lichihua/p/10470995.html

王世凡
关注
专栏目录
博客
thinkphp框架开源可商用系统案例
11-13 93
http://www.e9933.com/
博客
phpstorm 快捷键
10-29 412
Ctrl + Tab 切换最近的查看的两个文件，长按显示当前打开的所有文件列表，可以在他们之间切换。Ctrl + Alt + O：优化导入的类和包，可以去掉没使用的类。Ctrl + Shift + +/- 快速打开/折叠 所有方法。Ctrl + Shift + Enter 在当前行补全语句。Ctrl + Alt +F12 在资源管理器定位到当前文件。Ctrl + Shift + ↑/↓ 向上/下移动当前行。CTRL + ALT + ←/→ 返回上次编辑的位置。Ctrl + +/- 快速打开/折叠当前方法。
博客
wordpress 火车头发布模块
10-29 109
【代码】wordpress 火车头发布模块。
博客
Laravel中Route::resources()(路由资源)方法的使用
10-11 153
Route::resources()方法是遵从。API风格自动生成路由的方法。
博客
PHP商城及官网实例
08-06 223
http://www.e9933.com/http://www.xn--chqq84groh.com/
博客
localStorage 封装成 可设置 存储时间
08-06 176
【代码】localStorage 封装成 可设置 存储时间。
博客
localStorage.setItem时间
08-06 272
并没有提供直接设置过期时间的方法。使用当前时间戳加上过期时间（以毫秒为单位）来设置过期时间戳。每次获取数据时检查这个时间戳是否超过当前时间。方法用于将值保存到指定的键。以下是一个简单的示例，展示如。
博客
JS缓存三种方法
08-05 547
在开发JavaScript应用程序时，浏览器缓存是一个值得注意的问题。IndexedDB是HTML5提供的一种本地存储方案，详细介绍可以查看我之前写的文章《IndexedDB详解》。localStorage是HTML5引入的本地存储方案，它可以在浏览器关闭后依然保存存储的数据。上述三种JavaScript缓存方式各具特点，可以根据具体应用场景选择合适的方式。localStorage的优点有多种，如可设置过期时间，缺点是存储容量较小。它可以被用来拦截和处理网络请求，同时可以提供离线缓存和推送通知等功能。
博客
PHP商城案例
07-26 476
http://www.e9933.com/
博客
jquery定时器ajax
07-26 51
https://blog.51cto.com/u_16175461/6812266
博客
Laravel如何定义文件和目录的基本路径？
06-28 125
腾讯云对象存储（COS）是一种高扩展性、低成本、安全可靠的云端存储服务。它可以帮助用户存储和管理海量的数据，适用于各种场景，如网站图片、音视频文件存储、备份与归档、大数据分析等。这些路径定义函数可以帮助开发者在Laravel项目中方便地定位和操作文件和目录。函数可以方便地获取项目根目录下的文件和目录。例如，如果想获取项目根目录下的。推荐的腾讯云相关产品：腾讯云对象存储（COS）。函数来定义文件和目录的基本路径。函数返回项目根目录的绝对路径。在Laravel中，可以使用。返回的是项目根目录下的。
博客
nginx下的zencart伪静态规则 转载
06-25 76
【代码】nginx下的zencart伪静态规则 转载。
博客
fastadmin 自动创建的表格界面右上角那个搜索框，指定搜索字段
04-18 237
fastadmin 自动创建的表格界面右上角那个搜索框，指定搜索字段。 默认搜索的是表格主键。 没啥用可以在控制器里配置，要搜索的字段， 如在控制器类里， 添加这个成员属性即可， 还是支持模糊搜索的， 很强大protected $searchFields = "sitename,sourceid,name,email,user_type,created_at";原文链接：https://blog.csdn.net/qq_34700162/article/details/1371560
博客
php实现ISO8601时间格式（带T和Z）和常规日期时间格式（东八区UTC+8）的相互转换
04-17 722
请注意，这里使用的是 DateTime::ATOM 常量，它代表了与 ISO 8601 兼容的日期时间格式。输出中的 +00:00 表示时间偏移量，即与 UTC 时间相差的时区偏移。要将 “2023-04-06 01:44:43” 转换为 ISO 8601 时间格式，您可以使用 PHP 的 DateTime 类和 format 方法。要将"2023-04-06T01:44:43.000Z"这个字符串转换为年月日时分秒的格式，你可以使用PHP的DateTime类和format方法。
博客
PM2基本使用
04-12 344
通过pm2启动node项目，通过pm2 ls可以看到，node项目是可以正常启动，但是就是不能访问项目接口。原文链接：https://blog.csdn.net/weixin_44953643/article/details/127022507。pm2 start index.js --name 进程名 //启动应用并设置进程名。pm2 start index.js -i max //启用群集模式（自动负载均衡）pm2 start index.js //启动node项目。
博客
thinkphp实现对两个字段或or条件搜索
03-04 732
原文链接：https://blog.csdn.net/yeyinshi/article/details/50467768。Adstext是数据库表，$data['_logic'] = 'or';thinkphp实现对两个字段或or条件搜索。
博客
fastadmin 修改弹窗大小
12-23 563
通用在对应js文件里①、添加按钮（修改操作列代码）原本：修改后：text: __('积分明细'),title: __('积分明细'),uid={id}',Layer.alert("接收到回传数据：" + JSON.stringify(data), { title: "回传数据" });},//返回true时按钮显示,返回false隐藏弹窗大小：
博客
【fastadmin】fastadmin修改弹窗大小
12-09 136
https://blog.csdn.net/pmlptf/article/details/100063077
博客
怎么动态修改data-rule的属性
12-05 393
参数：{String} key - 字段 name 或者 #id。参数：{Object} obj - 字段参数 Hash。参数：{Object} field - 字段参数。描述：动态配置字段参数。描述：动态配置字段参数。
博客
【Python从入门到进阶】28、xpath的安装以及使用
12-01 95
https://blog.csdn.net/acmman/article/details/131705392
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值