ligerui多选动态下拉框

时间:2022-09-22 10:46:19

今天下午要求做一个支持多选的,并且插件用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多选动态下拉框的更多相关文章

  1. javascript 可多选的下拉框 multiselect 动态删除option值,动态添加option值,动态生成表格

    首先引用一个写的很好的博客http://www.cnblogs.com/landeanfen/p/5013452.html 我使用的是bootstrap-multiselect,实现功能是 选择下拉框 ...

  2. bootstrap-table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)

    1.bootstrap-table 单击单行选中 $('#gzrwTable').on('click-row.bs.table', function(e, row, $element) { $('.s ...

  3. javascript 可多选的下拉框 multiselect

    首先引用一个写的很好的博客http://www.cnblogs.com/landeanfen/p/5013452.html 我使用的是bootstrap-multiselect,实现功能是 选择下拉框 ...

  4. flask中单选、多选、下拉框的获取

    1.单选: source = request.form.get('source') 2.多选:   joy = request.form.getlist('joy')    或者   joy = re ...

  5. webdriver--单选、复选及下拉框的定位

    单选radiobutton的操作 两种情况,一种是各个button元素的属性都有唯一定位值,可以直接用属性唯一值定位:另一种就是一组各方面属性值都一样的radiobutton,除了text,可以用组元 ...

  6. c&num; wpf ComboBox 动态下拉框 及 动态默认值设定

    1.下拉框声明 <ComboBox x:Name="DirComboBox" Width="150" Height="18" Marg ...

  7. Form动态下拉框

    FORM级触发器:WHEN-NEW-FORM-INSTANCE   1.定义:      V_LIST_NAME11 VARCHAR2(100) := 'QUERY_FIND.UPDATE_TYPE' ...

  8. 前端组件:支持多选,支持选项筛选的下拉框选择器(基于Jquery和Bootstrap)

    效果图一:多选 效果图二:选项筛选 最后奉献源码,复制出来直接可用 <!DOCTYPE html> <html> <head> <meta charset=& ...

  9. DropDownList单选与多选下拉框

    一.单选DropDownList传值 1.添加界面的DropDownList显示值问题 (1)在方法内添加ViewData的方法: var ad = new UnitsRepository(); Vi ...

随机推荐

  1. Classic Shell 4&period;2&period;4 中文版已经发布

    新版本支持 windows 10 操作系统了.请点击本博客页面左上角的链接下载. 博主的电脑最近也升级到 Windows 10 操作系统,用了没几天就出现打不开“开始”菜单.Edge.计算器等 App ...

  2. 使用Unity开发Android的几种调试方法

    前言 本文举例几种Android 调试的方法(PS:我是通过unity引擎来开发安卓游戏) Eclipse + adt 查看LOG 1.为Eclipse 装上adt 插件 2.打开Eclipse 的L ...

  3. &lbrack;BS-22&rsqb; Objective-C中nil、Nil、NULL、NSNull的区别

    Objective-C中nil.Nil.NULL.NSNull的区别 1.定义: nil:      OC语言定义:#define nil __DARWIN_NULL   /  #define __D ...

  4. Redis安装及基本配置

    一.Redis介绍 1.Redis是一个key-value存储系统 2.官方站点http://redis.io 3.Redis和Memcached类似,但支持数据持久化 4.支持更多value类型,除 ...

  5. Js&sol;Jquery获取iframe中的元素 在Iframe中获取父窗体的元素方法

    在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素  1. 格式:window ...

  6. 正则表达式删除指定的HTML 标签

    1.抓取某网页的数据后(比如描述),如果照原样显示的话,可能会因为它里面包含没有闭合的HTML标签而打乱了格式,也可能它里面用了比较让人 "费解" 的HTML标签,把预订的格式搅乱 ...

  7. GridView控件 Reapter控件 DataList控件 的区别和用法

    ASP.NET三大控件: 1.GridView控件:表格视图控件,可以用来绑定结果集或者视图,用起来比较方便和灵活,三个控件中使用最多的控件 用法--- this.gridview1.DataSour ...

  8. css3实现各种渐变效果,比较适合做手机触屏版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. opacity 与rgba区别

    rgba(r,g,b,a) rgba(r,g,b,a) r,g,b分别是颜色r g b的值(0-255),a表示透明度(0-1). opacity: value: opacity: value; va ...

  10. vi命令详解2

    介绍 vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指令. 1.vi的基本概念 vi可以分为三种状态,分别如下: ...