easyUI combobox实现联动效果


Posted in Javascript onJanuary 17, 2017

我在做项目时,经常用到easyUI框架,今天总结一下easyUI中的combobox吧
创建easyui-combobox的方法,在easyUI的官网都有:

1、从带有预定义结构的 元素创建组合框(combobox)

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
  <option value="aa">aitem1</option>
  <option>bitem2</option>
  <option>bitem3</option>
  <option>ditem4</option>
  <option>eitem5</option>
</select>

2、从标记创建组合框(combobox)

<input id="cc" class="easyui-combobox" name="dept"
data-options="valueField:'id',textField:'text',url:'get_data.php'">

3、使用 javascript 创建组合框(combobox)

<input id="cc" name="dept" value="aa">

$('#cc').combobox({
  url:'combobox_data.json',
  valueField:'id',
  textField:'text'
});

json 数据格式的示例:

[{
  "id":1,
  "text":"text1"
},{
  "id":2,
  "text":"text2"
},{
  "id":3,
  "text":"text3",
  "selected":true
},{
  "id":4,
  "text":"text4"
},{
  "id":5,
  "text":"text5"
}]

它的属性和方法就不在赘述了,可以上官网查看。
下面来说一下关于两个combobox发联动

//初始化下拉列表
function InitCombobox() {
  $("#combobox_one").combobox({
    onLoadSuccess: function(){
      var types = $("#combobox_one").combobox('getData');
      if (types.length > 0){ 
        $("#combobox_one").combobox('select', types[0].Value); //全部
      }
    }
  });
  $("#combobox_two").combobox({ 
    url:'...';
    onLoadSuccess: function(){ 
      var types = $("#combobox_one").combobox('getData');
      if (types.length > 0){ 
        $("#combobox_two").combobox('select', types[0].Value); //全部
      }
    },
    onSelect: function(record){ 
      var url = '...' + record.Value;
      $("#combobox_one").combobox('reload', url);
    }
  });
$(function() {
  var typeData = [{
    text: "来源",
    value: "prodName"
  }, {
    text: "排放",
    value: "ars"
  }];
  var options01 = [{
    text: "生活污水",
    value: "eq"
  }, {
    text: "工业用水",
    value: "ne"
  }];
  var options02 = [{
    text: "工业用水",
    value: "ne"
  }, {
    text: "生活垃圾",
    value: "ge"
  }];
  //初始化查询项目的下拉列表
  $("#type").combobox({
    valueField: 'value',//值字段
    textField: 'text',//显示的字段
    data: typeData,
    panelHeight: 170,
    onSelect: function() {
      var myOptValue = $("#type").combobox("getValue");
      //1.清空原来的classify这个combobox中的选项
      $("#classify").combobox("clear");
      //2.动态添加"操作类型"的下拉列表框的option              
      if (myOptValue != null && (myOptValue == 'prodName' || myOptValue == 'prodStatus')) {
        console.info("myOptValue = " + myOptValue);
        $("#classify").combobox({
          panelHeight: 50,
          data: options01
        });
      } else {
        $("#classify").combobox({
          panelHeight: 140,
          data: options02
        });
      }
      //3.清空文本输入框——用户输入的条件              
      //$("#userInputCondition").val("");
    }
  });
  //初始化classify的下拉列表
  $("#classify").combobox({
    valueField: 'value',
    textField: 'text',
    data: options02,
    panelHeight: 140,
  });
});

下面是一个关于省市区的联动:

var h = $(window).height() * 0.65;
// 省级 
$('#province').combobox({
  valueField: 'name', //值字段
  textField: 'name', //显示的字段
  url: '/TidewaySHPServer/area/findAllProvince',//url为java后台查询省级列表的方法地址
  panelHeight: h,
  editable: true,
  //模糊查询
  filter: function(q, row) {
    var opts = $(this).combobox('options');
    return row[opts.textField].indexOf(q) == 0; //从头匹配,改成>=即可在任意地方匹配
  },
  onSelect: function(rec) {
    $('#city').combobox('setValue', "");
    $('#county').combobox('setValue', "");
    var url = '/TidewaySHPServer/area/findAllCity?parentId=' + rec.areaId;//url为java后台查询事级列表的方法地址
    $('#city').combobox('reload', url);
  }
});
//市区 
$('#city').combobox({
  valueField: 'name', //值字段
  textField: 'name', //显示的字段       
  panelHeight: 'auto',
  editable: false, //不可编辑,只能选择
  value: '',
  onSelect: function(rec) {
    $('#county').combobox('setValue', "");
    var url = '/TidewaySHPServer/area/findAllDistrictOrCounty?parentId=' + rec.areaId;//url为java后台查询区县级列表的方法地址
    $('#county').combobox('reload', url);
  }
});
//区 县
$('#county').combobox({
  valueField: 'areaId',
  textField: 'name',
  panelHeight: 'auto',
  editable: false,
});

基本上想写的都写完了,主要是多个combobox的联动效果,写的不完美大家相互学习一下

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 前台切换网站的样式实现
Jun 22 Javascript
js加载之使用DOM方法动态加载Javascript文件
Nov 08 Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 Javascript
jquery动态创建div与input的实例代码
Oct 12 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
JavaScript内存泄漏的处理方式
Nov 20 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 Javascript
微信小程序 button样式设置为图片的方法
Jun 19 Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 #Javascript
React Router基础使用
Jan 17 #Javascript
JavaScript自定义分页样式
Jan 17 #Javascript
javascript实现页面滚屏效果
Jan 17 #Javascript
javascript中递归的两种写法
Jan 17 #Javascript
基本DOM节点操作
Jan 17 #Javascript
React快速入门教程
Jan 17 #Javascript
You might like
PHP中strtr字符串替换用法详解
2014/11/26 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
PHP中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
2016/03/10 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
tensorflow指定GPU与动态分配GPU memory设置
2020/02/03 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
教导处工作制度
2014/01/18 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
三八妇女节慰问信
2015/02/14 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript