zoukankan      html  css  js  c++  java
  • ligerui多选动态下拉框

    今天下午要求做一个支持多选的,并且插件用ligerui的,当时有点小懵了,因为没用过ligerui啊!而且按照API的介绍,我做得也很好啊,可是为什么就是显示不出来?据说有位小神比较厉害,请教来之,两个点过去了,依然无果...................

    好吧,切入正题,首先要做一个ligerui的下拉框,必须在页面加载的时候就初始化一个下拉框来,要不你叫你妈来都不好使!(好吧,是我不会看API!)

    先说说我现在的需求,我需要做一个类似于二级联动,有两个下拉框,一个是房屋类型,一个是房屋格局,当我选择房屋类型的时候,出来房屋格式,然后然后...我就在房屋类型里做了一个onchange事件......

    这个是html页面代码:

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


    js代码,onchang事件:

    //页面加载的时候必须给下拉框初始化为一个下拉框   
     $("#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 } }); } }

    好了,基本就成型了,是不是有人怀疑,多选是出来了,那单选房屋类型呢?其实这个公司已经封装好了,这个我只能是粘出来,或许会报错,欲哭无泪啊!

    js房屋类型单选:

         //房产类型方法
        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:
    你完全也可以创建一个js文件名称叫:global.ligerui.extend.js,粘贴相信你百分百好使哈!

    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({
                     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);
              }
          },


    终于写完了,不过我运行有点小小的bug,等待我处理完毕后再来完善

    我的工作一天又要开始了,fight!

    时间,请带我像一条小溪流般,安静地流淌,汇入爱的海洋。
  • 相关阅读:
    C# 线程手册 第二章 .NET 中的线程
    C# 线程手册 第一章 线程定义 .NET 和 C# 对线程的支持
    C# 线程手册 第二章 .NET 中的线程 创建一个线程
    C# 线程手册 第一章 线程定义 线程
    C# 线程手册 第二章 .NET 中的线程 时钟和回调
    C# 线程手册 第二章 .NET 中的线程 线程的生命周期
    C# 线程手册 第二章 .NET 中的线程 线程的优势
    Visual Entity 教程(一)从数据库创建模型
    Visual Entity 教程(三)添加 Attribute 到类或属性中
    Linq to Oracle 使用教程(二)创建实体类
  • 原文地址:https://www.cnblogs.com/1246447850qqcom/p/4055945.html
Copyright © 2011-2022 走看看