JQuery EasyUI(41)

于 2020-03-26 08:15:51 发布
阅读量202 收藏 1
点赞数
分类专栏： WEB - jQuery EasyUI
原文链接：https://study.163.com/course/courseMain.htm?courseId=943002
版权

                   第三十三章： ComboBox（下拉列表框）组件

学习要点：

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

 一、加载方式

1.class加载方式：

<!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"/> 
    <style>
        .textbox{
            height:200px;
            margin:0;
            padding:0 2px;
            box-sizing:content-box;
       }
    </style>             
</head>
  <body>
    <select class="easyui-combobox" style="width:200px;">
      <option value="aaaa">aaaa</option>
      <option value="bbbb">bbbb</option>
      <option value="cccc">cccc</option>
      <option value="dddd">dddd</option>
    </select>
  </body>
</html>
[
  {
   "id":1,
   "user":"蜡笔小新",
   "emial":"xiaoxin@163.com",
   "date":"2014-10-01",
  },
  {
   "id":2,
   "user":"樱桃小丸子",
   "emial":"xiaowanzi@163.com",
   "date":"2014-10-02",
  },
  {
   "id":3,
   "user":"黑崎一护",
   "emial":"yihu@163.com",
   "date":"2014-10-03",
  },
]
<?php

   //记得是：user.php

   require 'config.hph';

   $query = mysql_query("SELECT id,user,email,data FROM think_user") or die('SQL 错误！');
   
   $json ='';

   while (!!$row = mysql_fetch_array($query,MYSQL_ASSOC)){
      $json .= json_encode($row).',';
    }

   $json  = substr($json,0,-1);

   echo '['.$json.']'; 

   mysql_close();
?>

 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"/> 
    <style>
        .textbox{
            height:200px;
            margin:0;
            padding:0 2px;
            box-sizing:content-box;
       }
    </style>             
</head>
  <body>
    <input id="box" name="box"></input>
  </body>
</html>
$(function(){
  $('#box').combobox({
     valueField:'id',
     textField:'user',
     //url:'context.json',
     url:'user.php',
  });
});
[
  {
   "id":1,
   "user":"蜡笔小新",
   "emial":"xiaoxin@163.com",
   "date":"2014-10-01",
  },
  {
   "id":2,
   "user":"樱桃小丸子",
   "emial":"xiaowanzi@163.com",
   "date":"2014-10-02",
  },
  {
   "id":3,
   "user":"黑崎一护",
   "emial":"yihu@163.com",
   "date":"2014-10-03",
  },
]
<?php

   //记得是：user.php

   require 'config.hph';

   $query = mysql_query("SELECT id,user,email,data FROM think_user") or die('SQL 错误！');
   
   $json ='';

   while (!!$row = mysql_fetch_array($query,MYSQL_ASSOC)){
      $json .= json_encode($row).',';
    }

   $json  = substr($json,0,-1);

   echo '['.$json.']'; 

   mysql_close();
?>

 

二、属性列表

Combobox属性
属性名值说明
valueFieldstring基础数据值名称绑定到该下拉列表框。默认为value。
textFieldstring基础数据字段名称绑定到该下拉列表框。默认值text。
groupFieldstring指定分组的字段名称，默认值null。
groupFormatterfunction(group)返回格式化之后的分组标题文本，以显示分组项。
modestring定义了当文本改变时如何读取列表数据。设置为‘remote’时，下拉列表框将会从服务器中加载数据。当设置为‘remote’模式时，用户输入将被发送到名为‘q’的HTTP请求参数服务器检索新数据。
urlstring通过url加载远程列表数据。
methodstringHTTP方法索引数据。（POST/GET）
dataarray数据列表加载。
filterfunction 定义当‘mode’设置为‘load’时如何过滤本地数据。函数有2个参数：q：用户输入的文本。row：列表行数据。返回true的时候允许行显示。
formatterfunction定义如何渲染行。该函数接受一个参数：row。
loadfunction（param，success，error）定义了如何从远程服务器加载数据。返回false可以忽略该动作。该函数具备如下参数：param：传递到远程服务器的参数对象。success（data）：在检索数据成功的时候调用该回调函数。
loadFilterfunction(data)返回过滤后的数据并显示。
<!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"/> 
    <style>
        .textbox{
            height:200px;
            margin:0;
            padding:0 2px;
            box-sizing:content-box;
       }
    </style>             
