效果圖


[目錄結構]
/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 : ['一級分類(lèi)', '二級分類(lèi)', '三級分類(lèi)', '四級分類(lèi)'] // 自定義水平分類(lèi)標題
    , showSearch: true // 分類(lèi)是否可搜索
    , url : '/demo//horizontalClassify/list' // 獲取分類(lèi)列表接口
    , delUrl : '/demo/horizontalClassify/del' // 刪除分類(lèi)接口
    , addUrl : '/demo/horizontalClassify/add' // 添加分類(lèi)接口
    , editUrl : '/demo/horizontalClassify/edit' // 編輯分類(lèi)接口
  });
});

接口響應數據示例
url：{"code":"200","message":"成功","data":[{"id":1,"parentId":null,"name":"一級分類(lèi)1"},{"id":2,"parentId":null,"name":"一級分類(lèi)2"},{"id":3,"parentId":null,"name":"一級分類(lèi)3"}]}
delUrl：{"code":"200","message":"成功","data":null}
addUrl：{"code":"200","message":"成功","data":{"id":14,"parentId":null,"name":"測試"}}
editUrl：{"code":"200","message":"成功","data":null}