EasyUI Combogrid 组合网格

扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults。通过 $.fn.combogrid.defaults 重写默认的 defaults。

组合网格(combogrid)把可编辑的文本框和下拉数据网格面板结合起来,用户可以从下拉数据网格面板中快速查找和选择。组合网格(combogrid)提供了选择某个项目的键盘导航支持。

依赖

  • combo
  • datagrid

用法

创建组合网格(combogrid)

1、从标记创建组合网格(combogrid)。

<select id="cc" class="easyui-combogrid" name="dept" style="width:250px;"
data-options="
panelWidth:450,
value:'006',
idField:'code',
textField:'name',
url:'datagrid_data.json',
columns:[[
{field:'code',title:'Code',width:60},
{field:'name',title:'Name',width:100},
{field:'addr',title:'Address',width:120},
{field:'col4',title:'Col41',width:100}
]]
"></select>

2、使用 javascript 从已有的 <select> 或 <input> 元素创建。

<input id="cc" name="dept" value="01">
 $('#cc').combogrid({
panelWidth:450,
value:'006',
idField:'code',
textField:'name',
url:'datagrid_data.json',
columns:[[
{field:'code',title:'Code',width:60},
{field:'name',title:'Name',width:100},
{field:'addr',title:'Address',width:120},
{field:'col4',title:'Col41',width:100}
]]
});

自动完成功能

让我们为组合网格(combogrid)提那家自动完成功能。下拉数据网格将根据用户输入显示可能的结果。

$('#cc').combogrid({
delay: 500,
mode: 'remote',
url: 'get_data.php',
idField: 'id',
textField: 'name',
columns: [[
{field:'code',title:'Code',width:120,sortable:true},
{field:'name',title:'Name',width:400,sortable:true}
]]
});

在服务器端,'q' 参数必须首先被检索。用户可以查询数据库,然后返回一个 JSON 格式的 sql 结果到浏览器。

get_data.php:

$q = isset($_POST['q']) ? $_POST['q'] : ''; // the request parameter
// query database and return JSON result data
$rs = mysql_query("select * from item where name like '$q%'");
echo json_encode(...);

属性

该属性扩展自组合(combo)和数据网格(datagrid),下面是为组合网格(combogrid)添加的属性。

名称 类型 描述 默认值
loadMsg string 当数据网格(datagrid)加载远程数据时显示的消息。 null
idField string id 的字段名。 null
textField string 显示在文本框中的 text 字段名。 null
mode string 定义当文本改变时如何加载数据网格(datagrid)数据。如果组合网格(combogrid)从服务器加载就设置为 'remote'。当设置为 'remote' 模式时,用户输入的值将会被作为名为 'q' 的 http 请求参数发送到服务器,以获取新的数据。 local
filter function(q, row) 定义当 'mode' 设置为 'local' 时如何选择本地数据。返回 true 则选择该行。
代码实例:
  1. $('#cc').combogrid({
  2. filter: function(q, row){
  3. var opts = $(this).combogrid('options');
  4. return row[opts.textField].indexOf(q) == 0;
  5. }
  6. });
100

事件

该事件扩展自组合(combo)和数据网格(datagrid)。

方法

该方法扩展自组合(combo),下面是为组合网格(combogrid)添加或重写的方法。

名称 参数 描述
options none 返回选项(options)对象。
grid none 返回数据网格(datagrid)对象。下面的实例显示如何取得选中的行:
  1. var g = $('#cc').combogrid('grid'); // get datagrid object
  2. var r = g.datagrid('getSelected'); // get the selected row
  3. alert(r.name);
setValues values 设置组件值的数组。
代码实例:
  1. $('#cc').combogrid('setValues', ['001','007']);
setValue value 设置组件的值。
代码实例:
  1. $('#cc').combogrid('setValue', '002');
clear none 清除组件的值。
 

EasyUI Numberbox 数字框

扩展自 $.fn.validatebox.defaults。通过 $.fn.numberbox.defaults 重写默认的 defaults。

数字框(numberbox)用于让用户仅能输入数字的值。它可以把输入元素转换为不同类型的输入(比如:数字 numeric、百分比 percentage、货币 currency,等等)。更多的输入类型依赖 'formatter' 和 'parser' 函数来定义。

依赖

  • validatebox

用法

从标记创建数字框(numberbox)。

<input type="text" class="easyui-numberbox" value="100" data-options="min:0,precision:2">

使用 javascript 创建数字框(numberbox)。

