fastadmin 树状菜单展开,合并;简要文件管理系统界面设计与实现

一,菜单合并效果图

源文件参考:fastadmin 子级菜单展开合并、分类父级归纳 - FastAdmin问答社区

php服务端:

public function _initialize()
{parent::_initialize();$this->model = new \app\admin\model\auth\Filetype;$this->adminModel = model('Admin');//重点:转成树状结构$tree = Tree::instance();$tree->init(collection($this->model->order('weigh desc,id desc')->select())->toArray(), 'pid');$this->categorylist = $tree->getTreeList($tree->getTreeArray(0), 'type_name');$categorydata = [0 => ['id' => '0', 'type_name' => __('None')]];foreach ($this->categorylist as $k => $v) {$categorydata[$v['id']] = $v;}$this->view->assign("parentList", $categorydata);$auth_group_id = $this->auth->getGroupIds();$this->view->assign("auth_group_id", $auth_group_id[0]);}public function index()
{//当前是否为关联查询$this->relationSearch = true;//设置过滤方法$this->request->filter(['strip_tags', 'trim']);if ($this->request->isAjax()) {//如果发送的来源是Selectpage,则转发到Selectpageif ($this->request->request('keyField')) {return $this->selectpage();}$list = $this->categorylist;$total = count($list);foreach ($list as $key=>$row) {$list[$key]['admin'] = $this->adminModel->field('username,nickname,email,mobile')->where('id',$row['create_admin_id'])->find();}$result = array("total" => $total, "rows" => $list);return json($result);}return $this->view->fetch();
}

js文件:backend 文件夹下找到该模块下的文件

// 初始化表格
table.bootstrapTable({url: $.fn.bootstrapTable.defaults.extend.index_url,pk: 'id',sortName: 'weigh',escape: false,columns: [[{checkbox: true},{field: 'id', title: __('Id')},{field: 'type_name', title: __('Type_name'), align: 'left', formatter:function (value, row, index) { return value.toString().replace(/(&|&)nbsp;/g, ' '); } },{field: 'createtime', title: __('Createtime'), operate:'RANGE', addclass:'datetimerange', autocomplete:false, formatter: Table.api.formatter.datetime},{field: 'updatetime', title: __('Updatetime'), operate:'RANGE', addclass:'datetimerange', autocomplete:false, formatter: Table.api.formatter.datetime},{field: 'weigh', title: __('Weigh'), operate: false},{field: 'create_admin_id', title: __('Create_admin_id')},{field: 'admin.username', title: __('创建者用户名')},{field: 'admin.nickname', title: __('创建者昵称')},{field: 'admin.email', title: __('Admin.email')},{field: 'admin.mobile', title: __('Admin.mobile')},{field: 'id', title: '展开', 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,//隐藏搜索按钮showToggle: false,//表格视图两种模式showColumns: false,//隐藏列showExport: false,//隐藏导出
});//核心三个地方
//{field: 'type_name', title: __('Type_name'), align: 'left', formatter:function (value, row, index) { return value.toString().replace(/(&|&)nbsp;/g, ' '); } },
//{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
/*
pagination: false,//隐藏分页
search: false,//隐藏搜索框
commonSearch: false,//隐藏搜索按钮
showToggle: false,//表格视图两种模式
showColumns: false,//隐藏列
showExport: false,//隐藏导出
*/

同样在index方法里面:

// 为表格绑定事件:这个是原有的,下面的是全部新增的
Table.api.bindevent(table);  //当内容渲染完成后
table.on('post-body.bs.table', function (e, settings, json, xhr) {//默认隐藏所有子节点$("a.btn[data-id][data-pid][data-pid!=0]").closest("tr").hide();// $(".btn-node-sub.disabled").closest("tr").hide();//显示隐藏子节点$(".btn-node-sub").off("click").on("click", 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;});//点击切换/排序/删除操作后刷新左侧菜单$(".btn-change[data-id],.btn-delone,.btn-dragsort").data("success", function (data, ret) {Fast.api.refreshmenu();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);
});

api下增加

api: {formatter: {subnode: function (value, row, index) {return '<a href="javascript:;" data-toggle="tooltip" title="' + __('展开/收起') + '" data-id="' + row.id + '" data-pid="' + row.pid + '" class="btn btn-xs '+ (row.haschild == 1 || row.ismenu == 1 ? 'btn-success' : 'btn-default disabled') + ' btn-node-sub"><i class="fa fa-sitemap"></i></a>';}},bindevent: function () {Form.api.bindevent($("form[role=form]"));}
}

注意:上下级结构需要用pid进行关联

二,文件系统左右展示,点击左侧菜单右侧显示出对应文件

index: function () {
// 初始化表格参数配置
Table.api.init({extend: {index_url: 'auth/filelist/index' + location.search,multi_url: 'auth/filelist/multi',import_url: 'auth/filelist/import',add_url: 'auth/filelist/add',dragsort_url:'',table: 'filelist',}
});var table = $("#table");function dir_address($dir_id){//获取当前文件操作权限$.ajax({url: "auth/filelist/get_dir_child", //请求接口type: "post",dataType: "json",data: {"dir_id": $dir_id}, //请求参数success: function (effect) {if(effect.code == 1){var data = effect.data.child_list;var output_str = '';for(var i=0;i<data.length;i++){output_str += '<li><a href="javascript:;" class="child_nav" dataid="'+data[i].id+'">';output_str += '<img src="/assets/img/folder.svg">';output_str += data[i].type_name;output_str += '</a><span>'+data[i].updatetime_text+'</span></li>';}$(".jstree-default").html(output_str);//获取当前所在位置var parents = effect.data.parents;var address = '当前位置:<a href="">全部</a>';for(var i=0;i<parents.length;i++){address += ' &gt; <a href="javascript:;" class="child_nav" dataid="'+parents[i].id+'">'+parents[i].type_name+'</a>'}$("#address").html(address);}}})
}//联动主要靠下面这个,选左侧菜单后,将选中的值赋给右侧,并触发提交事件
$(function(){$('body').on('click','.child_nav',function(){$dir_id = $(this).attr('dataid');//这个根据实际表格的id进行赋值,不仅要赋值隐藏域,也需要赋值给下拉框$("#myTabContent .form-commonsearch input[name='type_id-operate']").val($dir_id);$("#myTabContent .form-commonsearch select[name='type_id']").val($dir_id);$(".form-commonsearch").submit();$("#dir_id").val($dir_id);dir_address($dir_id);});
})$(function(){$('body').on('click','.add-dir-file',function(){$dir_id = $("#dir_id").val();Fast.api.open('auth/filelist/add?dir_id='+$dir_id, __('添加'),{end:function(){dir_address($dir_id); //获取当前位置}});});
});
<style>ul{margin:0;padding:0;}li{list-style: none;}li a{line-height: 24px;height: 24px;display: inline-block;color:#333;}.jstree-default li{display: block;text-align: left;margin:15px 0;}.jstree-default li img{width: 20px;margin-right:10px;vertical-align: middle;}.jstree-default li span{float:right;}#add_file_path{float:right;}
</style>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"><div class="panel panel-default panel-intro file-path-info"><p class="file-title">文件目录<a href="javascript:;" id="add_file_path">添加目录</a></p><input type="hidden" id="dir_id" value="0"><p id="address">当前位置:<a href="">全部</a></p><ul class="jstree-default">{foreach name="parent_list" item="vo"}<li><a href="javascript:;" class="child_nav" dataid="{$vo.id}"><img src="/assets/img/folder.svg">{$vo.type_name}</a><span>{$vo.updatetime_text}</span></li>{/foreach}</ul></div>
</div>
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
</div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/334430.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【PROXYCHAINS】Kali Linux 上配置NAT PROXYCHAINS保姆级教程

kali linux配置agent 在博主配置kali 的时候遇到了一些小问题&#xff0c;主要就是连接一直报错超时。 方法一&#xff1a;优点&#xff1a;免费&#xff0c;但是agent很不稳定 搜索免费ip,在Google搜索free proxy list 检查可用ip 连接成功 cd /etcls |grep redsnano reds…

检索模型预训练方法:RetroMAE

论文title&#xff1a;https://arxiv.org/pdf/2205.12035RetroMAE: Pre-Training Retrieval-oriented Language Models Via Masked Auto-Encoder 论文链接&#xff1a;https://arxiv.org/pdf/2205.12035 摘要 1.一种新的MAE工作流&#xff0c;编码器和解器输入进行了不同的掩…

go语言初识别(五)

本博客内容涉及到&#xff1a;切片 切片 1. 切片的概念 首先先对数组进行一下回顾&#xff1a; 数组定义完&#xff0c;长度是固定的&#xff0c;例如&#xff1a; var num [5]int [5]int{1,2,3,4,5}定义的num数组长度是5&#xff0c;表示只能存储5个整形数字&#xff0c…

SCI一区 | Matlab实现PSO-TCN-LSTM-Attention粒子群算法优化时间卷积长短期记忆神经网络融合注意力机制多变量时间序列预测

SCI一区 | Matlab实现PSO-TCN-LSTM-Attention粒子群算法优化时间卷积长短期记忆神经网络融合注意力机制多变量时间序列预测 目录 SCI一区 | Matlab实现PSO-TCN-LSTM-Attention粒子群算法优化时间卷积长短期记忆神经网络融合注意力机制多变量时间序列预测预测效果基本介绍程序设…

Docker 常用命令大全!!

Docker 常用命令 一、启动类1. 启动 docker2. 关闭 docker3. 重新启动 docker4. docker 设置自启动5. 查看 docker 运行状态6. 查看 docker 版本号等信息7. docker 帮助 二、 镜像类1. 查看镜像2. 搜索镜像3. 拉取镜像4. 运行镜像5. 删除镜像6. 加载镜像7. 保存镜像 三、容器类…

【css3】02-css3新特性之选择器篇

目录 1 属性选择器 2 结构伪类选择器 3 其他选择器 :target和::selection ::first-line和::first-letter 4 伪类和伪元素的区别 伪类&#xff08;Pseudo-classes&#xff09; 伪元素&#xff08;Pseudo-elements&#xff09; 伪类和伪元素的区别 1 属性选择器 ☞ 属性选…

BIO/NIO学习

在传送文件的时候常常出现这么一个问题&#xff0c;就是当客户端的文件全部传送完了之后&#xff0c;服务器没有接收到客户端那边传过的停止信号&#xff0c;所以服务器也就跟着客户端停止运行了&#xff0c;我们可以使用 try {socket.shutdownOutput();} catch (IOException e…

OrangePi AIpro开发板,使用了310B,昇腾310B较于昇腾310有何性能提升?

OrangePi AIpro开发板 他们对应的模组分别是&#xff1a;Atlas 200 AI和Atlas 200I A2 310&#xff1a;基本规格 - Atlas 200 AI加速模块 用户指南 14 - 华为 (huawei.com) 310B&#xff1a;基本规格 - Atlas 200I A2 加速模块 用户指南 04 - 华为 (huawei.com)

栈的特性及代码实现(C语言)

目录 栈的定义 栈的结构选取 链式储存结构和顺序栈储存结构的差异 栈的代码实现 "stack.h" "stack.c" 总结 栈的定义 栈&#xff1a;栈是限定仅在表尾进行插入和删除操作的线性表。 我们把运行插入的和删除的一段叫做栈顶&#xff08;TOP&#xff…

vmware hostd占用443端口解决方法

原因&#xff1a;VMware 准备弃用的虚拟机共享功能&#xff0c;目前仍然存在该进程启动&#xff0c;并且占用443端口&#xff01; 解决&#xff1a; 1.临时解决 在任务管理器中结束名为“VMware hostd”进程 2.永久生效 打开VMware &#xff0c;编辑——首选项——共享虚拟机—…

鸿蒙ArkUI-X跨平台开发:【资源分类与访问】

资源分类与访问 应用开发过程中&#xff0c;经常需要用到颜色、字体、间距、图片等资源&#xff0c;在不同的设备或配置中&#xff0c;这些资源的值可能不同。 应用资源&#xff1a;借助资源文件能力&#xff0c;开发者在应用中自定义资源&#xff0c;自行管理这些资源在不同…

【NumPy】全面解析NumPy的bitwise_xor函数:高效按位异或操作指南

&#x1f9d1; 博主简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟&#xff0c;欢迎关注。提供嵌入式方向…

【全开源】二手车置换平台系统小程序(FastAdmin+ThinkPHP+Uniapp)

二手车置换平台系统 特色功能&#xff1a; 车辆评估&#xff1a;系统提供车辆状况、性能和价值的评估功能&#xff0c;通过拍照、上传图片等方式自动识别车辆信息并给出估价建议&#xff0c;帮助买家和卖家更准确地了解车辆价值。 在线交易&#xff1a;平台提供在线购车、售车…

二十九、openlayers官网示例DeclutterGroup解析——避免矢量图层的文字重叠

官网demo地址&#xff1a; Declutter Group 这篇说的是如何设置矢量图层上多数据点文字不重叠。 主要是属性declutter &#xff0c;用于处理矢量图层上重叠的标注和符号&#xff0c;为true时启用去重叠功能。所有矢量特征的标注和符号都会被处理以避免重叠。false则与之相反。…

【从零开始学习RabbitMQ | 第二篇】如何确保MQ的可靠性和消费者可靠性

目录 前言&#xff1a; MQ可靠性&#xff1a; 数据持久化&#xff1a; Lazy Queue&#xff1a; 消费者可靠性&#xff1a; 消费者确认机制&#xff1a; 消费失败处理&#xff1a; MQ保证幂等性&#xff1a; 方法一&#xff1a; 总结&#xff1a; 前言&#xff1a; …

【UE5.1 角色练习】06-角色发射火球-part2

目录 效果 步骤 一、火球生命周期 二、添加可被伤害的NPC 三、添加冲量 在上一篇&#xff08;【UE5.1 角色练习】06-角色发射火球-part1&#xff09;基础上继续实现角色发射火球相关功能 效果 步骤 一、火球生命周期 为了防止火球没有命中任何物体而一直移动下去&#…

揭秘Tensor Core黑科技:如何让AI计算速度飞跃

揭秘 Tensor Core 底层&#xff1a;如何让AI计算速度飞跃 Tensor Core&#xff0c;加速深度学习计算的利器&#xff0c;专用于高效执行深度神经网络中的矩阵乘法和卷积运算&#xff0c;提升计算效率。 Tensor Core凭借混合精度计算与张量核心操作&#xff0c;大幅加速深度学习…

element ui 下拉框Select 选择器 上下箭头旋转方向样式错乱——>优化方案

目录 前言1、问题复现2、预期效果3、input框样式修改解析4、修改方案 &#x1f680;写在最后 前言 测试A&#xff1a;那啥&#xff01;抠图仔&#xff0c;样式怎么点着点着就出问题了。 前端&#xff1a;啥&#xff1f;css样式错乱了&#xff1f;你是不是有缓存啊&#xff01…

高效编写大模型 Prompt 提示词,解锁 AI 无限创意潜能

随着 ChatGPT 的出现&#xff0c;AI 成为新的焦点&#xff0c;有人说过“未来 50%的工作将是提示词工作”&#xff0c;目前很多公司也在开始招聘 Prompt 提示词工程师。Prompt&#xff08;提示词&#xff09;成为了连接创意与技术的桥梁&#xff0c;它不仅是简单的指令&#xf…

ubuntu22.04安装调节显示器亮度工具

1 介绍 软件名叫 DDC/CI control&#xff0c;官网 2 安装方法 sudo apt install intltool i2c-tools libxml2-dev libpci-dev libgtk2.0-dev liblzma-dev3 效果 进入软件&#xff0c;忽略告警信息