Ligerui multi-choice dynamic drop-down box

Source: Internet
Author: User

This afternoon, I asked for an option that supports multiple choices and the plug-in uses ligerui. It was a little tricky at the time, because ligerui was never used! According to the API introduction, I also did a good job, but why is it not displayed? It is said that there is a little god who is very powerful. Please come and ask, the two points have passed, and there is still no result ...................

Okay, let's get into the question. First, we need to create a ligerui drop-down box. We must initialize a drop-down box when loading the page. Otherwise, it would be hard for you to ask your mom to come! (Well, I won't look at the API !)

First, let me talk about my current needs. I need to do something similar to secondary linkage. There are two drop-down boxes: one is the housing type, the other is the housing structure. When I select the housing type, format the house, and then... I made an onchange event in the house type ......

This is the HTML page code:

<input type="text" id="house_type" maxlength="20" onchange="show_houseType_child(this.value);"/>  <!--房屋类型下拉框--><input type="text" id="housing_pattern"  maxlength="20"/>   <!--房屋格局-->


JS Code, onchang event:

//页面加载的时候必须给下拉框初始化为一个下拉框   
 $("#housing_pattern").ligerComboBox({
     data: [{value_meaning:"--请选择--",mcs_sys_dict_data_id:"-1"}],
     textField: ‘value_meaning‘,  //页面显示的文本信息
     valueField:‘mcs_sys_dict_data_id‘,  //数据的id
     isMultiSelect: true,  //是否支持多选
     isShowCheckBox: true ,  //是否显示复选框
     valueFieldID: ‘value_mean‘//value_mean只是一个名称,可以随便取名
  });


//点击房产类型出现子菜单,没有写在页面加载中 function show_houseType_child(json){ if(combox.getValue()!=‘-1‘){ var mcs_sys_dict_id_id=combox.getValue(); $.ajax({ type: "get", url: "/MCS/sysmanage/mcssysdictdatabydictidempty.do", data: "mcs_sys_dict_id="+mcs_sys_dict_id_id+"&isEmpty=true",  //ajax向后台发送数据 success: function(data){ liger.get("housing_pattern").setData(data);  //返回data数据,并且赋值给文本框id为:housing_pattern } }); } }

Okay, it's basically shaped. Is there any doubt that the multiple choice is coming out? What about the single choice housing type? In fact, this company has been encapsulated, and I can only stick it out, and may report an error, crying!

JS housing type single choice:

     //房产类型方法    function init_cre_loan_type(json){        var cre_loan_type_params ={                dest_url:‘/sysmanage/mcssysdictdatabydictidempty.do?isEmpty=true&mcs_sys_dict_id=56 ‘,                t_col_name:‘house_type‘,                valueField:‘mcs_sys_dict_data_id‘,   //下拉框value对应的值,默认为id                textField:‘value_meaning‘,    //下拉框text对应的值,默认为text                def_val:‘first‘                };        combox = global_ligerui_extend.initCombox("house_type",null,cre_loan_type_params);        if(json){            //把值装载设定            global_ligerui_extend.syncRequestInitComboxData(json,"house_type");            //让其不可编辑            global_ligerui_extend.disabledCombox("house_type");        }else{                        global_ligerui_extend.initComboxDefVal("house_type");        }    }

JS encapsulated by the company:
You can also create a JS file named Global. ligerui. Extend. JS, and paste it to believe that you are absolutely amazing!