</head>
  <body>
    <input id="box" name="box"></input>
  </body>
</html>
$(function(){
  $('#box').combobox({
     valueField:'id',
     textField:'user',
     //url:'context.json',
     url:'user.php',
     groupField：'gender',
     groupFormatter:function(group){
        return '['+group+']';  
      },

     filter:function(q,row){
        var opts = $(this).combobox('options');
        return row[opts.textField].indexOf(q) >= 0;
    },

    formatter:function(row){
        var opts = $(this).combobox('options');
        return '[' + row[opts.textField] + ']';      
     },

    // mode:'remote',
     /*
     data:[
       {
        "id":1,
        "user":"蜡笔小新",
        "emial":"xiaoxin@163.com",
        "date":"2014-10-01",
       },
       {
        "id":2,
        "user":"樱桃小丸子",
        "emial":"xiaowanzi@163.com",
        "date":"2014-10-02",
       },
      {
       "id":3,
       "user":"黑崎一护",
       "emial":"yihu@163.com",
       "date":"2014-10-03",
       },
          ]

      */
  });
});
[
  {
   "id":1,
   "user":"蜡笔小新",
   "emial":"xiaoxin@163.com",
   "date":"2014-10-01",
  },
  {
   "id":2,
   "user":"樱桃小丸子",
   "emial":"xiaowanzi@163.com",
   "date":"2014-10-02",
  },
  {
   "id":3,
   "user":"黑崎一护",
   "emial":"yihu@163.com",
   "date":"2014-10-03",
  },
]
<?php

   //记得是：user.php

   require 'config.hph';

   //$q = $_POST['q'] ? $_POST['q'] :'';

   //$query = mysql_query("SELECT id,user,email,data FROM think_user WHERE id='$q'") or die('SQL 错误！');

   $query = mysql_query("SELECT id,user,email,data FROM think_user") or die('SQL 错误！');
   
   $json ='';

   while (!!$row = mysql_fetch_array($query,MYSQL_ASSOC)){
      $json .= json_encode($row).',';
    }

   $json  = substr($json,0,-1);

   echo '['.$json.']'; 

   mysql_close();
?>

 

三、事件列表

ComboBox事件
事件名 参数说明
onBeforeLoadparam在请求加载数据之前触发，返回false取消该加载动作。
onLoadSuccessnone在加载远程数据成功的时候触发。
onLoadErrornone在加载远程数据失败的时候触发。
onSelectrecode在用户选择列表项的时候触发。
onUnSelectrecode在用户取消选择列表项的时候触发。

 

四、方法列表

 

<!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"/> 
    <style>
        .textbox{
            height:200px;
            margin:0;
            padding:0 2px;
            box-sizing:content-box;
       }
    </style>             
</head>
  <body>
    <input id="box" name="box"></input>
    <input type="button" value="按钮" onclick="abc"></input>
  </body>
</html>
$(function(){
  $('#box').combobox({
     valueField:'id',
     textField:'user',
     //url:'context.json',
     url:'user.php',
     groupField：'gender',
     groupFormatter:function(group){
        return '['+group+']';  
      },

     filter:function(q,row){
        var opts = $(this).combobox('options');
        return row[opts.textField].indexOf(q) >= 0;
    },

    formatter:function(row){
        var opts = $(this).combobox('options');
        return '[' + row[opts.textField] + ']';      
     },

     /*
    onSelect:function(record){
       alert('选择一个项时触发！');
       console(record);
    }
     */

    onUnselect:function(record){
       alert('取消时触发！');
       console(record);
    }

    // mode:'remote',
     /*
     data:[
       {
        "id":1,
        "user":"蜡笔小新",
        "emial":"xiaoxin@163.com",
        "date":"2014-10-01",
       },
       {
        "id":2,
        "user":"樱桃小丸子",
        "emial":"xiaowanzi@163.com",
        "date":"2014-10-02",
       },
      {
       "id":3,
       "user":"黑崎一护",
       "emial":"yihu@163.com",
       "date":"2014-10-03",
       },
          ]

      */
  });
});