<input type="text" id="nn">
$('#nn').numberbox({
min:0,
precision:2
});

属性

该属性扩展自验证框(validatebox),下面是为数字框(numberbox)添加的属性。

名称 类型 描述 默认值
disabled boolean 定义是否禁用该字段。 false
value number 默认值。  
min number 允许的最小值。 null
max number 允许的最大值。 null
precision number 显示在小数点后面的最大精度。 0
decimalSeparator string 分隔数字的整数部分和小数部分的分隔字符。 .
groupSeparator string 分隔整数组合的字符。  
prefix string 前缀字符串。  
suffix string 后缀字符串。  
filter function(e) 定义如何过滤被按下的键,返回 true 则接受输入字符。该属性自版本 1.3.3 起可用。  
formatter function(value) 用来格式数字框(numberbox)值的函数。返回显示在框中的字符串值。  
parser function(s) 用来解析字符串的函数。返回数字框(numberbox)值。  

事件

名称 参数 描述
onChange newValue,oldValue 当字段值改变时触发。

方法

该方法扩展自验证框(validatebox),下面是为数字框(numberbox)添加或重写的方法。

名称 参数 描述
options none 返回选项(options)对象。
destroy none 销毁数字框(numberbox)对象。
disable none 禁用该域。
enable none 启用该域。
fix none 把值固定为有效的值。
setValue none 设置数字框(numberbox)的值。
代码实例:
  1. $('#nn').numberbox('setValue', 206.12);
getValue none 获取数字框(numberbox)的值。
代码实例:
  1. var v = $('#nn').numberbox('getValue');
  2. alert(v);
clear none 清除数字框(numberbox)的值。
reset none 重置数字框(numberbox)的值。该方法自版本 1.3.2 起可用。

EasyUI Datebox 日期框

扩展自 $.fn.combo.defaults。通过 $.fn.datebox.defaults 重写默认的 defaults。

日期框(datebox)把可编辑的文本框和下拉日历面板结合起来,用户可以从下拉日历面板中选择日期。在文本框中输入的字符串可悲转换为有效日期。被选择的日期也可以被转换为期望的格式。

依赖

  • combo
  • calendar

用法

从标记创建日期框(datebox)。

<input id="dd" type="text" class="easyui-datebox" required="required">

使用 javascript 创建日期框(datebox)。

<input id="dd" type="text">
$('#dd').datebox({
required:true
});

属性

该属性扩展自组合(combo),下面是为日期框(datebox)添加的属性。

名称 类型 描述 默认值
panelWidth number 下拉日历面板的宽度。 180
panelHeight number 下拉日历面板的高度。 auto
currentText string 当前日期按钮上显示的文本。 Today
closeText string 关闭按钮上显示的文本。 Close
okText string 确定按钮上显示的文本。 Ok
disabled boolean 设置为 true 时禁用该域。 false
buttons array 日历下面的按钮。该属性自版本 1.3.5 起可用。
代码实例:
  1. var buttons = $.extend([], $.fn.datebox.defaults.buttons);
  2. buttons.splice(1, 0, {
  3. text: 'MyBtn',
  4. handler: function(target){
  5. alert('click MyBtn');
  6. }
  7. });
  8. $('#dd').datebox({
  9. buttons: buttons
  10. });
 
sharedCalendar string,selector 多个日期框(datebox)组件使用的共享日历。该属性自版本 1.3.5 起可用。
代码实例:
  1. <input class="easyui-datebox" sharedCalendar="#sc">
  2. <input class="easyui-datebox" sharedCalendar="#sc">
  3. <div id="sc" class="easyui-calendar"></div>
null
formatter function 格式化日期的函数,该函数有一个 'date' 参数,并返回一个字符串值。下面的实例演示如何重写默认的格式化(formatter)函数。
  1. $.fn.datebox.defaults.formatter = function(date){
  2. var y = date.getFullYear();
  3. var m = date.getMonth()+1;
  4. var d = date.getDate();
  5. return m+'/'+d+'/'+y;
  6. }
 
parser function 解析日期字符串的函数,该函数有一个 'date' 字符串,并返回一个日期值。下面的实例演示如何重写默认的解析(parser)函数。
  1. $.fn.datebox.defaults.parser = function(s){
  2. var t = Date.parse(s);
  3. if (!isNaN(t)){
  4. return new Date(t);
  5. } else {
  6. return new Date();
  7. }
  8. }
 