var global_ligerui_extend = {      /**       * 初始化树形下拉框,如果下拉框没有上级联动,将下拉框的值进行初始化       * @param inputObjName 下拉框对应的input名称       * @param onSelectedFunc 值被选择的事件       * @param params json对象,可以包含如下的值:       * 1 valueField   下拉框value对应的值,默认为id       * 2 textField    下拉框text对应的值,默认为text       * 3 dest_url     下拉框data对应的url       * 4 t_col_name   下拉框对应的数据库表字段名称       * 5 p_input_name 上级下拉框对应的文本框名称,多个使用逗号,分隔       * 6 c_input_name 下级下拉框对应的文本框名称,多个使用逗号,分隔       * * 7 def_val      下拉框的默认值,如果为‘‘或者null,则联动后值置为空,如果为‘first‘,联动后置为下拉框的第一个值       *                其他则直接选择值       * @returns       */      initTreeCombox:function(inputObjName,onSelectedFunc,params){          var that = this;          var manager = $("#"+inputObjName).ligerComboBox({                width: params.input_width || 135,                selectBoxWidth: 130,                selectBoxHeight: 150,                valueField: params.valueField || ‘id‘,                   textField: params.textField || ‘text‘,                valueFieldID: inputObjName+‘_hidden‘,                dest_url:params.dest_url || ‘‘,                   t_col_name:params.t_col_name || ‘‘,                   p_input_name:params.p_input_name || ‘‘,                   c_input_name:params.c_input_name||‘‘,                   def_val:params.def_val||‘‘,                treeLeafOnly: false,                tree: {                    data: [],                    nodeWidth: 133,                    checkbox: false,                    parentIcon: null,                    childIcon: null,                    onBeforeCancelSelect: function() {                        return false;                    }                },                onSelected: function(val){                    var options = this.options;                    if(options.is_linkage && $.trim(options.c_input_name)!=‘‘){                        var c_input_name_arr = options.c_input_name.split(‘,‘);                        for(var i=0;i<c_input_name_arr.length;i++){                            that.asyncRequestInitComboxData(c_input_name_arr[i]);                        }                    }                    if(options.is_linkage && onSelectedFunc){                        onSelectedFunc.call(this,val);                    }                }            });          return manager;      },      /**       * 同步获取后台数据,第一个参数固定,后面的参数为不固定参数,可以为一个或多个       * param:页面上各下拉框对应的值,应为后台数据库查询获得,与下拉框的t_col_name相对应       * inputObjName一个或多个需要设置下拉框数据和值的下拉框对应的文本框ID       */      syncRequestInitComboxData:function(param,inputObjNames){          var n = arguments.length;          var that = this;          for (var i = 1; i < n; i++) {              var inputObjName = arguments[i];              var comboxManage = $("#"+inputObjName).ligerGetComboBoxManager();              comboxManage.setLinkage(false);//取消联动              var options_1 = comboxManage.options;              var url = options_1.dest_url;//请求数据URL              var t_col_name = options_1.t_col_name;//该下拉框对应的数据库表字段名称              var defaultVal;              if(param == null){                  defaultVal = options_1.def_val;              }else{                  defaultVal = param[t_col_name];               }              var data = {};              var p_input_name = options_1.p_input_name;//该下拉框上一级对应的数据库字段名称              if(p_input_name != null && $.trim(p_input_name)!=‘‘){                  var paramArr = p_input_name.split(‘,‘);                  for(var j=0;j<paramArr.length;j++){                      var param_name = paramArr[j];                      var obj = $("#"+param_name).ligerGetComboBoxManager();                      var options = obj.options;                      var pn = options.t_col_name;                      if(param == null){                          data[pn] = $("#"+param_name+"_hidden").val();                      }else{                          data[pn] = param[pn];                      }                                                              }              }              $.ajax({                  type: "GET",                  url: globalUtil.getTimestampUrl(url),                  data: data,                  async: false,                  dataType: ‘json‘,                  success: function(json) {                      that.setComboxData(comboxManage,json,defaultVal);                      comboxManage.setLinkage(true);//恢复联动                  }              });          }      },      disabledCombox:function(inputObjName){          var comBoxManager = $("#"+inputObjName).ligerGetComboBoxManager();          comBoxManager.setDisabled();      },      /**       * 将下拉框的值进行初始化,首先将根级的下拉框重新初始化,根据联动其他的下拉框进行初始化       * @param inputObjNames 不定个数参数,根级的下拉框名称       */      initComboxDefVal:function(inputObjNames){          var n = arguments.length;          for (var i = 0; i < n; i++) {              var inputObjName = arguments[i];              this.asyncRequestInitComboxData(inputObjName);          }      },


I finally finished writing, but I am running a little bug. I will continue to improve it after I finish processing it.

My work starts again in a day, fight!

 

ligerui multiple-choice dynamic drop-down box

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.