fastadmin开发日记
index页面生成开关按钮,以及开关默认值修改
前言
例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。
一、使用开关的原因?
fastadmin使用过程中,我们生成状态用的是static字段,会自动识别到。在编辑页面还好,它会以单选box的方式存在(见下图)
但是在index页面就没有那么好看(见下图)
作为不喜欢这样的的开发者就想给它改掉
二、修改步骤
1.初始化(改成按钮形式)
我们在官方文档中可以看到初始化的时候有这么一个方法
formatter: Table.api.formatter.toggle
代码如下(示例):
{
field: 'status',
title: __('Status'),
searchList: {
"1": __('Status 1'),
"2": __('Status 2'),
formatter: Table.api.formatter.toggle
},
//新手看不懂这种写法很正常,去研究下boostrap-table,自动生成表格的
2.修改默认值(默认0为停用,1为正常)
在开发过程中,有时候不会以官方给的默认值,(在抄别人代码时,直接复制别人代码和数据库,又懒得改的情况下,等等...........)
虽然样式已经出来了,但是咱点关的时候,它会默认把数据库直接修改为0,那咱实际要的假如为2,那点编辑按钮可以看到单选框时没有选择的。
这个时候咱就需要修改官方给的代码。
咱们找到官方给的:
toggle: function (value, row, index) {
var table = this.table;
var options = table ? table.bootstrapTable('getOptions') : {};
var pk = options.pk || "id";
var color = typeof this.color !== 'undefined' ? this.color : 'success';
var yes = typeof this.yes !== 'undefined' ? this.yes : 1;
var no = typeof this.no !== 'undefined' ? this.no : 0;
var url = typeof this.url !== 'undefined' ? this.url : '';
var confirm = '';
var disable = false;
if (typeof this.confirm !== "undefined") {
confirm = typeof this.confirm === "function" ? this.confirm.call(this, value, row, index) : this.confirm;
}
if (typeof this.disable !== "undefined") {
disable = typeof this.disable === "function" ? this.disable.call(this, value, row, index) : this.disable;
}
return "<a href='javascript:;' data-toggle='tooltip' title='" + __('Click to toggle') + "' class='btn-change " + (disable ? 'btn disabled no-padding' : '') + "' data-index='" + index + "' data-id='"
+ row[pk] + "' " + (url ? "data-url='" + url + "'" : "") + (confirm ? "data-confirm='" + confirm + "'" : "") + " data-params='" + this.field + "=" + (value == yes ? no : yes) + "'><i class='fa fa-toggle-on text-success text-" + color + " " + (value == yes ? '' : 'fa-flip-horizontal text-gray') + " fa-2x'></i></a>";
},
一下子就很容易看出yes和no对吧,那就修改默认值吧
3.重新渲染,formatter函数
叫你改你还真改啊??那可是官方给的,你小白敢去动它???
代码如下(示例):
{
field: 'status',
title: __('Status'),
searchList: {
"1": __('Status 1'),
"2": __('Status 2')
},
formatter: function (value, row, index) {
var table = this.table;
var options = table ? table.bootstrapTable('getOptions') : {};
var pk = options.pk || "id";
var color = typeof this.color !== 'undefined' ? this.color : 'success';
var yes = typeof this.yes !== 'undefined' ? this.yes : 1;
var no = typeof this.no !== 'undefined' ? this.no : 2;
var url = typeof this.url !== 'undefined' ? this.url : '';
var confirm = '';
var disable = false;
if (typeof this.confirm !== "undefined") {
confirm = typeof this.confirm === "function" ? this.confirm.call(this, value, row, index) : this.confirm;
}
if (typeof this.disable !== "undefined") {
disable = typeof this.disable === "function" ? this.disable.call(this, value, row, index) : this.disable;
}
return "<a href='javascript:;' data-toggle='tooltip' title='" + __('Click to toggle') + "' class='btn-change " + (disable ? 'btn disabled no-padding' : '') + "' data-index='" + index + "' data-id='" +
row[pk] + "' " + (url ? "data-url='" + url + "'" : "") + (confirm ? "data-confirm='" + confirm + "'" : "") + " data-params='" + this.field + "=" + (value == yes ? no : yes) + "'><i class='fa fa-toggle-on text-success text-" + color + " " + (value == yes ? '' : 'fa-flip-horizontal text-gray') + " fa-2x'></i></a>";
}
},
//很容易看到formatter: function,跟官方给的toggle: function很像是吧
当然你看到yes1,no2。
别忘了改。
总结
干了大半年开发了,算是学了一个框架。剩下的都是逻辑,js其实很多很有用,但是还是用vue比较好。
文章对新手小白有点用吧,后面我会多多分享的。