JQuery EasyUI(22)

最新推荐文章于 2020-07-13 18:46:15 发布
最新推荐文章于 2020-07-13 18:46:15 发布
阅读量239 收藏
点赞数
分类专栏： WEB - jQuery EasyUI
原文链接：https://study.163.com/course/courseMain.htm?courseId=943002
版权

                           第二十二章：Combo（自定义下拉框）组件

学习要点：

  1. 加载方式
  2. 属性列表
  3. 方法列表
  4. 方法列表

一、加载方式：

1.自定义下拉框不能通过标签的方式进行创建。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
    <input id="box">
 </body>
</html>


2.JS加载调用：
如果要实现自定义下来选择（图片、文本、按钮均可），需要配合一些代码。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
    <input id="box">
    <div  id="food">
      <div style="backgroup:#eee;padding:5px;">请选择一个食物</div>
      <div style="padding:5px;">
          <input type="redio" name="food" value="01"><span>煎饼果子</span><br>
          <input type="redio" name="food" value="02"><span>水果沙拉</span><br>
          <input type="redio" name="food" value="03"><span>牛腩米线</span><br>
          <input type="redio" name="food" value="04"><span>蛋黄派果</span><br>
          <input type="redio" name="food" value="05"><span>其他</span><br>
      </div>
    </div>
 </body>
</html>
 

$(function(){

  $("#box").combo({
     required:true,
  });
   $('#food').appendTo($('#box').combo('panel'));
   $('#food input').click({
     var v = $(this).val();
     var s = $(this).next('span').text();
     $('#box').combo('setValue',v).combo('setValue',s).combo(hidePanel);
  });
});

 

二、属性列表：

Combo属性，扩展自ValidateBox属性
属性名值说明
width number组件的宽度。默认值auto。
heightnumber组件的高度。默认值22。
panelWidthnumber下拉面板宽度。默认值null。
panelHeightnumber下拉面板高度。默认值22。
multipleboolean定义是否支持多选。默认值false。
selectOnNavigationboolean定义是否允许使用键盘导航来选择项目。默认值true。
separatorstring在多选的时候使用何种分离符进行分割。默认值‘，’。
editableboolean定义用户是否可以直接输入文本到字段中。默认值true。
disabledboolean设置启用/禁用字段。默认值false。
hasDownArrowboolean定义是否显示向下箭头按钮。默认值true。
valuestring字段的默认值。
delaynumber最后一次输入事件与执行搜索之间的延迟间隔（执行自动完成功能的延迟间隔）默认值200
keyHandlerobject在用户按下键的时候调用一个函数。

PS：这里有些属性无法在单独组件使用中体现它的效果，需要配合整个表单或服务器支持。

 

三、事件列表： 

Combo事件
事件名事件属性说明
onShowPanelnone当下拉面板显示的时候触发。
onHidePanelnone当下拉面板隐藏的时候触发。
onChangenewValue,oldValue 当字段值改变的时候触发。
<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
    <input id="box">
    <div  id="food">
      <div style="backgroup:#eee;padding:5px;">请选择一个食物</div>
      <div style="padding:5px;">
          <input type="redio" name="food" value="01"><span>煎饼果子</span><br>
          <input type="redio" name="food" value="02"><span>水果沙拉</span><br>
          <input type="redio" name="food" value="03"><span>牛腩米线</span><br>
          <input type="redio" name="food" value="04"><span>蛋黄派果</span><br>
          <input type="redio" name="food" value="05"><span>其他</span><br>
      </div>
    </div>
 </body>
</html>
 

$(function(){

  $("#box").combo({
     required:true,
    
   /* 
     width:300,
     height:50,
     panelWidth:300,
     panelHeight:300,
     editable:false,
     disabled:true,
     readonly:true,
     hasDownArrow:false,
     value:'123',
     delay:1000,
     onShowPanel:function(){
       alert('显示触发');
     },
     onHidePanel:function(){
        alert('隐藏触发');
     },
     onChange:function(newValue,oldValue){
       alert(newValue + '|' + oldValue);
    },
  */
    
  });
   $('#food').appendTo($('#box').combo('panel'));
   $('#food input').click({
     var v = $(this).val();
     var s = $(this).next('span').text();
     $('#box').combo('setValue',v).combo('setValue',s).combo(hidePanel);
  });
});

 