事件

名称 参数 描述
onSelect date 当用户选择一个日期时触发。
代码实例:
  1. $('#dd').datebox({
  2. onSelect: function(date){
  3. alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());
  4. }
  5. });

方法

该方法扩展自组合(combo),下面是为日期框(datebox)重写的方法。

名称 参数 描述
options none 返回选项(options)对象。
calendar none 获取日历(calendar)对象。下面的实例演示如何获取日历(calendar)对象,然后重现它。
  1. // get the calendar object
  2. var c = $('#dd').datebox('calendar');
  3. // set the first day of week to monday
  4. c.calendar({
  5. firstDay: 1
  6. });
setValue value 设置日期框(datebox)的值。
代码实例:
  1. $('#dd').datebox('setValue', '6/1/2012'); // set datebox value
  2. var v = $('#dd').datebox('getValue'); // get datebox value

EasyUI Datetimebox 日期时间框

扩展自 $.fn.datebox.defaults。通过 $.fn.datetimebox.defaults 重写默认的 defaults。

与日期框(datebox)相似,日期时间框(datetimebox)允许用户选择要显示的带有指定格式的日期和时间的日期和时间。它向下拉面板添加一个时间微调器(timespinner)组件。

依赖

  • datebox
  • timespinner

用法

从标记创建日期时间框(datetimebox)。

<input class="easyui-datetimebox" name="birthday"
data-options="required:true,showSeconds:false" value="3/4/2010 2:3" style="width:150px">

使用 javascript 创建日期时间框(datetimebox)。

<input id="dt" type="text" name="birthday">
$('#dt').datetimebox({
value: '3/4/2010 2:3',
required: true,
showSeconds: false
});

属性

该属性扩展自日期框(datebox),下面是为日期时间框(datetimebox)添加的属性。

名称 类型 描述 默认值
showSeconds boolean 定义是否显示秒的信息。 true
timeSeparator string 时分秒之间的时间分隔符。该属性自版本 1.3 起可用。 :

方法

该方法扩展自日期框(datebox),下面是为日期时间框(datetimebox)重写的方法。

名称 参数 描述
options none 返回选项(options)对象。
spinner none 返回时间微调器(timespinner)对象。
setValue value 设置日期时间框(datetimebox)的值。
代码实例:
  1. $('#dt').datetimebox('setValue', '6/1/2012 12:30:56'); // set datetimebox value
  2. var v = $('#dt').datetimebox('getValue'); // get datetimebox value
  3. alert(v);

EasyUI Calendar 日历

通过 $.fn.calendar.defaults 重写默认的 defaults。

日历(calendar)显示允许用户选择日期的一个月份日历,并允许移动到上一月和下一页。默认情况下,每星期的第一天设置为星期日。这可以通过设置 'firstDay' 属性的值来改变。

用法

从标记创建日历(calendar)。

<div id="cc" class="easyui-calendar" style="width:180px;height:180px;"></div>

使用 javascript 创建日历(calendar)。

<div id="cc" style="width:180px;height:180px;"></div>
$('#cc').calendar({
current:new Date()
});

属性

名称 类型 描述 默认值
width number 日历(calendar)组件的宽度。 180
height number 日历(calendar)组件的高度。 180
fit boolean 当设置为 true 时,则设置日历的尺寸以适应它的父容器。 false
border boolean 定义是否显示边框。 true
firstDay number 定义每星期的第一天。星期日(Sunday)是 0,星期一(Monday)是 1,... 0
weeks array 显示星期的列表。 ['S','M','T','W','T','F','S']
months array 显示月份的列表。 ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
year number 日历的年。下面的实例演示如何使用指定的年和月来创建一个日历。
  1. <div class="easyui-calendar" data-options="year:2012,month:6" />
当前年份(4 位)
month number 日历的月。 当前月份(从 1 开始)
current Date 当前的日期。 当前日期

事件

名称 参数 描述
onSelect date 当用户选择一个日期时触发。
代码实例:
  1. $('#cc').calendar({
  2. onSelect: function(date){
  3. alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());
  4. }
  5. });

方法

名称 参数 描述
options none 返回选项(options)对象。
resize none 调整日历的尺寸。
moveTo date 移动日历到一个指定的日期。
代码实例:
  1. $('#cc').calendar('moveTo', new Date(2012, 6, 1));

