『代碼』JS封裝 Ajax級聯下拉式清單

  1 //當一個 下拉式清單 改變時，觸發所有聯動；（警告：各下拉式清單之間 請不要出現 循環相依性）  2 //本函數，遵守如下規範：不使用任何記憶體資料（所有資料都是 即時使用，即時擷取，資料即時），不初始化註冊，  3 //該規範可以在 HTML 出現任何意外時，保持最好的穩定  4 function RefreshLinkage(ddlCtrl) {  5     var curId = !ddlCtrl ? "" : ddlCtrl.id;  6     //if (curId == undefined || curId.replace(" ","").length <= 0) return;      //不指定重新整理控制項，則重新整理所有控制項  7     //var curValue = ddlCtrl.value;                                             //只要觸發之後，讓子控制項自己尋找需要的值：不需要當前值  8   9     if (curId && ddlCtrl) { 10         var hfValueCtrlId = $(ddlCtrl).attr("valueCtrlId"); 11         if (!hfValueCtrlId) hfValueCtrlId = "hf_" + curId; 12         $("#" + hfValueCtrlId).val($(ddlCtrl).val()); 13     } 14  15     $("select").each(function (index, elem) { 16         if (!curId || elem.id != curId) { //全部重新整理 或者 不聯動自己  17             var parentId = $(elem).attr("parentId"); 18             if (parentId != undefined && ("" + parentId).replace(" ", "").length > 0) { 19                 var parentIds = parentId.split(','); //分割父級Id 20                 if (!curId || parentIds.indexOf(curId) >= 0) { //如果某個控制項被當前控制項聯動 21                     //操作 聯動子控制項 22                     refreshOptions(elem); 23                 } 24             } 25         } 26     }); 27  28     //重新整理 指定的下拉式清單 29     function refreshOptions(elem) { 30         if (!elem || !elem.id) return; 31          32         var parentId = $(elem).attr("parentId"); 33         var parentKey = $(elem).attr("parentKey"); 34         if (!parentId || !parentKey) return; 35  36         var parentIds = parentId.split(','); 37         var parentKeys = parentKey.split(','); 38  39         if (parentKeys.length != parentIds.length) 40             throw new Error("Linkage Select \"" + elem.id + "\": 'ParentKey' And 'ParentId' Length Is Not Same!"); 41  42         var elemValueId = $(ddlCtrl).attr("valueCtrlId"); 43         if (!elemValueId) elemValueId = "hf_" + elem.id; 44  45  46         //清空下拉式清單 47         if ($(elem).find("option").length > 0)   48             $("#" + elemValueId).val(''); 49         $(elem).find("option").remove(); 50  51         //建立預設行 52         var withEmpty = $(elem).attr("withEmpty") != "false"; 53         var emptyValue = ($(elem).attr("emptyValue") || ''); 54         var emptyText = ($(elem).attr("emptyText") || ((GetSettingValue("IsEnglish", true)) ? "Please Select" : "請選擇")); 55         if (withEmpty) { 56             $(elem).append("<option value='{V}'>{T}</option>".replace("{V}", emptyValue).replace("{T}", emptyText)); 57         } 58  59  60         //需要的資料 61         var parentIsEmpty = true; 62         var jsonStr = "{ \"__Action\":\"RefreshSelect\", \"__SelectCtrl\":\"" + elem.id + "\", "; 63         for (var j = 0; j < parentKeys.length; j++) { 64             var parentValue = ($("#" + parentIds[j]).val() || ''); 65             jsonStr = jsonStr + "\"" + parentKeys[j] + "\":\"" + parentValue + "\"" + (j == parentKeys.length - 1 ? "" : ", "); 66             if (parentValue && parentValue != emptyValue) parentIsEmpty = false; 67         } 68         jsonStr = jsonStr + "}"; 69  70  71         //如果所有父級都沒有資料 則 不進行 Ajax 72         if (parentIsEmpty) return; 73  74  75         //Ajax提交 76         var jsonData = JSON.parse(jsonStr); 77         var postUrl = ($(elem).attr("postUrl") || (window.location.href));  //沒有指定 Post地址，則 指向 自身頁面 78         postUrl = postUrl + (postUrl.indexOf("?") >= 0 ? ("&_rd=" + Math.random()) : ("?_rd=" + Math.random()));  //防止緩衝 79         $.post(postUrl, jsonData, 80             function (data, status) { 81                 //alert("Data: " + data + "\nStatus: " + status); 82                 if (data != undefined && data.length > 0) { 83                     //動態擷取的行 84                     var optionTemp = ($(elem).attr("optionTemp") || "<option value='{V}'>{T}</option>"); 85                     $.each(data, function (itemIndex, itemElem) { 86                         var html = perfectExpres(optionTemp, itemElem); 87                         $(elem).append(html); 88                     }); 89  90                     //用隱藏控制項的值賦給 下拉式清單控制項 91                     var $valueCtrl = $("#" + elemValueId); 92                     if($valueCtrl.length>0) 93                         $(elem).val($valueCtrl.val()); 94                      95                     //觸發這個被改變的 下拉式清單的改變事件 96                     RefreshLinkage(elem); 97                 } 98             }, "json"); 99     }100 101     //迴圈 object 中的所有屬性，替換 expres 中，對應的部分；102     function perfectExpres(expres, object) {103         for (var key in object) {104             expres = expres.replace("{" + key + "}", (object[key] || ''));105         }106         return expres;107     }108 }