重构之美 -- 函数封装十四式第二式: js实现三级目录联动统一ajax请求

第二式

一. 拆招

今天笔者在操作三级联动查询的时候感受到了被自己支配的恐惧: 故事是这样的(先闷一口酒, 心里苦)

一开始并没有想到封装js的三级联动, 本着解决眼下问题的心态去写 (一个人敲代码容易自嗨) , 起初,我只考虑到三级联动查询的情况 (本宝宝还是年轻啊) 这个时候问题还不是很大, 也就是一个三级联动占100行左右代码

后面我在修改,新增的时候本能的光速快捷键(你懂的) 移植代码发现情况不对劲首先, 无法重用

比如修改应该是 界面已经帮我们做了一次三级联动的选择所以我们看到的是每个下拉框有默认选中的值 然后才会响应三级联动

当时我的心态崩了, 一个三级联动, 充斥了我好几个js 实在忍无可忍, 所幸凭借着多年闯荡江湖的经验咱来统一重构一哈

二. 修炼

下面这个代码 , 花了老夫3个小时不停的打磨, 才大功告成(不到100行), 便宜你们了
注: 整体重构在一个js 页面通过两个函数实现

使用时: 需要注意必须保证你所操作的三级目录所在的select标签中有
id 并且id值就是下面levelName

/**
 * 目录列表查询的 统一实现
 * 包括设置默认选中值
 * @param levelName 下拉列表的标识(可以是id,name属性值)
 * @param pid 父级目录Id
 * @param selectId 选中的Id值
 * @returns
 */
function generalAjaxV2(levelName, pid, selectId) {
 if (levelName == null) {
  layer.msg(levelName+"目录不存在", {icon: 6, time:1500});
  return;
 }
 
 $.ajax({
  type: "GET",
  url: "listOtherCategory.json", //请求后台的路径
  data: {"pid" : pid},
  dataType: "json",
  success: function(res) {
   $("#"+levelName).html("");
   var options = "<option>--请选择--</option>"
   for(var i = 0; i < res.length; i++) {
    if(selectId !=null && selectId != undefined && selectId == res[i].id) {
     options += "<option selected='selected' value="+res[i].id+">"+res[i].categoryName+"</option>";
    } else {
     options += "<option value="+res[i].id+">"+res[i].categoryName+"</option>";
    }
   }
   $("#"+levelName).html(options);
  },
  error: function(res) {
   window.location.href = "list";
   layer.msg("目录查询失败", {icon: 6, time:1500});
  }
 });
}



/**
 * 三级联动 动态查询
 * @param Lv1Name 
 * @param Lv2Name
 * @param Lv3Name
 * @param selectId
 * @returns
 */
function categoryChange(Lv1Name, Lv2Name, Lv3Name, selectId) {
 //触发change函数的name值
 var name = null;
 //响应联动的目录 name值
 var ajaxName = null;
 if (Lv1Name != null) {
  name = Lv1Name;
  ajaxName = Lv2Name;
  
 } else if (Lv1Name == null) {
  name = Lv2Name;
  ajaxName = Lv3Name;
 } else {
  layer.msg("没有对应的子目录列表!", {icon: 6, time:1500});
  return;
 }
 
 $("#"+name).change(function(){
  var index = $(this).prop("selectIndex");
  var pid = $(this).val();
  if (pid.indexOf("请选择") ==-1 && pid != "" && 
    null != pid && index != 0) {
   
   generalAjaxV2(ajaxName, pid, null);
   
  } else {
   //如果未选择或者选中第一项  那么刷新待响应的目录
   $("#"+ajaxName).html("");
   var options = "<option></option>";
   $("#"+ajaxName).html(options);
  }
  //如果一级目录触发 ,那么三级必然需要刷新
  if(Lv1Name != null) {
   $("#"+Lv3Name).html("");
   var options = "<option></option>";
   $("#"+Lv3Name).html(options);
  }
 });
}

调用注意事项:

对于查询新增页面所用的三级联动直接在jquery初始化中调用下面的代码:

//立刻加载一级目录
 generalAjaxV2("appLevel1", null, null);
 //动态加载二级
 categoryChange("appLevel1", "appLevel2", "appLevel3", null);
 //动态加载三级
 categoryChange(null, "appLevel2", "appLevel3", null);

对于修改页面 ,由于一个初始值所以需要多两行代码


 var Lv1Value = $("#level1Id").val();	//要初始化的选项id
 var Lv2Value = $("#level2Id").val();
 var Lv3Value = $("#level3Id").val();
 
 //立刻加载所选中的目录
 generalAjaxV2("appLevel1", null, Lv1Value);
 generalAjaxV2("appLevel2", Lv1Value, Lv2Value);
 generalAjaxV2("appLevel3", Lv2Value, Lv3Value);
 //动态加载二级
 categoryChange("appLevel1", "appLevel2", "appLevel3", null);
 //动态加载三级
 categoryChange(null, "appLevel2", "appLevel3", null);