Fastadmin JS

一、js文件里自定义状态

1、纯文字
{field: 'sort', title: __('Sort'),sortable:true},//排序
{field: 'status', title: "状态",formatter:function (value) {//字段显示
if(value ==1)
{return "已启用";}
else if(value ==0)
{return "已停用";}
}
},

2、纯文字

{field: 'status',title: '状态',custom: {0: 'red', 1: 'success'},//控制颜色searchList: {"0": '未打款', "1": '已打款',},//控制字formatter: Table.api.formatter.normal
},

3、带颜色按钮状
{
field: 'status', title: '状态',
searchList: {'1': '定金已支付', '2': '已报价待用户确认','3': '用户已确认待完工','4': '已完工待支付尾款','5': '订单已完成'},
custom: {1: 'primary', 2: 'warning',3: 'info', 4: 'blue',5: 'success'},
formatter: Table.api.formatter.label
},

二、添加其他按钮

1、按钮

A.js

{field: 'operate', title: __('Operate'), table: table,
//其他按钮buttons :[{name: 'see', text: '查看周边', title: '查看周边', icon: 'fa fa-view', classname: 'btn btn-xs btn-primary btn-dialog', url: 'esf/house/housezb/index'},{name: 'house_zb_add', text: '添加周边', title: '添加周边', icon: 'fa fa-edit', classname: 'btn btn-xs btn-primary btn-dialog', url: 'esf/house/house/house_zb_add'}],
//框架自带的按钮（修改，删除）events: Table.api.events.operate, formatter: Table.api.formatter.operate
}

2、在按钮中若要弹出其他列表页面

A.js文件中按钮正常书写（如上）

B.js 和 B.html 需要处理一下相关数据：

【原因是因为在a页面中点击弹出会自带一个IDS，而这个IDS是A页面对应的数据的id，要关联到B页面就需要在B页面处理一下数据】

(1) B.js:

// 初始化表格
table.bootstrapTable({url: $.fn.bootstrapTable.defaults.extend.index_url,pk: 'id',sortName: 'id',//关键代码 startqueryParams: function (params) {var filter = JSON.parse(params.filter);var op = JSON.parse(params.op);var ids = Fast.api.query('ids');//接受传递的idsif (ids) {filter.house_id = ids;//house_id即为B页面的house_id对应A页面的IDop.house_id = '=';params.filter = JSON.stringify(filter);params.op = JSON.stringify(op);funcUrlDel('ids');//删除页面原本的传参，函数在对应的html页面}return params;},
//关键代码 endcolumns: [[{checkbox: true},{field: 'id', title: __('Id')},{field: 'cate_id', title: '分类ID'},{field: 'operate',title: __('Operate'),table: table,events: Table.api.events.operate,formatter: Table.api.formatter.operate}]]
});

(2) B.html

在页面合适位置添加：

<script>//删除url的id参数function funcUrlDel(name) {var loca = window.location;var baseUrl = loca.origin + loca.pathname + "?";var query = loca.search.substr(1);if (query.indexOf(name) > -1) {var obj = {};var arr = query.split("&");for (var i = 0; i < arr.length; i++) {arr[i] = arr[i].split("=");obj[arr[i][0]] = arr[i][1];}delete obj[name];var url = baseUrl + JSON.stringify(obj).replace(/[\"\{\}]/g, "").replace(/\:/g, "=").replace(/\,/g, "&");history.pushState(null, null, url);return;} else {return window.location.href;}}
</script>

3、按钮只执行方法，不弹出页面

