效果如下:
这里踩过一个坑,fastadmin默认的展开合并预定义处理的变量是pid。
所以建表时父级id需要是pid;
当然不是pid也没关系,笔者这里是classify_id,多加一步处理一样能实现。
废话少说上代码:
首先在控制器
引用:use fast/Tree;
自动调取函数 _initialize 内添加以下代码:
classify_id 我重命名成pid了。本身是pid的忽略不计。
复制以下代码即可:
public function _initialize() { parent::_initialize(); $this->model = new appadminmodelClassify; // 必须将结果集转换为数组 $ruleList = collection($this->model->field('*,classify_id as pid')->order('id ASC')->select())->toArray(); foreach ($ruleList as $k => &$v) { $v['name'] = __($v['name']); unset($ruleList[$k]['classify_id']); } Tree::instance()->init($ruleList); $this->rulelist = Tree::instance()->getTreeList(Tree::instance()->getTreeArray(0), 'name'); $ruledata = [0 => __('None')]; foreach ($this->rulelist as $k => &$v) { $ruledata[$v['id']] = $v['name']; } }
复制控制器index方法:
public function index() { if ($this->request->isAjax()) { $list = $this->rulelist; $total = count($this->rulelist); $result = array("total" => $total, "rows" => $list); return json($result); } return $this->view->fetch(); }
接下来找到 js 文件:
目录:public/assets/js/backend/classify.js
注意:
原name:{field: 'name', title: __('Name')},
替换为: {field: 'name', title: __('Name'), align: 'left', formatter:function (value, row, index) { return value.toString().replace(/(&|&)nbsp;/g, ' '); } },
添加一列展开合并的按钮
{field: 'id', title: '展开', operate: false, formatter: Controller.api.formatter.subnode},
整段js示例:
// 初始化表格 table.bootstrapTable({ url: $.fn.bootstrapTable.defaults.extend.index_url, pk: 'id', sortName: 'id', columns: [ [ {checkbox: true}, {field: 'id', title: __('Id')}, {field: 'name', title: __('Name'), align: 'left', formatter:function (value, row, index) {return value.toString().replace(/(&|&)nbsp;/g, ' ');}}, {field: 'image', title: __('Image'), events: Table.api.events.image, formatter: Table.api.formatter.image}, {field: 'pid', title: __('Pid')}, {field: 'hotimage', title: __('Hotimage'), events: Table.api.events.image, formatter: Table.api.formatter.image}, {field: 'goods_id', title: __('Goods_id')}, {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,//隐藏导出 });
在 table.bootstrapTable下追加以下代码:
// 为表格绑定事件 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); });
还是js文件,下面api 替换为:
api: { formatter: { 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 || 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]")); } }
告成;
帮到你了留个赞,告辞
希望以上内容对你有所帮助!如果还有其他问题,请随时提问。 各类知识收集 拥有多年CMS企业建站经验,对 iCMS, Fastadmin, ClassCMS, LeCMS, PbootCMS, PHPCMS, 易优CMS, YzmCMS, 讯睿CMS, 极致CMS, Wordpress, HkCMS, YznCMS, WellCMS, ThinkCMF, 等各类cms的相互转化,程序开发,网站制作,bug修复,程序杀毒,插件定制都可以提供最佳解决方案。