function abc(){
   //$('#box').combobox('unselect',1);
   //$('#box').combobox('setValue',1);
   //$('#box').combobox('setValues',[1,2]);
   //$('#box').combobox('relooad',1);
     console.log($('#box').combobox('getData');
   //$('#box').combobox('loadData',
      [{
        "id":1,
        "user":"蜡笔小新",
        "emial":"xiaoxin@163.com",
        "date":"2014-10-01",
       },
       {
        "id":2,
        "user":"樱桃小丸子",
        "emial":"xiaowanzi@163.com",
        "date":"2014-10-02",
       },
      {
       "id":3,
       "user":"黑崎一护",
       "emial":"yihu@163.com",
       "date":"2014-10-03",
       },
          ]);

}

 

作者：Roger_CoderLife

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

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

 

Roger_CoderLife
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jqueryEasyUI
07-16
**jQuery EasyUI 知识点详解** jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列的 UI 组件，使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个框架大大简化了网页界面的设计工作，使得...
jeasyui扩展:combogrid实现本地数据过滤
qq-3481813050的博客
07-24 879
jeasyui的combogrid插件属性filter为用户自定义本地过滤函数: $('#cc').combogrid({ filter: function(q, row){ var opts = $(this).combogrid('options'); return row[opts.textField].indexOf(q) == 0; } });可以选中最后一行匹配行,然而并
Jquery combobox的使用总结----持续更新
Lynn_Blog
11-14 8752
最近一个项目要在下拉框中添加复选框，然后在这个过程中，发现越来越多的实现方法，在这里记录一下combobox。 文章最后我会贴一下代码。 先贴一个实例，直接运行就是Jquery的复选框就可以出现了，这是最基本的功能。 function initCombobox(id){ var value = ""; // 加载下拉框复选框 $('#'+id).combobox({ pan...
EasyUI 学习使用笔记
spyiu的专栏
01-11 1265
现在项目中用到EasyUI作为前台基础框架，边学习边记录。 combox $('#cc').combobox({ url:'combobox_data.json', valueField:'id', textField:'text' }); groupFormatter function(group) 返回格式化
JQuery easyUI combobox 数据过滤（filter）
热门推荐
Shan_mei的专栏
07-18 1万+
1、jsp/js文件：      data-options="      panelWidth:550,      value:'${order.saleMan.id }',      idField:'id',     textField:'userName',      pagination:true,     required:true,      edi
EasyUI Combox过滤
hangyejiadao的专栏
11-16 759
filter:function(q,row) { var opts=$(this).combobox('options'); return row[opts.textField].indexOf(q)>=0; } 原图 效果:
jQuery EasyUI 1.9.4 chm文档
03-07
针对jQuery EasyUI的1.9.0的在线帮助文档进行整理，生成chm文件，便于开发时或者离线对easyi控件的属性、文法、事件等内容的查看。
jQuery EasyUI的api
05-09
- **EasyUI 组件**: EasyUI 将jQuery的功能进一步扩展，提供了如`datagrid`（数据网格）、`panel`（面板）、`dialog`（对话框）等丰富的UI组件。 2. **组件的使用**： - **初始化组件**: 使用`$(selector)....
jquery easyui demo
10-12
jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列易于使用的组件，帮助开发者快速构建用户界面。这个"jquery easyui demo"压缩包包含了版本为1.5.3的jQuery EasyUI 示例，旨在让学习者快速理解和掌握其...
Jquery EasyUI 日历Demo
10-12
JQuery EasyUI 是一个基于 jQuery 的轻量级前端框架，它提供了一系列的 UI 组件，如对话框、表格、树形菜单、按钮等，用于快速构建用户界面。在这个"Jquery EasyUI 日历Demo"中，我们将探讨如何利用 EasyUI 的日历...
Easyui combobox过滤
huangbaokang的博客
10-11 1194
Easyui combobox本地查询时，默认查询首字母为输入的值，我们可以通过filter方法实现模糊过滤。$('#box').combobox({ valueField : 'id', textField : 'user', url : 'content.json'， filter : function(q,row){ var opts = $(t
EasyUI的使用
乔木晨子的博客
11-17 229
1.需要的js文件和引入js文件的写法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导入easyui相关文件</title> <!-- 导入easyui的样式 --> <link rel="stylesheet" type="...
EasyUI–环境配置详解
程序员大阳
03-13 5565
需要预先说明的一点是，不管是EasyUI也好，Bootstrap也罢，都可以认为是在CSS、Javascript、jQuery上再封装了一层。所以我们来看一个十分简单的例子：<a href="#" class="easyui-linkbutton">搜索</a>其中easyui-linkbutton，不就在CSS里面定义了一个.easyui-linkbutton的样式么，猫哥也可以开发一个CatBr
Jquery Easy UI的初步使用
MyCodeDream的专栏
04-12 1106
总的来说，easyUI是jquery的一个很好地扩展，大大的提高了代码的开发速度，是一个很好地插件，我在使用的过程中，总体的感觉还是很不错的。 虽然相对来说，文件包稍微的有点大，但是在现在的网络世界中，这点大小就显得微不足道了，所以，在前端设计方面还是有很多的优势。 下面是一个easyUI的初步实例： Jquery Easy UI
第一百九十一节，jQuery EasyUI 入门
weixin_34357962的博客
03-26 89
jQuery EasyUI 入门   学习要点： 　　1.什么是 jQuery EasyUI 　　2.学习 jQuery EasyUI 的条件 　　3.jQuery EasyUI 的功能和优势 　　4.其他的 UI 插件 　　5.是否兼容低版本 IE 　　6.下载及运行 jQuery EasyUI   在正式了解 jQuery EasyUI 之前，我们先了解一下什么是 jQuery E...
jQuery easyUI快速入门
wanwanWei的博客
08-06 582
简介： EasyUI是一种基于jQuery、Angular.、Vue和React的用户界面插件集合，提供了窗口/菜单/树/数据网格/按钮/表单等一系列功能组件。 jQuery easyUI是一个基于jQuery的框架，集成了用户界面的各种插件。提供了创建网页所需的一切，轻松创建站点。 使用 easyui优点： 不需要写太多 js代码，一般只需要用一些 html 来定义用户界面。 节省了开发...
jQuery Easy UI的使用
曹海成的专栏
08-26 6531
一、初步认识 1、什么是jQuery Easy UI  jQuery Easy UI是一组基于jQuery的UI插件集合，而jQuery Easy UI 的目标就是帮助Web 开发者更轻松的打造出功能丰富并且美观的 UI 界面。
EasyUI入门，jquery-easyui
weixin_43295248的博客
10-04 446
EasyUI入门 本章目标 掌握EasyUI的基本用法重点 难点 掌握常用的EasyUI组件的使用 学会查看EasyUIAPI文档和Demo学习EasyUI的用途。 为什么使用EasyUI 现在开发网页对前端页面效果要求越来越高，用户体验要求也越来越高，那么如何能简单快速的开发出具有非常酷炫和高用户体验的页面呢？一些封装好的UI插件帮助我们解决了这个问题。 常见的UI框架 jQuery U...
分布式电网动态电压恢复器模拟装置设计与实现.doc
最新发布
07-06
本装置采用DC-AC及AC-DC-AC双重结构，前级采用功率因数校正（PFC）电路完成AC-DC变换，改善输入端电网电能质量。后级采用单相全桥逆变加变压器输出的拓扑结构，输出功率50W。整个系统以TI公司的浮点数字信号控制器TMS320F28335为控制电路核心，采用规则采样法和DSP片内ePWM模块功能实现SPWM波，采用DSP片内12位A/D对各模拟信号进行采集检测，简化了系统设计和成本。本装置具有良好的数字显示功能，采用CPLD自行设计驱动的4.3英寸彩色液晶TFT-LCD非常直观地完成了输出信号波形、频谱特性的在线实时显示，以及输入电压、电流、功率，输出电压、电流、功率，效率，频率，相位差，失真度参数的正确显示。本装置具有开机自检、输入电压欠压及输出过流保护，在过流、欠压故障排除后能自动恢复。
easyUI笔记11
08-08
easyUI笔记11

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值