js仿百度文庫文檔上傳頁面的分類選擇器_第二版

仿百度文庫文檔上傳頁面的多級聯動分類選擇器第二版,支持在一個頁面同時使用多個分類選擇器;

此版本把HTML,CSS,以及圖片都封裝到“category.js”中,解決因文件路徑找不到樣式及圖片的問題;

源碼下載地址:https://download.csdn.net/detail/testcs_dn/7290577

初始狀態,一個頁面使用兩個,可以初始化之前選中的分類:

選擇狀態:vcD48cD48aW1nIHNyYz0=”https://www.2cto.com/uploadfile/Collfiles/20140505/2014050509014462.jpg” alt=”\” />

當選中一個分類後,會觸發“onChange”事件,如上圖中的“您選擇的分類編號為:xxx 隱藏輸入域的內容為:xxx”,就是通過“onChange”事件輸出的。

頁面調用代碼及說明:



    category
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="category.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //創建一個新的分類選擇器,支持一個頁面中使用多個分類選擇器
        //可選擇配置信息,默認值,說明:
        //sourceData:{ list:[] },                           //array:分類數據源,格式參考:data/categorySourceData.js
        //textDefault:"\u8BF7\u9009\u62E9\u5206\u7C7B",     //string:沒有選擇分類時的提示文字
        //onChange:null,                                    //event:當用戶選中最後一級節點時觸發
        //onSelect:null,                                    //event:當用戶單擊一個分類時觸發,此事件在onChange之前觸發
		//hidField											//string:隱藏值域的ID,可以自己指定;不指定的話實際的ID=默認ID+分類實例索引
															//onChange事件觸發後,會將當前選中的分類賦值給此域,格式:1,17,14
        var category1 = $("#pCate1").category({ hidField: "hidField0", onSelect: function () {
            this.setCategoryName();
        },
            onChange: function (cid, level, text) {
                $("#pResult1").html("您選擇的分類編號為:" + this.getCategoryCid() + "
隱藏輸入域的內容為:" + $("#hidField0").val()); } }); //可以通過設置selectItems屬性,設定初始選項 category1.selectItems = [{ cid: 1 }, { cid: 11}]; //重寫獲取分類的方法,可以在此方法中訪問後臺頁面,從數據庫獲取分類數據 //cid:分類編號 //level:分類級別 //返回值格式:{list: [{pcid: 0,cid: 1,name: "\u6559\u80b2\u4e13\u533a",isLast: false},{pcid: 0,cid: 1,name: "\u6559\u80b2\u4e13\u533a",isLast:true}]} //節點屬性說明: //pcid:父級分類編號,目前沒有用到 //cid:分類編號 //name:分類名稱 //isLast:是否為最後一級分類,需要根據此屬性確定顯示樣式及響應邏輯 category1.getCategory = function (cid, level) { var cate = null; $.ajax({ type: "GET", async: false, //這裡必須使用同步方式 url: "data/categorySourceData.htm", data: "T=" + Math.random(), success: function (data) { var sourceData = eval("(" + data + ")"); if (typeof cid == undefined || cid == null) { cate = sourceData; //註意:這裡直接return sourceData是不行的! return cate; } if (sourceData.list) { for (var i = 0; i < sourceData.list.length; i++) { if (sourceData.list[i].cid == cid) { cate = sourceData.list[i]; break; } } if (cate == null) { for (var i = 0; i < sourceData.list.length; i++) { cate = category1._getCategory(sourceData.list[i], cid); if (cate != null) { break; } } } } }, error: function (data) { alert(data); } }); return cate; }; //設置完成後通過load方法加載 category1.load(); /////////====================================================================================== var category2 = $("#pCate2").category({ onSelect: function (cid, level, name) { this.setCategoryName(); }, onChange: function (cid, level, text) { $("#pResult2").html("您選擇的分類編號為:" + this.getCategoryCid() + "
隱藏輸入域的內容為:" + $("#" + this.config.hidField).val()); } }); category2.selectItems = [{ cid: 4 }, { cid: 73 }, { cid: 193}]; category2.getCategory = function (cid, level) { var cate = null; $.ajax({ type: "GET", async: false, url: "data/categorySourceData.htm", data: "T=" + Math.random(), success: function (data) { var sourceData = eval("(" + data + ")"); if (typeof cid == undefined || cid == null) { cate = sourceData; //註意:這裡直接return sourceData是不行的! return cate; } if (sourceData.list) { for (var i = 0; i < sourceData.list.length; i++) { if (sourceData.list[i].cid == cid) { cate = sourceData.list[i]; break; } } if (cate == null) { for (var i = 0; i < sourceData.list.length; i++) { cate = category2._getCategory(sourceData.list[i], cid); if (cate != null) { break; } } } } }, error: function (data) { alert(data); } }); return cate; }; //設置完成後通過load方法加載 category2.load(); }); </script>













源碼下載地址:https://download.csdn.net/detail/testcs_dn/7290577

You May Also Like