基于BootStrapMetronic开发框架经验小结【三】下拉列表Select2插件的使用

  

    重要级别
    

      
    
  

 

  

    认可程度
    

      
    
  

  

    吸烟
    

      
        吸烟
        不吸烟
      
    
  

$(document).ready(function() {
 $(".js-example-basic-single").select2();
});

//绑定字典内容到指定的Select控件
function BindSelect(ctrlName, url) {
  var cOntrol= $('#' + ctrlName);
  //设置Select2的处理
  control.select2({
    allowClear: true,
    formatResult: formatResult,
    formatSelection: formatSelection,
    escapeMarkup: function (m) {
      return m;
    }
  });

  //绑定Ajax的内容
  $.getJSON(url, function (data) {
    control.empty();//清空下拉框
    $.each(data, function (i, item) {
      control.append(" " + item.Text + "");
    });
  });
}

//绑定字典内容到指定的控件
function BindDictItem(ctrlName, dictTypeName) {
  var url = '/DictData/GetDictJson&＃63;dictTypeName=' + encodeURI(dictTypeName);
  BindSelect(ctrlName, url);
}

 //初始化字典信息（下拉列表）
    function InitDictItem() {
      //部分赋值参考      
      BindDictItem("Area","市场分区");
      BindDictItem("Industry", "客户行业");
      BindDictItem("Grade","客户级别");
      BindDictItem("CustomerType", "客户类型");
      BindDictItem("Source", "客户来源");
      BindDictItem("CreditStatus", "信用等级");
      BindDictItem("Stage","客户阶段");
      BindDictItem("Status", "客户状态");
      BindDictItem("Importance", "重要级别");   
      // 绑定省份、城市、行政区（联动处理）
      BindSelect("Province", "/Province/GetAllProvinceNameDictJson");
      $("#Province").on("change", function (e) {
        var provinceName = $("#Province").val();
        BindSelect("City", "/City/GetCitysByProvinceNameDictJson&＃63;provinceName="+ provinceName);
      });
      $("#City").on("change", function (e) {
        var cityName = $("#City").val();
        BindSelect("District", "/District/GetDistrictByCityNameDictJson&＃63;cityName="+ cityName);
      });
    }

[ { "Text": "", "Value": "" }, { "Text": "学术会议", "Value": "学术会议" }, { "Text": "朋友介绍", "Value": "朋友介绍" }, { "Text": "广告媒体", "Value": "广告媒体" } ]

//绑定Ajax的内容
  $.getJSON(url, function (data) {
    control.empty();//清空下拉框
    $.each(data, function (i, item) {
      control.append(" " + item.Text + "");
    });
  });

 /// 

    /// 根据字典类型获取对应的字典数据，方便UI控件的绑定
    /// 
    /// 字典类型名称
    /// 
    public ActionResult GetDictJson(string dictTypeName)
    {
      List treeList = new List();
      CListItem pNode = new CListItem("", "");
      treeList.Insert(0, pNode);
      Dictionary dict = BLLFactory.Instance.GetDictByDictType(dictTypeName);
      foreach (string key in dict.Keys)
      {
        treeList.Add(new CListItem(key, dict[key]));
      }
      return ToJsonContent(treeList);
    }

 //绑定添加界面的公司、部门、直属经理
      BindSelect("Company_ID", "/User/GetMyCompanyDictJson&＃63;userId="+@Session["UserId"]);
      $("#Company_ID").on("change", function (e) {
        var companyid = $("#Company_ID").val();
        BindSelect("Dept_ID", "/User/GetDeptDictJson&＃63;parentId="+ companyid);
      });
      $("#Dept_ID").on("change", function (e) {
        var deptid = $("#Dept_ID").val();
        BindSelect("PID", "/User/GetUserDictJson&＃63;deptId="+ deptid);
      });

[ { "Text": "爱奇迪集团", "Value": "1" }, { "Text": " 广州分公司", "Value": "3" }, { "Text": " 上海分公司", "Value": "4" }, { "Text": " 北京分公司", "Value": "5" } ]

[ { "Text": "广州分公司", "Value": "3" }, { "Text": "总经办", "Value": "6" }, { "Text": "财务部", "Value": "7" }, { "Text": "工程部", "Value": "8" }, { "Text": "产品研发部", "Value": "9" }, { "Text": "　　开发一组", "Value": "14" }, { "Text": "　　开发二组", "Value": "15" }, { "Text": "　　测试组", "Value": "16" }, { "Text": "市场部", "Value": "10" }, { "Text": "　　市场一部", "Value": "23" }, { "Text": "　　市场二部", "Value": "24" }, { "Text": "综合部", "Value": "11" }, { "Text": "生产部", "Value": "12" }, { "Text": "人力资源部", "Value": "13" } ]

//清空Select2控件的值
      $("#PID").select2("val", "");
      $("#Company_ID").select2("val", "");
      $("#Dept_ID").select2("val", "");

 var select2Ctrl = ["Area","Industry","Grade","CustomerType","Source","CreditStatus","Stage","Status","Importance"];
      $.each(select2Ctrl, function (i, item) {
        var ctrl = $("#" + item);
        ctrl.select2("val", "");
      });

 $("#CustomerType").select2("val", info.CustomerType);
         $("#Grade").select2("val", info.Grade);
         $("#CreditStatus").select2("val", info.CreditStatus);
         $("#Importance").select2("val", info.Importance);
         $("#IsPublic").select2("val", info.IsPublic);

 $("#Province").select2("val", info.Province).trigger('change');//联动
         $("#City").select2("val", info.City).trigger('change');//联动
         $("#District").select2("val", info.District); 
        $("#Company_ID1").select2("val", info.Company_ID).trigger('change');
        $("#Dept_ID1").select2("val", info.Dept_ID).trigger('change');
        $("#PID1").select2("val", info.PID);