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

mybwu_com發表於2014-05-04
JS

仿百度文庫文件上傳頁面的多級聯動分類選擇器第二版，支援在一個頁面同時使用多個分類選擇器；

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

原始碼下載地址：http://download.csdn.net/detail/testcs_dn/7290577

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


選擇狀態：



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

頁面呼叫程式碼及說明：

<!DOCTYPE html>
<html>
<head>
    <title>category</title>
    <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 = $("#divCate1").category({ hidField: "hidField0", onSelect: function () {
            this.setCategoryName();
        },
            onChange: function (cid, level, text) {
                $("#divResult1").html("您選擇的分類編號為：" + this.getCategoryCid() + "<br />隱藏輸入域的內容為：" + $("#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 = $("#divCate2").category({ onSelect: function (cid, level, name) {
            this.setCategoryName();
        },
            onChange: function (cid, level, text) {
                $("#divResult2").html("您選擇的分類編號為：" + this.getCategoryCid() + "<br />隱藏輸入域的內容為：" + $("#" + 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>
</head>

<body>
<!-- 分類選擇程式碼開始 -->
<!-- 為防止樣式被覆蓋，這裡全部使用行內樣式 -->
    <div id="divCate1">
        
    </div>
<!-- 分類選擇程式碼結束 -->

    <br />
    <br />
    <br />
    <br />
    <div id="divResult1"></div>
    <br />
    <br />
    <br />
    <br />
    <div id="divCate2"></div>
    <br />
    <br />
    <br />
    <br />
    <div id="divResult2"></div>
</body>
</html>
原始碼下載地址：http://download.csdn.net/detail/testcs_dn/7290577

相關文章