了解fastadmin标准的控制器模块js的表格事件
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;
});
每一个控制器请求的方法对应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模板里写注意类名要对应上；
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>
注意：必须还要在js中用Form.api.bindevent("form[role=form]");进行组件初始化，否则部分组件会不生效。
了解fastadmin标准的控制器模块js的表格事件的更多相关文章
- Fastadmin 如何引入 layui 模块
FastAdmin基于RequireJS进行前端JS模块的管理,因此如果我们需要再引入第三方JS插件,则必按照RequireJS的规则进行载入.如果你还不了解什么是RequireJS,可以先简单了解下 ...
- Node.js：events事件模块
Nodejs的大部分核心API都是基于异步事件驱动设计的,所有可以分发事件的对象都是EventEmitter类的实例. 大家知道,由于nodejs是单线程运行的,所以nodejs需要借助事件轮询,不断 ...
- Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例
Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...
- [python标准库]Pickle模块
Pickle-------python对象序列化 本文主要阐述以下几点: 1.pickle模块简介 2.pickle模块提供的方法 3.注意事项 4.实例解析 1.pickle模块简介 The pic ...
- Python 标准库 ConfigParser 模块 的使用
Python 标准库 ConfigParser 模块 的使用 demo #!/usr/bin/env python # coding=utf-8 import ConfigParser import ...
- Python标准库——collections模块的Counter类
1.collections模块 collections模块自Python 2.4版本开始被引入,包含了dict.set.list.tuple以外的一些特殊的容器类型,分别是: OrderedDict类 ...
- 看懂此文，不再困惑于 JS 中的事件设计
看懂此文,不再困惑于 JS 中的事件设计 今天刚在关注的微信公众号看到的文章,关于JS事件的,写的很详细也很容易理解,相关的知识点都有总结到,看完就有种很舒畅的感觉,该串起来的知识点都串起来了.反正一 ...
- 从零开始的JS生活（二）——BOM、DOM与JS中的事件
上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...
- JS 中的事件设计
看懂此文,不再困惑于 JS 中的事件设计 原文出处: aitangyong 抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享. (一)事件绑定的几种方式 ...
随机推荐
- ios 调整 label 的字体行间距
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 100, self.view.frame.size.width, 200) ...
- PID控制器开发笔记之二：积分分离PID控制器的实现
前面的文章中,我们已经讲述了PID控制器的实现,包括位置型PID控制器和增量型PID控制器.但这个实现只是最基本的实现,并没有考虑任何的干扰情况.在本节及后续的一些章节,我们就来讨论一下经典PID控制 ...
- NHibernate 如何在并行线程下，使用session
第一,你要知道,并行线程会有一个蛋疼的地方.他不会每次执行都给你去开一个线程. 我一开始以为每次执行都会去开一个新的线程.... list.AsParallel().ForAll(memberInfo ...
- LeetCode（88）：合并两个有序数组
Easy! 题目描述: 给定两个有序整数数组 nums1 和 nums2,将 nums2 合并到 nums1 中,使得 num1 成为一个有序数组. 说明: 初始化 nums1 和 nums2 的元素 ...
- 【sqli-labs】Less1~Less4
学习sql注入啦,一下都是我做sqli-labs时的笔记.可能有错误,如果有人发现了欢迎指正~~ 常用知识点: 1.mysql注释有三种:① #: 注释从#到行尾 ② --空格: 注释到行尾,注意-- ...
- 《剑指offer》用两个栈实现队列
本题来自<剑指offer> 用两个栈实现队列 题目: 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 思路: 队列定义:先进先出 栈定义:先进后出 要 ...
- Mesh无线网络的定义与WiFi的区别
Mesh无线网络的定义与WiFi的区别 无线Mesh网络(无线网状网络)也称为「多跳(multi-hop)」网络,它是一种与传统无线网络完全不同的新型无线网络技术.无线网状网是一种基于多跳路由,对等网 ...
- CF1029E
一个看起来就不对的贪心居然是正解... 但仔细思考一下,这种贪心倒的确找不到反例.. 贪心思想:每次找出离根节点最远的点,然后由根节点向这个点的父节点连边,一直连到所有点都能被覆盖即可,这样构造出的一 ...
- Python安装、卸载第三方模块
pip command ModuleName command:用于指定要执行的命令(install:安装,uninstall:卸载) ModuleName:需要安装的模块名称 示例: 安装第三方模块n ...
- OrCAD Capture CIS 为库里的元器件添加新属性
1.进入元器件编辑界面 2.菜单:Options > Part Properties... 3.在窗口User Properties中,点击按钮New... 4.在弹出的子窗口NewProper ...