表单(中)-EasyUI Combogrid 组合网格、EasyUI Numberbox 数字框、EasyUI Datebox 日期框、EasyUI Datetimebox 日期时间框、EasyUI Calendar 日历的更多相关文章

  1. 雷林鹏分享:jQuery EasyUI 表单 - 过滤下拉数据网格

    jQuery EasyUI 表单 - 过滤下拉数据网格 下拉数据网格(Combogrid)组件和下拉框(Combobox)组件的共同点是,除了都具有下拉面板以外,它们都是基于数据网格(Datagrid ...

  2. easyui的组合网格:combogrid的选中事件

    jQuery EasyUI的API文档中写到: “数据表格下拉框事件完全扩展自combo(自定义下拉框)和datagrid(数据表格)” 这也就是说,我们完全可以将combo和datagrid的事件拿 ...

  3. HTML5 表单 中

    input 属性 autofocus 页面加载时自动获得焦点 required   非空字段输入框 placeholder 提供一种提示(hint),输入域为空时显示. pattern 规定验证inp ...

  4. easy ui 给表单元素赋值input,combobox,numberbox

    ①给input控件 class="easyui-textbox" <input class="easyui-textbox" data-options=& ...

  5. javascript总结39:DOM 中常用的表单元素的属性

    1 常用操作元素: value 用于大部分表单元素的内容获取(option除外) type 可以获取input标签的类型(输入框或复选框等) disabled 禁用属性 checked 复选框选中属性 ...

  6. 【.net+jquery】绘制自定义表单(含源码)

    前言 两年前在力控的时候就想做一个类似的功能,当时思路大家都讨论好了,诸多原因最终还是夭折了.没想到两年多后再这有重新提出要写一个绘制表单的功能.对此也是有点小激动呢?总共用时8.5天的时间基本功能也 ...

  7. html表单---学习笔记03

    第8章 表单 8.1 表单标记<form> <form name="表单名称" method="提交方法" action="处理程序 ...

  8. HTML5学习笔记五:html5表单

    表单是页面上非常重要的一块内容,用户可输入的大部分内容都是在表单元素中完成的,与后台的交互大多数也是通过点击表单中的按钮. 一.新增的元素和属性 1.新增属性: 1.1 form属性:页面中的任何元素 ...

  9. 前端与后台可能需要使用交互的表单form,input标签

    前端与后台可能需要使用交互的表单标签 form表单和input标签 textarea文本域表单 select,option下拉列表表单 fieldset和legend组合表单 label标签 form ...

随机推荐

  1. jQuery动态生成Bootstrap表格

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  2. 总结ASP.NET C#中经常用到的13个JS脚本代码

    1.按钮前后台事件 <asp:Button ID="Button1" runat="server" OnClick="Button1_Click ...

  3. Unity获取指定资源目录下的所有文件

    使用前需要引入System.IO;这个命名空间 public void GetFiles() { //路径 //string path = string.Format("{0}", ...

  4. About {DynamicResource {x:Static SystemColors.ControlBrushKey}}

    from : http://blog.sina.com.cn/s/blog_749e42850100sahi.html 前提: <system:String x:Key="{Compo ...

  5. HEVC compressGOP 接口

    HEVC编码调用compressGOP()来实现一个GOPSize 图像序列的编码.在reference code里,真正做compressGOP编码之前,需要存GOPSize帧YUV在m_cList ...

  6. ADO连接数据库【msado15.dll】

    Microsoft ActiveX Data Objects (ADO) 注册表查看ADO版本:HKEY_LOCAL_MACHINE\Software\Microsoft\DataAccess下有Ve ...

  7. [转] 在图标库中,找到合适的图标 ico

    作者:xlrocket链接:https://www.zhihu.com/question/19857245/answer/241696797 在图标库中,找到合适的图标 或许,一些小伙伴会有收集图标的 ...

  8. ios开发之--NSString和NSArray互转

    将string字符串转换为array数组 NSArray  *array = [Str componentsSeparatedByString:@","];//分隔符逗号 将arr ...

  9. windows平台的游戏运行库

    每一个都在PC上玩过游戏的人,都知道要安装一些必备的游戏运行库,游戏才能运行,这里指的PC是特指Windows操作系统平台.一般来说最常见的运行库是DirectX.Microsoft Visual C ...

  10. tableView删除功能小记

    由于项目需要,做一个UITableView来实现删除功能. 效果如图: 功能思路其实不难: 交代一下,我自己要实现的效果: 1.TableView是分组的. 2.点击删除按钮后,某行被删除.   写完 ...