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

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

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

这个是html页面代码:

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

js代码,onchang事件:

  1. //页面加载的时候必须给下拉框初始化为一个下拉框   
     $("#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只是一个名称,可以随便取名
      });
  2.  
  3. //点击房产类型出现子菜单,没有写在页面加载中
  4. function show_houseType_child(json){
  5. if(combox.getValue()!='-1'){
  6. var mcs_sys_dict_id_id=combox.getValue();
  7. $.ajax({
  8. type: "get",
  9. url: "/MCS/sysmanage/mcssysdictdatabydictidempty.do",
  10. data: "mcs_sys_dict_id="+mcs_sys_dict_id_id+"&isEmpty=true",  //ajax向后台发送数据
  11. success: function(data){
  12. liger.get("housing_pattern").setData(data);  //返回data数据,并且赋值给文本框id为:housing_pattern
  13. }
  14. });
  15. }
  16. }

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

js房屋类型单选:

  1. //房产类型方法
  2. function init_cre_loan_type(json){
  3. var cre_loan_type_params ={
  4. dest_url:'/sysmanage/mcssysdictdatabydictidempty.do?isEmpty=true&mcs_sys_dict_id=56 ',
  5. t_col_name:'house_type',
  6. valueField:'mcs_sys_dict_data_id', //下拉框value对应的值,默认为id
  7. textField:'value_meaning', //下拉框text对应的值,默认为text
  8. def_val:'first'
  9. };
  10. combox = global_ligerui_extend.initCombox("house_type",null,cre_loan_type_params);
  11. if(json){
  12. //把值装载设定
  13. global_ligerui_extend.syncRequestInitComboxData(json,"house_type");
  14. //让其不可编辑
  15. global_ligerui_extend.disabledCombox("house_type");
  16. }else{
  17. global_ligerui_extend.initComboxDefVal("house_type");
  18. }
  19. }

