『代码』JS封装 Ajax级联下拉列表
2013-05-16 18:40
656 查看
//当一个 下拉列表 改变时,触发所有联动;(警告:各下拉列表之间 请不要出现 循环依赖) //本函数,遵守如下规范:不使用任何内存数据(所有数据都是 即时使用,即时获取,数据实时),不初始化注册, //该规范可以在 HTML 出现任何意外时,保持最好的稳定 function RefreshLinkage(ddlCtrl) { var curId = !ddlCtrl ? "" : ddlCtrl.id; //if (curId == undefined || curId.replace(" ","").length <= 0) return; //不指定刷新控件,则刷新所有控件 //var curValue = ddlCtrl.value; //只要触发之后,让子控件自己寻找需要的值:不需要当前值 if (curId && ddlCtrl) { var hfValueCtrlId = $(ddlCtrl).attr("valueCtrlId"); if (!hfValueCtrlId) hfValueCtrlId = "hf_" + curId; $("#" + hfValueCtrlId).val($(ddlCtrl).val()); } $("select").each(function (index, elem) { if (!curId || elem.id != curId) { //全部刷新 或者 不联动自己 var parentId = $(elem).attr("parentId"); if (parentId != undefined && ("" + parentId).replace(" ", "").length > 0) { var parentIds = parentId.split(','); //分割父级Id if (!curId || parentIds.indexOf(curId) >= 0) { //如果某个控件被当前控件联动 //操作 联动子控件 refreshOptions(elem); } } } }); //刷新 指定的下拉列表 function refreshOptions(elem) { if (!elem || !elem.id) return; var parentId = $(elem).attr("parentId"); var parentKey = $(elem).attr("parentKey"); if (!parentId || !parentKey) return; var parentIds = parentId.split(','); var parentKeys = parentKey.split(','); if (parentKeys.length != parentIds.length) throw new Error("Linkage Select \"" + elem.id + "\": 'ParentKey' And 'ParentId' Length Is Not Same!"); var elemValueId = $(ddlCtrl).attr("valueCtrlId"); if (!elemValueId) elemValueId = "hf_" + elem.id; //清空下拉列表 if ($(elem).find("option").length > 0) $("#" + elemValueId).val(''); $(elem).find("option").remove(); //创建默认行 var withEmpty = $(elem).attr("withEmpty") != "false"; var emptyValue = ($(elem).attr("emptyValue") || ''); var emptyText = ($(elem).attr("emptyText") || ((GetSettingValue("IsEnglish", true)) ? "Please Select" : "请选择")); if (withEmpty) { $(elem).append("<option value='{V}'>{T}</option>".replace("{V}", emptyValue).replace("{T}", emptyText)); } //需要的数据 var parentIsEmpty = true; var jsonStr = "{ \"__Action\":\"RefreshSelect\", \"__SelectCtrl\":\"" + elem.id + "\", "; for (var j = 0; j < parentKeys.length; j++) { var parentValue = ($("#" + parentIds[j]).val() || ''); jsonStr = jsonStr + "\"" + parentKeys[j] + "\":\"" + parentValue + "\"" + (j == parentKeys.length - 1 ? "" : ", "); if (parentValue && parentValue != emptyValue) parentIsEmpty = false; } jsonStr = jsonStr + "}"; //如果所有父级都没有数据 则 不进行 Ajax if (parentIsEmpty) return; //Ajax提交 var jsonData = JSON.parse(jsonStr); var postUrl = ($(elem).attr("postUrl") || (window.location.href)); //没有指定 Post地址,则 指向 自身页面 postUrl = postUrl + (postUrl.indexOf("?") >= 0 ? ("&_rd=" + Math.random()) : ("?_rd=" + Math.random())); //防止缓存 $.post(postUrl, jsonData, function (data, status) { //alert("Data: " + data + "\nStatus: " + status); if (data != undefined && data.length > 0) { //动态获取的行 var optionTemp = ($(elem).attr("optionTemp") || "<option value='{V}'>{T}</option>"); $.each(data, function (itemIndex, itemElem) { var html = perfectExpres(optionTemp, itemElem); $(elem).append(html); }); //用隐藏控件的值赋给 下拉列表控件 var $valueCtrl = $("#" + elemValueId); if($valueCtrl.length>0) $(elem).val($valueCtrl.val()); //触发这个被改变的 下拉列表的改变事件 RefreshLinkage(elem); } }, "json"); } //循环 object 中的所有属性,替换 expres 中,对应的部分; function perfectExpres(expres, object) { for (var key in object) { expres = expres.replace("{" + key + "}", (object[key] || '')); } return expres; } }
相关文章推荐
- 下拉列表 级联菜单操作(js代码的级联操作)
- 原生js封装二级城市下拉列表的实现代码
- js+ajax 实现搜索下拉列表
- 原生js封装二级城市下拉列表
- javascript级联下拉列表实例代码(自写)
- 2行代码完成级联下拉列表框
- 原生js封装AJAX(代码+注释)
- JS级联下拉列表,DOM编程
- js+xml生成级联下拉框代码
- js动态生成级联下拉列表
- js操作select下拉列表的一些通用代码
- js 动态生成下拉列表 下拉列表级联
- js操作select下拉列表的一些通用代码
- 级联下拉列表 ajax实现(两种方式)
- Select标签下拉列表二级联动级联实例代码
- 我的js无限级下拉列表级联插件
- js操作select下拉列表的一些通用代码
- js+xml生成级联下拉框代码
- js技术实现html页面解析xml文档的级联下拉列表操作
- 用原生JS对AJAX做简单封装的实例代码