四、方法列表： 

Combo方法
方法名传参说明
optionsnone返回属性对象。
panelnone返回下拉面板对象。
textboxnone返回文本框对象。
destorynone销毁该组件。
resizewidth调整组件宽度。
showPanelnone显示下拉面板。
hidePanelnone隐藏下拉面板。
disablenone禁用组件。
enablenone启用组件。
readonlymode启用/禁用只读模式。
validatenone验证输入的值。
isValidatenone返回验证结果。
clearnone清除控件的值。
resetnone重置控件的值。
getTextnone获取输入的文本。
getValuesnone 获取组件值的数组。
setValuesvalue设置组件值的数组。
getValuenone获取组件的值。
setValuevalue设置组件的值。

PS：我们可以使用$.fn.combo.defaults重写默认值对象。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
    <input id="box">
    <div  id="food">
      <div style="backgroup:#eee;padding:5px;">请选择一个食物</div>
      <div style="padding:5px;">
          <input type="redio" name="food" value="01"><span>煎饼果子</span><br>
          <input type="redio" name="food" value="02"><span>水果沙拉</span><br>
          <input type="redio" name="food" value="03"><span>牛腩米线</span><br>
          <input type="redio" name="food" value="04"><span>蛋黄派果</span><br>
          <input type="redio" name="food" value="05"><span>其他</span><br>
      </div>
    </div>
 </body>
</html>
 

$(function(){

  $("#box").combo({
     required:true,    
  });

   $('#food').appendTo($('#box').combo('panel'));

   $('#food input').click({
     var v = $(this).val();
     var s = $(this).next('span').text();
     $('#box').combo('setValue',v).combo('setValue',s).combo(hidePanel);
  });
    //console.log($('#box').combo('textbox'));

    $(decument).click(function(){
      $('#box').combo('resize','width');
      $('#box').combo('showPanel');
      console.log($('#box').combo('isValid'));
      console.log($('#box').combo('getText'));
      console.log($('#box').combo('getValue'));
      console.log($('#box').combo('getValues'));
      $('#box').combo('setValue',['1','2','3']);
   });
});

 

作者：Roger_CoderLife

链接：https://blog.csdn.net/Roger_CoderLife/article/details/103004717

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载

 

