fastadmin：在index页面生成开关按钮，以及开关默认值修改

最新推荐文章于 2024-09-17 02:14:36 发布

小于晏

最新推荐文章于 2024-09-17 02:14:36 发布

阅读量509

点赞数 3

文章标签： php 后端

本文链接：https://blog.csdn.net/m0_55735473/article/details/142170776

版权

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。

别忘了改。