簡單的jQuery 四級分類實用插件

前言

最近因需要自己封裝了一個很簡單的四級分類的jQuery插件，主要用於后台數據的傳輸和獲取。接下來就分享一下這個實用的插件吧。

正文

老規矩，先看一下效果，這個就很丑了，沒有美化的，因為主要還是用於后台界面使用的，同時請忽略測試數據的內容：

 

那么下面就介紹一下使用方式：

首先html代碼：

<div class="container">
    <input class="selectBtn" type="button" value="選擇分類">
    <!-- 分類容器 -->
    <div class="classify"></div>
</div>

最外層的是.container容器，鑒於這個類名比較常用，大家可以自行修改，換成自己覺得合適的類名，當然也需要修改樣式文件里相對應的類名，具體可以看一下樣式文件里查找修改，代碼量不多，修改很方便的。

在.container這個容器里，有一個選擇分類按鈕，還有一個.classify的div，數據生成的html代碼將存放其中。

下面看一下如何調用這個插件，以實現上圖效果：

$(function(){
    //測試數據，json格式
    var data = [
        {"name":"食物","sub":[{"name":"水果","sub":[{"name":"香蕉","sub":[{"name":"泰國風味"},{"name":"越南風味"},{"name":"老撾風味"}]}]},{"name":"水果","sub":[{"name":"香蕉","sub":[{"name":"泰國風味"},{"name":"越南風味"},{"name":"老撾風味"}]}]}]},
        {"name":"家具","sub":[{"name":"椅子","sub":[{"name":"好椅子"},{"name":"爛椅子"},{"name":"沒有椅子"}]},{"name":"桌子","sub":[{"name":"好桌子"},{"name":"爛桌子"},{"name":"沒有桌子"}]}]},
        {"name":"景點","sub":[{"name":"北京"},{"name":"上海"},{"name":"廣州"},{"name":"深圳"}]}
        ];
    //實例化
    var classify = new Classify(".classify",data);
    //測試按鈕獲取選中數據，json格式
    $('.a').click(function(){
        alert(classify.result[0]);
    });
});

對照上面的代碼，有幾個注意點需要說明：

1.數據是以json格式傳輸和獲取的，也就是說后台把一串json數據傳過來，顯示在前台，前台選擇好分類后，返回的數據格式也是json格式。我這里是模擬數據，具體使用時通過Ajax進行數據傳輸。

2.由於我html代碼是根據這個json數據來動態生成的，所以json對象的屬性名要按照我的寫法定義的來寫：這里就是“name”和 “sub”，分別代表當前的分類名和它子項的分類。如果沒有子項分類，就不寫"sub”。而且總的層級不超過四級。大家看一下上面的變量名為data的json數據串就可以知道規律了。

3.實例化，需要傳入兩個參數。第一個參數就是包含這個動態生成的html代碼的容器，這里就是.classify；第二個參數就是我們的json數據 。

4.從上面的gif圖也可以看到，每次選擇后點擊確定按鈕，就會重新獲取一次數據，並保存在該對象的一個屬性result里。注意的是這個result屬性里保存的數據依然是json格式的，所以可以直接傳輸到后台進行處理，以方便進行下一步的邏輯操作。這里我為了測試就使用了一個查看按鈕來獲取result的第一個元素對象，返回的當然就是一個object對象。不管以怎么樣的方式獲取，數據都是在result這個屬性里。

 

最后

OK，講了這么多注意點，其實真正用起來是很方便的。大家不妨試一下。

github地址：https://github.com/JR93/classify

 

若需要轉載，請注明出處，謝謝！