公司封装好了的js:
你完全也可以创建一个js文件名称叫:global.ligerui.extend.js,粘贴相信你百分百好使哈!

  1. var global_ligerui_extend = {
  2.  
  3. /**
  4. * 初始化树形下拉框,如果下拉框没有上级联动,将下拉框的值进行初始化
  5. * @param inputObjName 下拉框对应的input名称
  6. * @param onSelectedFunc 值被选择的事件
  7. * @param params json对象,可以包含如下的值:
  8. * 1 valueField 下拉框value对应的值,默认为id
  9. * 2 textField 下拉框text对应的值,默认为text
  10. * 3 dest_url 下拉框data对应的url
  11. * 4 t_col_name 下拉框对应的数据库表字段名称
  12. * 5 p_input_name 上级下拉框对应的文本框名称,多个使用逗号,分隔
  13. * 6 c_input_name 下级下拉框对应的文本框名称,多个使用逗号,分隔
  14. * * 7 def_val 下拉框的默认值,如果为''或者null,则联动后值置为空,如果为'first',联动后置为下拉框的第一个值
  15. * 其他则直接选择值
  16. * @returns
  17. */
  18. initTreeCombox:function(inputObjName,onSelectedFunc,params){
  19. var that = this;
  20. var manager = $("#"+inputObjName).ligerComboBox({
  21. width: params.input_width || 135,
  22. selectBoxWidth: 130,
  23. selectBoxHeight: 150,
  24. valueField: params.valueField || 'id',
  25. textField: params.textField || 'text',
  26. valueFieldID: inputObjName+'_hidden',
  27. dest_url:params.dest_url || '',
  28. t_col_name:params.t_col_name || '',
  29. p_input_name:params.p_input_name || '',
  30. c_input_name:params.c_input_name||'',
  31. def_val:params.def_val||'',
  32. treeLeafOnly: false,
  33. tree: {
  34. data: [],
  35. nodeWidth: 133,
  36. checkbox: false,
  37. parentIcon: null,
  38. childIcon: null,
  39. onBeforeCancelSelect: function() {
  40. return false;
  41. }
  42. },
  43. onSelected: function(val){
  44. var options = this.options;
  45. if(options.is_linkage && $.trim(options.c_input_name)!=''){
  46. var c_input_name_arr = options.c_input_name.split(',');
  47. for(var i=0;i<c_input_name_arr.length;i++){
  48. that.asyncRequestInitComboxData(c_input_name_arr[i]);
  49. }
  50. }
  51. if(options.is_linkage && onSelectedFunc){
  52. onSelectedFunc.call(this,val);
  53. }
  54. }
  55. });
  56. return manager;
  57. },
  58. /**
  59. * 同步获取后台数据,第一个参数固定,后面的参数为不固定参数,可以为一个或多个
  60. * param:页面上各下拉框对应的值,应为后台数据库查询获得,与下拉框的t_col_name相对应
  61. * inputObjName一个或多个需要设置下拉框数据和值的下拉框对应的文本框ID
  62. */
  63. syncRequestInitComboxData:function(param,inputObjNames){
  64. var n = arguments.length;
  65. var that = this;
  66. for (var i = 1; i < n; i++) {
  67. var inputObjName = arguments[i];
  68. var comboxManage = $("#"+inputObjName).ligerGetComboBoxManager();
  69. comboxManage.setLinkage(false);//取消联动
  70. var options_1 = comboxManage.options;
  71. var url = options_1.dest_url;//请求数据URL
  72. var t_col_name = options_1.t_col_name;//该下拉框对应的数据库表字段名称
  73. var defaultVal;
  74. if(param == null){
  75. defaultVal = options_1.def_val;
  76. }else{
  77. defaultVal = param[t_col_name];
  78. }
  79. var data = {};
  80. var p_input_name = options_1.p_input_name;//该下拉框上一级对应的数据库字段名称
  81. if(p_input_name != null && $.trim(p_input_name)!=''){
  82. var paramArr = p_input_name.split(',');
  83. for(var j=0;j<paramArr.length;j++){
  84. var param_name = paramArr[j];
  85. var obj = $("#"+param_name).ligerGetComboBoxManager();
  86. var options = obj.options;
  87. var pn = options.t_col_name;
  88. if(param == null){
  89. data[pn] = $("#"+param_name+"_hidden").val();
  90. }else{
  91. data[pn] = param[pn];
  92. }
  93.  
  94. }
  95. }
  96. $.ajax({
  97. type: "GET",
  98. url: globalUtil.getTimestampUrl(url),
  99. data: data,
  100. async: false,
  101. dataType: 'json',
  102. success: function(json) {
  103. that.setComboxData(comboxManage,json,defaultVal);
  104. comboxManage.setLinkage(true);//恢复联动
  105. }
  106. });
  107. }
  108. },
  109. disabledCombox:function(inputObjName){
  110. var comBoxManager = $("#"+inputObjName).ligerGetComboBoxManager();
  111. comBoxManager.setDisabled();
  112. },
  113. /**
  114. * 将下拉框的值进行初始化,首先将根级的下拉框重新初始化,根据联动其他的下拉框进行初始化
  115. * @param inputObjNames 不定个数参数,根级的下拉框名称
  116. */
  117. initComboxDefVal:function(inputObjNames){
  118. var n = arguments.length;
  119. for (var i = 0; i < n; i++) {
  120. var inputObjName = arguments[i];
  121. this.asyncRequestInitComboxData(inputObjName);
  122. }
  123. },

终于写完了,不过我运行有点小小的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# 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. 李洪强-C语言3-数组

    一.数组的概念 用来存储一组数据的构造数据类型 特点:只能存放一种类型的数据,如全部是int型或者全部是char型,数组里的数据成为元素. 二.数组的定义 格式: 类型 数组名[元素个数]: 举例:存 ...

  2. php 数组操作

    <?php $vegetables[0] = "corn"; $vegetables[1] = "broccoli"; $vegetables[2] = ...

  3. 【液晶模块系列基础视频】3.2fatfs接口函数的使用2

    ============================== 技术论坛:http://www.eeschool.org 博客地址:http://xiaomagee.cnblogs.com 官方网店:h ...

  4. Mininet实验 基于Mininet实现BGP路径挟持攻击实验

    参考:基于Mininet实现BGP路径挟持攻击实验 实验目的: 掌握如何mininet内模拟AS. 掌握BGP路径挟持的原理和分析过程. 实验原理: 互联网是由相互连接的自治系统AS组成的,通过一个通 ...

  5. MySQL 数据库设计 笔记与总结(2)逻辑设计

    [实例演示 —— 实体之间的关系] [逻辑设计的工作] ① 将需求转化为数据库的逻辑模型 ② 通过 ER 图的形式对逻辑模型进行展示 ③ 同所选用的具体的 DBMS 系统无关 [名词解释] 候选码可以 ...

  6. mysql语句优化认识

  7. DWZ中关于iframeCallback和validateCallback的注意事项

    在DWZ上传中..如果要上传图片.则一定只能使用iframeCallback. 并且要表单中注明enctype="multipart/form-data"

  8. MySQL binlog-do-db选项是危险的

    很多人通过 binlog-do-db, binlog-ignore-db, replicate-do-db 和   replicate-ignore-db 来过滤复制(某些数据库), 尽管有些使用, ...

  9. Networking with PHP

    PHP Advanced and Object-Oriented Programming 3rd Edition

  10. Technical analysis of client identification mechanisms

    http://www.chromium.org/Home/chromium-security/client-identification-mechanisms Chromium‎ > ‎Chro ...