【Fastadmin】fastadmin后台默认分类列表视图和功能美化

news/2025/2/16 6:21:16/

目录

前言：

美化前：

美化后：

视图美化代码：

批量添加代码：

前言：

        fastadmin是一款很好的快速开发php后台框架，也是博主在项目开发中使用最多的，但是项目自带的分类显示有些不尽人意，于是做了稍微改动，并做了部分字段删减

美化前：

        美化前是这样的，并且没有折叠打开的功能，不同级别之间层次感不强。

美化后：

在彩蛋列表的基础上做了折叠打开的功能，并增加了不同级别的间隙以层次感

  • 可通过点击图标或者名字进行折叠和展开

  •  最后一个级别显示灰色字体，代表没有下级列表
  • 并增加了批量添加的功能

视图美化代码：

粗暴法直接复制即可，内容过多不再做详细解释，目标文件 category.js：

define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'template'], function ($, undefined, Backend, Table, Form, Template) {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: 'ajax/weigh',table: 'category',}});var table = $("#table");// 初始化表格table.bootstrapTable({url: $.fn.bootstrapTable.defaults.extend.index_url,sortName: '',escape: false,columns: [[{field: 'id', title: __('Id')},{field: 'name', title: __('Name'), align: 'left', formatter: Controller.api.formatter.name},{field: 'flag', title: __('Flag'), formatter: Table.api.formatter.flag},{field: 'weigh', title: __('Weigh')},{field: 'status', title: __('Status'), operate: false, formatter: Table.api.formatter.status},{field: 'id',title: '<a href="javascript:;" class="btn btn-success btn-xs btn-toggle" style="border-top:none;"><i class="fa fa-chevron-up"></i></a>',operate: false,formatter: Controller.api.formatter.subnode},{field: 'operate',title: __('Operate'),table: table,events: Table.api.events.operate,formatter: Table.api.formatter.operate}]],pagination: false,search: false,commonSearch: false,rowAttributes: function (row, index) {if (this.totalRows > 500) {return row.pid == 0 ? {} : {style: "display:none"};}return row.haschild == 1 ? {} : {style: "display:none"};}});// 为表格绑定事件Table.api.bindevent(table);//绑定TAB事件$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {// var options = table.bootstrapTable(tableOptions);var typeStr = $(this).attr("href").replace('#', '');var options = table.bootstrapTable('getOptions');options.pageNumber = 1;options.queryParams = function (params) {// params.filter = JSON.stringify({type: typeStr});params.type = typeStr;return params;};table.bootstrapTable('refresh', {});return false;});var btnSuccessEvent = function (data, ret) {if ($(this).hasClass("btn-change")) {var index = $(this).data("index");var row = Table.api.getrowbyindex(table, index);table.bootstrapTable("updateRow", {index: index, row: row});} else if ($(this).hasClass("btn-delone")) {if ($(this).closest("tr[data-index]").find("a.btn-node-sub.disabled").length > 0) {$(this).closest("tr[data-index]").remove();} else {table.bootstrapTable('refresh');}} else if ($(this).hasClass("btn-dragsort")) {table.bootstrapTable('refresh');}Fast.api.refreshmenu();return false;};//表格内容渲染前table.on('pre-body.bs.table', function (e, data) {var options = table.bootstrapTable("getOptions");options.escape = true;});//当内容渲染完成后table.on('post-body.bs.table', function (e, data) {var options = table.bootstrapTable("getOptions");options.escape = false;//点击切换/排序/删除操作后刷新左侧菜单$(".btn-change[data-id],.btn-delone,.btn-dragsort").data("success", btnSuccessEvent);});//显示隐藏子节点$(document).on("click", ".btn-node-sub", function (e) {var status = $(this).data("shown") ? true : false;$("a.btn[data-pid='" + $(this).data("id") + "']").each(function () {$(this).closest("tr").toggle(!status);});$(this).data("shown", !status);return false;});//批量删除后的回调$(".toolbar > .btn-del,.toolbar .btn-more~ul>li>a").data("success", function (e) {Fast.api.refreshmenu();});//展开隐藏一级$(document.body).on("click", ".btn-toggle", function (e) {$("a.btn[data-id][data-pid][data-pid!=0].disabled").closest("tr").hide();var that = this;var show = $("i", that).hasClass("fa-chevron-down");$("i", that).toggleClass("fa-chevron-down", !show);$("i", that).toggleClass("fa-chevron-up", show);$("a.btn[data-id][data-pid][data-pid!=0]").not('.disabled').closest("tr").toggle(show);$(".btn-node-sub[data-pid=0]").data("shown", show);});//展开隐藏全部$(document.body).on("click", ".btn-toggle-all", function (e) {var that = this;var show = $("i", that).hasClass("fa-plus");$("i", that).toggleClass("fa-plus", !show);$("i", that).toggleClass("fa-minus", show);$(".btn-node-sub.disabled").closest("tr").toggle(show);$(".btn-node-sub").data("shown", show);});},add: function () {Controller.api.bindevent();},edit: function () {Controller.api.bindevent();},api: {formatter: {name: function (value, row, index) {value = value.toString().replace(/(&|&amp;)nbsp;/g, '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');if(row.haschild == 1){value = '<a href="javascript:;" data-toggle="tooltip" data-id="' + row.id + '" data-pid="' + row.pid + '" class="'+ (row.haschild == 1 ? '' : 'text-muted disabled') + ' btn-node-sub">' + value + '</a>';}else{value = '<span class="text-muted">' + value + '<span>';}return row.status == 'hidden' ? "<span class='text-muted'>" + value + "</span>" : value;},subnode: function (value, row, index) {return '<a href="javascript:;" data-toggle="tooltip" title="' + __('Toggle sub menu') + '" data-id="' + row.id + '" data-pid="' + row.pid + '" class="btn btn-xs '+ (row.haschild == 1 ? 'btn-success' : 'btn-default disabled') + ' btn-node-sub"><i class="fa fa-sitemap"></i></a>';}},bindevent: function () {Form.api.bindevent($("form[role=form]"), function (data) {Fast.api.refreshmenu();});}}};return Controller;
});