Roger_CoderLife
关注
专栏目录
jqueryEasyUI
07-16
**jQuery EasyUI 知识点详解** jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列的 UI 组件，使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个框架大大简化了网页界面的设计工作，使得...
jQuery EasyUI的api
05-09
- **EasyUI 组件**: EasyUI 将jQuery的功能进一步扩展，提供了如`datagrid`（数据网格）、`panel`（面板）、`dialog`（对话框）等丰富的UI组件。 2. **组件的使用**： - **初始化组件**: 使用`$(selector)....
JQuery EasyUI(21)
Roger_CoderLife的博客
02-26 180
第二十一章：ValidateBox（验证框）组件 学习要点： 加载方式 属性列表 方法列表 自定义验证 一、加载方式： //class 加载方式 //JS调用加载 二、属性列表： ValidateBox属性 属性名 值 说明 required boolean 定义为必填字段，默认值f...
EasyUI 随记
shanchahua123456的博客
12-21 636
在官网查看某个控件完整的属性和事件方法 一定要注意官网说明了当前控件继承了哪些控件的方法和属性，因为官网列出的只是这个控件的新内容，继承内容需要看父类控件。 Datagrid中的editor：type可以兼容EasyUI大多数现有控件 只需要将type设置为对应控件类型即可，type:'textbox'，type:'combotreegrid'。且这些控件依然支持自己的属性和事件方法，可以在...
Easyui combobox onChange事件
热门推荐
HilaryHe
09-07 2万+
Easyui combobox onChange事件： 注册事件： $(function () { $('#cc_id').combobox({ onChange: function (newValue, oldValue) { alert(newValue)
jQuery EasyUI 1.3.6 离线简体中文API文档
04-12
最新版本的jQuery EasyUI 1.3.6版全中文API汉化文档火热出炉，由于很多人和我要chm格式的，所以本次API我提供了2种版本的API，一个还是以前的EXE格式，另外一个就是人气颇高的chm格式。本次还将EasyUI 1.3.6版直接...
jQuery EasyUI 1.9.4 chm文档
03-07
针对jQuery EasyUI的1.9.0的在线帮助文档进行整理，生成chm文件，便于开发时或者离线对easyi控件的属性、文法、事件等内容的查看。
jQuery EasyUI中对表格进行编辑的实现代码
10-29
jQuery EasyUI是一个基于jQuery的前端框架，专门用于构建现代化的Web应用程序界面。它提供了一套丰富的UI组件，包括表格、树形控件、数据网格等，这些控件易于使用且美观。其中，数据网格（DataGrid）是jQuery ...
触发easyui combobox 中 onchange 事件
静哥亻门
08-09 1万+
以上是我使用Easyui生成的页面代码，通过样式美化过的下拉列表。 如何得到select 下拉列表的onchange事件呢？如下： $('#id').combobox({ onChange:function(newValue,oldValue){ alert(newValue); } }); 如何得到select 下拉列表所选定的值呢？如下： $('
EasyUI内Combobox的onChange事件
树洞树洞-单纯记录
02-21 2302
JS中的onchange()事件，是一个表单域的操作事件。用于：&lt;input&gt;、&lt;select&gt;、&lt;textarea&gt;三个表单标签，对于其他普通标签是不起作用的，即：不能触发事件。 在不加任何渲染的情况下，触发select标签的onchange事件 &lt;select id="one" onchange="alert('111')"&gt; &l
onchange函数
herenoname的博客
11-20 2956
data-options="precision:2,groupSeparator:',', required:true,onChange:changejine" type="text" id="xiangmujine" name="xiangmujine" style="width: 200px;" value="${model.xiangmujine}" /> function c
Vue watch 复杂对象变化，oldvalue 和 newValue 一致，解决办法。
Esca的学习之路
07-13 7505
watch的常规用法： watch:{ tempData:function(value,oldValue){ console.log(value,oldValue) } }, 但是如果需要监听的数据是对象、内嵌多层的对象后，需要用到watch中的deep属性。类似于下面这种对象内嵌的对象： data:()=>({ tableData:{ lineData:[ {"name":"线路1","type":"长途"}, ...
easyUI 下拉树（combotree）设置默认值并绑定onChange事件
有空就记记
05-11 8547
$("#input-deptId").combotree({ value:'${deptId}', onChange:function(newValue, oldValue){ $("#deptId").val(newValue); //赋值 } });
EasyUI——numberspinner的onChange事件
Winter--王大梅
07-27 6793
之前写了篇博客叫：EasyUI——Combobox的onChange事件，今天这篇博客，我们就来谈一谈选课页面的另一个EasyUI控件——numberspinner，说英文可能陌生了，也叫数值微调器。    样子是张酱紫的：                   html的样式代码： 介绍一下几个属性吧：     value：微调器里的数值     data-options：min是
ExtJS中editable、readOnly、disabled区别，jQuery与ExtJS区别
猴子哥哥的博客
11-23 6057
ExtJS中editable、readOnly、disabled区别 1）editable：设置false，阻止直接在表单项的文本框中输入字符，这时表单项只能通过从选择器中来选择值，用于combobox 2）readOnly：只读，用于combobox和textfield 3）disabled：true时，禁用表单项，禁用的表单项将不会被提交到后台，用于combobox和textfi
汇编语言详细介绍.txt
最新发布
09-24
汇编语言详细介绍.txt
jQuery EasyUI 中文文档详解
"jQuery EasyUI 详细说明文档" jQuery EasyUI 是一个基于 jQuery 的轻量级前端框架，它提供了一系列易于使用的组件，帮助开发者快速构建功能丰富的 Web 应用程序。这个文档详细介绍了如何使用 jQuery EasyUI 中的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值