{field: 'buttons', title: __('其他操作'), table: table, buttons: [{name: 'send_wx_mes',text: __('推送消息'),title: __('推送消息'),classname: 'btn btn-xs btn-success btn-magic btn-ajax',icon: 'fa fa-magic',url: 'sale/order/send_wx_mes',//要执行的方法地址confirm: '确认是否要推送消息',success: function (data, ret) {// alert(ret.msg);},error: function (data, ret) {alert(ret.msg);return false;}}], operate: false, formatter: Table.api.formatter.buttons
},

send_wx_mes: function () {Controller.api.bindevent();
},

三、搜索

1、列表中自定义下拉框搜索

table.on('post-common-search.bs.table', function (event, table) {var form = $("form", table.$commonsearch);$("input[name='tags_name']", form).addClass("selectpage").data("source", "esf/house/houseabout/index").data("primaryKey", "name").data("field", "name").data("params", "{'custom[type]':'1'},'custom[status]':'1'}").data("orderBy", "id desc");Form.events.cxselect(form);Form.events.selectpage(form);
});

（

1> 必须在 var table = $("#table"); 之下

2>标红出传参无效(等同于fastadmin中selectpage的data-params),未找到原因

最终解决办法：

将蓝色处修改：(使用get传参，然后再在控制器中处理)

$("input[name='qslx_name']", form).addClass("selectpage").data("source", "esf/house/houseabout/index?cate_id=2").data("primaryKey", "name").data("field", "name").data("orderBy", "id desc");

控制器中对搜索函数进行处理：

/*** 查看*/
public function index()
{//当前是否为关联查询$this->relationSearch = false;//设置过滤方法$this->request->filter(['strip_tags', 'trim']);if ($this->request->isAjax()) {//如果发送的来源是Selectpage，则转发到Selectpageif ($this->request->request('keyField')) {//接受页面get传参 $par=array();if($this->request->get()) {$par = $this->request->get();if (isset($par['cate_id'])) {$par['status'] = 1;}}return $this->selectpage($par);//走重构的Selectpage方法}...return json($result);}return $this->view->fetch();
}

在控制器中重构Selectpage方法

/*** Selectpage的实现方法*/
public function selectpage($custom=array())
{//自定义搜索条件$custom = $custom ?: (array)$this->request->request("custom/a");...

}

）

Fastadmin JS相关推荐

fastadmin html js记录一次＜input type=““checkbox“ 不选中表单不提交字段问题
先描述下场景: 客户想要一个单复选框功能,如下图所示,查了下fastadmin文档没发现,只找到了一个 //单个复选框 Form::checkbox(string $name, string $val ...
Fastadmin 等一些thinkphp5 larval的后台框架程序 bootstraptable 自定义js 实现动态列的实现方法1 ，通过nginx apache rewrite 重定向
Fastadmin 等一些thinkphp5 larval的后台框架程序 bootstraptable 自定义js 实现动态列的实现方法1 ,通过nginx apache rewrite 重定向需 ...
商情云 | php学习 | wampserver | 宝塔面板 | fastadmin框架 | JS学习
宝塔面板相关配置文件位置 D:\hc\baota 处理函数被禁用问题问题:wampserver图标变橙了解决:wampserver三个服务分别是Apache.PHP.MySQL,变红说明三个服务 ...
fastadmin使用three.js，导入xyz的txt文件，展示3D模型
1.安装three.js bower install three --save 2.在require-backend.js引入three.js 我是在后台展示所以在require-backend中引入 ...
Fastadmin笔记
一)安装源码安装: 1.下载FastAdmin完整包解压到你本地 https://gitee.com/karson/fastadmin/attach_files 2.将你的虚拟主机绑定到/fasta ...
FastAdmin 极速后台管理框架（三周年）V1.0.0.20190410_beta
开发四年只会写业务代码,分布式高并发都不会还做程序员? >>> FastAdmin 极速后台框架(三周年)V1.0.0.20190410_beta FastAdmin 三周岁了, ...
fastadmin绑定edit.html,FAST-ADMIN 根据生成命令行修改页面
FASTADMIN -- 后台页面修改 |-近日在用fastadmin做后台管理时,遇到了不少问题,现将一些常见基础的修改发出来给大家参考一如何不在已创建好了的后台页面修改我们经常会修改需求,所 ...
fastadmin出现token验证错误!_gitee 拥有3.7k星星的极速后台框架—FastAdmin了解一下...
前言 FastAdmin 是一款基于 ThinkPHP5 + Bootstrap 的极速后台开发框架,并且FastAdmin是遵循Apache2开源协议发布的.拥有一键生成CRUD/一键生成菜单/一键 ...
FastAdmin 开发环境详细设置 (2017）
2019-07-11:此文档近期将更新. 一图胜千言 FastAdmin 开发环境 Windows 网页安装鼠标点点就可以了,不用说明. 命令行安装环境准备装有 Windows 7 的PC .( ...

Fastadmin JS

一、js文件里自定义状态

三、搜索

Fastadmin JS相关推荐

最新文章

热门文章