批量添加代码：

html页面，目标文件add.html

<div class="form-group"><label for="c-name" class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label><div class="col-xs-12 col-sm-8"><textarea id="c-name" data-rule="required" style="overflow-y: scroll;height: 300px;" class="form-control" name="row[name]" type="text" value="" placeholder="同时添加多个换行输入，如：
设计
开发
..."></textarea></div>
</div>

后端代码：

$params = $this->request->post('row/a');
// 分割字符换为数组，换行符分割
$lines = explode("\n", $params['name']);// 过滤空行
$filteredLines = array_map(function ($value) {return trim($value);
}, $lines);$filteredLines = array_filter($filteredLines);foreach ($filteredLines as $line) {// 避免重复添加$find = $this->model->where(['name' => $line, 'pid' => $params['pid']])->find();if(empty($find)){$params['name'] = $line;$arr[] = $params;}
}
if(empty($arr)){$this->success('成功添加 0 条数据');
}
$result = $this->model->allowField(true)->saveAll($arr);$this->success('成功添加 ' . $result . ' 条数据');


http://www.ppmy.cn/news/1262689.html

相关文章

关于IDEA中maven的作用以及如何配置MAVEN

关于IDEA中maven的作用以及如何配置MAVEN

关于IDEA中maven的作用以及如何配置MAVEN 1、Maven是什么2、Idea中对于Maven的配置3、下载依赖时&#xff0c;Idea下方的显示3.1、Maven中央仓库的下载显示界面3.2、阿里云仓库的下载显示界面 4、Maven在Idea中的使用4.1、clean4.2、validate4.3、compile4.4、test&#xff08;…
阅读更多...
IDEA 社区版 add GitLab Account

IDEA 社区版 add GitLab Account

问题 IntelliJ IDEA Community Edition 2023.3&#xff08;社区版&#xff09;在使用GitLab连接时&#xff0c;使用个人访问令牌出现报错&#xff0c;代码&#xff1a; GraphQL error:[No such type ProjectMember,so it cant be a fraggment condition,Field id doesnt exis…
阅读更多...
Java--1v1双向通信-控制台版

Java--1v1双向通信-控制台版

文章目录 前言客户端服务器端输出线程端End 前言 TCP&#xff08;Transmission Control Protocol&#xff09;是一种面向连接的、可靠的网络传输协议&#xff0c;它提供了端到端的数据传输和可靠性保证。 本程序就是基于tcp协议编写而成的。 利用 TCP 协议进行通信的两个应用…
阅读更多...
企业贷款行业如何获客？

企业贷款行业如何获客？

贷款行业是指提供贷款服务的行业&#xff0c;包括各种类型的金融机构&#xff0c;如银行、信用社、贷款公司、保险公司等。这些机构通过向个人或企业提供贷款服务&#xff0c;满足其资金需求。 主要分为个人贷款和企业贷款。个人贷款指银行或其他金融机构向符合贷款条件的自然…
阅读更多...
案例061:基于微信小程序的互助学习系统

案例061:基于微信小程序的互助学习系统

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…
阅读更多...
理解 HTTP POST 请求：表单与 JSON 数据格式深入解析20231208

理解 HTTP POST 请求：表单与 JSON 数据格式深入解析20231208

引言 在日常的 Web 开发中&#xff0c;理解 HTTP POST 请求的不同数据格式是至关重要的。这不仅有助于构建健壮的后端服务&#xff0c;还能确保与其他服务的有效沟通。本文将深入探讨 multipart/form-data 和 application/json&#xff0c;这两种常见的 POST 请求格式。 POST…
阅读更多...
关于什么是 JVM

关于什么是 JVM

关于什么是 JVM&#xff0c;看看普通⼈和⾼⼿的回答。 普通人 JVM 就是 Java 虚拟机&#xff0c;是⽤来运⾏我们平时所写的 Java 代码的。优点是它会 ⾃动进⾏内存管理和垃圾回收&#xff0c;缺点是⼀旦发⽣问题&#xff0c;要是不了解 JVM 的运⾏ 机制&#xff0c; 就很难…
阅读更多...
Navicat 技术指引 | 连接 GaussDB 分布式

Navicat 技术指引 | 连接 GaussDB 分布式

Navicat Premium&#xff08;16.3.3 Windows 版或以上&#xff09;正式支持 GaussDB 分布式数据库。GaussDB 分布式模式更适合对系统可用性和数据处理能力要求较高的场景。Navicat 工具不仅提供可视化数据查看和编辑功能&#xff0c;还提供强大的高阶功能&#xff08;如模型、结…
阅读更多...
最新文章

Copyright @ 2022~2023