easyUI combobox实现联动效果

 更新时间:2017年01月17日 16:54:51   作者:牧羊人_cily  
这篇文章主要为大家详细介绍了easyUI combobox实现联动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

我在做项目时,经常用到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的联动效果,写的不完美大家相互学习一下

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

相关文章

  • jQuery继承extend用法详解

    jQuery继承extend用法详解

    这篇文章主要为大家详细介绍了jQuery继承extend用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • jQuery插件zTree实现的多选树效果示例

    jQuery插件zTree实现的多选树效果示例

    这篇文章主要介绍了jQuery插件zTree实现的多选树效果,结合实例形式分析了jQuery树形插件zTree实现多选树效果的具体操作步骤与相关注意事项,需要的朋友可以参考下
    2017-03-03
  • js实现图片放大缩小功能后进行复杂排序的方法

    js实现图片放大缩小功能后进行复杂排序的方法

    这是一个基于jquery的图片效果,它的作用是:当图片点击变大(变小)时,其它图片按照一定的规则进行排序运动
    2012-11-11
  • jquery插件canvaspercent.js实现百分比圆饼效果

    jquery插件canvaspercent.js实现百分比圆饼效果

    这篇文章主要为大家详细介绍了jquery插件canvaspercent.js实现百分比圆饼效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 一篇文章带你入门和了解Jquery的基础操作

    一篇文章带你入门和了解Jquery的基础操作

    这篇文章主要讲述了一个JQuery入门基础,实现的过程效果都很简单,特别适合初学者来学习,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • jQuery实现网页拼图游戏

    jQuery实现网页拼图游戏

    这篇文章主要为大家详细介绍了jQuery实现网页拼图游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • Jquery实战_读书笔记1—选择jQuery

    Jquery实战_读书笔记1—选择jQuery

    近期公司积极组织我们这些开发人员学习进步,督促我们学习更多的技术来提高自己。为此我选择了jQuery作为我学习的方向,同时我也是想将我的学习心得分享给大家,以后我会不断的更新一系列jQuery方面的学习纪要,帮助大家学习。
    2010-01-01
  • jQuery操作Dom元素与遍历以及JS遍历详细讲解

    jQuery操作Dom元素与遍历以及JS遍历详细讲解

    这篇文章主要介绍了jQuery操作Dom元素、jQuery遍历、JavaScript遍历,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-01-01
  • JavaScript前端页面搜索功能案例【基于jQuery】

    JavaScript前端页面搜索功能案例【基于jQuery】

    这篇文章主要介绍了JavaScript前端页面搜索功能案例,结合完整实例形式详细分析了基于jQuery实现的前端页面表格搜索功能相关实现技巧,需要的朋友可以参考下
    2019-07-07
  • 在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)

    在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)

    这篇文章主要介绍了在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)的相关资料,需要的朋友可以参考下
    2016-01-01

最新评论