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 相关文章推荐
Javascript开发包大全整理
Dec 22 Javascript
JQuery 学习笔记 选择器之三
Jul 23 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
js文本框输入内容智能提示效果
Dec 02 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
关于HTML5的data-*自定义属性的总结
May 05 Javascript
JS中超越现实的匿名函数用法实例分析
Jun 21 Javascript
JS代码优化的8点建议
Feb 04 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 19 Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 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中strtotime函数使用方法分享
2012/01/10 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
许愿墙中用到的函数
2006/10/07 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
BootstrapTable refresh 方法使用实例简单介绍
2017/02/20 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
原生js实现随机点名
2020/07/05 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
Python3读取文件常用方法实例分析
2015/05/22 Python
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
自荐信格式简述
2014/01/25 职场文书
寄语学生的话
2014/04/10 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
2014年纪委工作总结
2014/12/05 职场文书
优秀校长事迹材料
2014/12/24 职场文书
数学教师求职信范文
2015/03/20 职场文书
2015年教学工作总结
2015/04/02 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
工作收入证明范本
2015/06/12 职场文书
高中化学教学反思
2016/02/22 职场文书
话题作文之学会尊重
2019/12/16 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技