效果图


[目录结构]
/layui
/layui_exts/horizontalClassify

layui.config({
  base: '../../../layui_exts/' //配置 layui 第三方扩展组件存放的基础目录
}).extend({
  horizontalClassify: 'horizontalClassify/horizontalClassify'
}).use(['horizontalClassify'], function(){
  var horizontalClassify = layui.horizontalClassify;
  
  // 执行示例
  horizontalClassify.render({
    elem: '#test'
    , title : ['一级分类', '二级分类', '三级分类', '四级分类'] // 自定义水平分类标题
    , showSearch: true // 分类是否可搜索
    , url : '/demo//horizontalClassify/list' // 获取分类列表接口
    , delUrl : '/demo/horizontalClassify/del' // 删除分类接口
    , addUrl : '/demo/horizontalClassify/add' // 添加分类接口
    , editUrl : '/demo/horizontalClassify/edit' // 编辑分类接口
  });
});

接口响应数据示例
url：{"code":"200","message":"成功","data":[{"id":1,"parentId":null,"name":"一级分类1"},{"id":2,"parentId":null,"name":"一级分类2"},{"id":3,"parentId":null,"name":"一级分类3"}]}
delUrl：{"code":"200","message":"成功","data":null}
addUrl：{"code":"200","message":"成功","data":{"id":14,"parentId":null,"name":"测试"}}
editUrl：{"code":"200","message":"成功","data":null}