ligerui多选动态下拉框
今天下午要求做一个支持多选的,并且插件用ligerui的,当时有点小懵了,因为没用过ligerui啊!而且按照API的介绍,我做得也很好啊,可是为什么就是显示不出来?据说有位小神比较厉害,请教来之,两个点过去了,依然无果...................
好吧,切入正题,首先要做一个ligerui的下拉框,必须在页面加载的时候就初始化一个下拉框来,要不你叫你妈来都不好使!(好吧,是我不会看API!)
先说说我现在的需求,我需要做一个类似于二级联动,有两个下拉框,一个是房屋类型,一个是房屋格局,当我选择房屋类型的时候,出来房屋格式,然后然后...我就在房屋类型里做了一个onchange事件......
这个是html页面代码:
<input type="text" id="house_type" maxlength="" onchange="show_houseType_child(this.value);"/> <!--房屋类型下拉框-->
<input type="text" id="housing_pattern" maxlength=""/> <!--房屋格局-->
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({
                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);
          }
      },
终于写完了,不过我运行有点小小的bug,等待我处理完毕后再来完善
我的工作一天又要开始了,fight!
ligerui多选动态下拉框的更多相关文章
- javascript 可多选的下拉框 multiselect  动态删除option值,动态添加option值,动态生成表格
		首先引用一个写的很好的博客http://www.cnblogs.com/landeanfen/p/5013452.html 我使用的是bootstrap-multiselect,实现功能是 选择下拉框 ... 
- bootstrap-table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)
		1.bootstrap-table 单击单行选中 $('#gzrwTable').on('click-row.bs.table', function(e, row, $element) { $('.s ... 
- javascript 可多选的下拉框 multiselect
		首先引用一个写的很好的博客http://www.cnblogs.com/landeanfen/p/5013452.html 我使用的是bootstrap-multiselect,实现功能是 选择下拉框 ... 
- flask中单选、多选、下拉框的获取
		1.单选: source = request.form.get('source') 2.多选: joy = request.form.getlist('joy') 或者 joy = re ... 
- webdriver--单选、复选及下拉框的定位
		单选radiobutton的操作 两种情况,一种是各个button元素的属性都有唯一定位值,可以直接用属性唯一值定位:另一种就是一组各方面属性值都一样的radiobutton,除了text,可以用组元 ... 
- c# wpf  ComboBox  动态下拉框 及 动态默认值设定
		1.下拉框声明 <ComboBox x:Name="DirComboBox" Width="150" Height="18" Marg ... 
- Form动态下拉框
		FORM级触发器:WHEN-NEW-FORM-INSTANCE 1.定义: V_LIST_NAME11 VARCHAR2(100) := 'QUERY_FIND.UPDATE_TYPE' ... 
- 前端组件:支持多选,支持选项筛选的下拉框选择器(基于Jquery和Bootstrap)
		效果图一:多选 效果图二:选项筛选 最后奉献源码,复制出来直接可用 <!DOCTYPE html> <html> <head> <meta charset=& ... 
- DropDownList单选与多选下拉框
		一.单选DropDownList传值 1.添加界面的DropDownList显示值问题 (1)在方法内添加ViewData的方法: var ad = new UnitsRepository(); Vi ... 
随机推荐
- Complete the Sequence[HDU1121]
			Complete the Sequence Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Ot ... 
- 百度搜索词&淘宝搜索词 接口实现
			百度和淘宝并没有正式的提供一个公开API给我们用,但是经过分析他们的源代码,还是找到了解决方法. 1 2 3 4 5 6 7 8 9 /*baidu&taobao callback*/ fun ... 
- 升级到WP8必需知道的13个特性
			http://www.cnblogs.com/sonic1abc/archive/2012/11/28/2792467.html Windows phone 8 SDK 已经发布一段时间了, 已经 ... 
- CentOS6.4 安装LVS-RRD监控LVS
			1.安装依赖包 yum install -y php httpd bc rrdtool 启动apache (我看网上的一些文档说不能用80端口,但我用80端口试了一下也好使,如果出现不好使的情况就改一 ... 
- 【wikioi】1033 蚯蚓的游戏问题(费用流)
			http://wikioi.com/problem/1033/ 这题也是很水的费用流啊,同之前那题一样,拆点然后建边,容量为1,费用为点权.然后建个源连第一行每个点,容量为1,费用为0,然后最后一行每 ... 
- 【wikioi】1553 互斥的数(hash+set)
			http://wikioi.com/problem/1553/ 一开始我也知道用set来判a[i]/p是否在集合中,在的话就直接删掉. 但是我没有想到要排序,也没有想到当存在a,b使得a/p==b时到 ... 
- PHP + Redis 实现一个简单的twitter
			原文位于Redis官网http://redis.io/topics/twitter-clone Redis是NoSQL数据库中一个知名数据库,在新浪微博中亦有部署,适合固定数据量的热数据的访问. 作为 ... 
- tomcat的安装
			这个安装过程很清晰,转载一下:http://jingyan.baidu.com/article/8065f87fcc0f182330249841.html 
- 使用Hydra扫描网络中存在SSH弱登录密码的Linux系统
			1. apt-get install cmake libssl-dev 2. apt-get install hydra (需要图形界面的话用hydra-gtk) 3. hydra -s 22 -v ... 
- 更新AD对象属性值
			1. 对于Set-ADUser不包含的对象属性,可以采用replace来操作 Set-ADUser -Identity 'UserA' -Replace @{userWorkstations = 'C ... 
