效果圖


[目錄結(jié)構(gòu)]
/layui
/layui_exts/horizontalClassify

layui.config({
  base: '../../../layui_exts/' //配置 layui 第三方擴(kuò)展組件存放的基礎(chǔ)目錄
}).extend({
  horizontalClassify: 'horizontalClassify/horizontalClassify'
}).use(['horizontalClassify'], function(){
  var horizontalClassify = layui.horizontalClassify;
  
  // 執(zhí)行示例
  horizontalClassify.render({
    elem: '#test'
    , title : ['一級(jí)分類(lèi)', '二級(jí)分類(lèi)', '三級(jí)分類(lèi)', '四級(jí)分類(lèi)'] // 自定義水平分類(lèi)標(biāo)題
    , 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)接口
  });
});

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