首页 > 代码库 > ligerui多选动态下拉框
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({ 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多选动态下拉框
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。