表單（中）-EasyUI Combogrid 組合網格、EasyUI Numberbox 數字框、EasyUI Datebox 日期框、EasyUI Datetimebox 日期時間框、EasyUI

時間 2019-11-26

標籤表單 easyui combogrid 組合網格 numberbox 字框 datebox 日期 datetimebox 時間欄目 HTML 简体版

原文原文鏈接

EasyUI Combogrid 組合網格

擴展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults。經過 $.fn.combogrid.defaults 重寫默認的 defaults。javascript

組合網格（combogrid）把可編輯的文本框和下拉數據網格面板結合起來，用戶能夠從下拉數據網格面板中快速查找和選擇。組合網格（combogrid）提供了選擇某個項目的鍵盤導航支持。php

依賴

combo
datagrid

用法

建立組合網格（combogrid）

一、從標記建立組合網格（combogrid）。java

<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>

二、使用 javascript 從已有的 <select> 或 <input> 元素建立。mysql

<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）提那家自動完成功能。下拉數據網格將根據用戶輸入顯示可能的結果。sql

$('#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:json

$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 則選擇該行。代碼實例： $('#cc').combogrid({ filter: function(q, row){ var opts = $(this).combogrid('options'); return row[opts.textField].indexOf(q) == 0; } });	100

事件

該事件擴展自組合（combo）和數據網格（datagrid）。瀏覽器

方法

該方法擴展自組合（combo），下面是爲組合網格（combogrid）添加或重寫的方法。服務器

名稱	參數	描述
options	none	返回選項（options）對象。
grid	none	返回數據網格（datagrid）對象。下面的實例顯示如何取得選中的行： var g = $('#cc').combogrid('grid'); // get datagrid object var r = g.datagrid('getSelected'); // get the selected row alert(r.name);
setValues	values	設置組件值的數組。代碼實例： $('#cc').combogrid('setValues', ['001','007']);
setValue	value	設置組件的值。代碼實例： $('#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）的值。代碼實例： $('#nn').numberbox('setValue', 206.12);
getValue	none	獲取數字框（numberbox）的值。代碼實例： var v = $('#nn').numberbox('getValue'); 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 起可用。代碼實例： var buttons = $.extend([], $.fn.datebox.defaults.buttons); buttons.splice(1, 0, { text: 'MyBtn', handler: function(target){ alert('click MyBtn'); } }); $('#dd').datebox({ buttons: buttons });
sharedCalendar	string,selector	多個日期框（datebox）組件使用的共享日曆。該屬性自版本 1.3.5 起可用。代碼實例： <input class="easyui-datebox" sharedCalendar="#sc"> <input class="easyui-datebox" sharedCalendar="#sc"> <div id="sc" class="easyui-calendar"></div>	null
formatter	function	格式化日期的函數，該函數有一個 'date' 參數，並返回一個字符串值。下面的實例演示如何重寫默認的格式化（formatter）函數。 $.fn.datebox.defaults.formatter = function(date){ var y = date.getFullYear(); var m = date.getMonth()+1; var d = date.getDate(); return m+'/'+d+'/'+y; }
parser	function	解析日期字符串的函數，該函數有一個 'date' 字符串，並返回一個日期值。下面的實例演示如何重寫默認的解析（parser）函數。 $.fn.datebox.defaults.parser = function(s){ var t = Date.parse(s); if (!isNaN(t)){ return new Date(t); } else { return new Date(); } }

事件

名稱	參數	描述
onSelect	date	當用戶選擇一個日期時觸發。代碼實例： $('#dd').datebox({ onSelect: function(date){ alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate()); } });

方法

該方法擴展自組合（combo），下面是爲日期框（datebox）重寫的方法。

名稱	參數	描述
options	none	返回選項（options）對象。
calendar	none	獲取日曆（calendar）對象。下面的實例演示如何獲取日曆（calendar）對象，而後重現它。 // get the calendar object var c = $('#dd').datebox('calendar'); // set the first day of week to monday c.calendar({ firstDay: 1 });
setValue	value	設置日期框（datebox）的值。代碼實例： $('#dd').datebox('setValue', '6/1/2012'); // set datebox value 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）的值。代碼實例： $('#dt').datetimebox('setValue', '6/1/2012 12:30:56'); // set datetimebox value var v = $('#dt').datetimebox('getValue'); // get datetimebox value 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	日曆的年。下面的實例演示如何使用指定的年和月來建立一個日曆。 <div class="easyui-calendar" data-options="year:2012,month:6" />	當前年份（4 位）
month	number	日曆的月。	當前月份（從 1 開始）
current	Date	當前的日期。	當前日期

事件

名稱	參數	描述
onSelect	date	當用戶選擇一個日期時觸發。代碼實例： $('#cc').calendar({ onSelect: function(date){ alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate()); } });

方法

名稱	參數	描述
options	none	返回選項（options）對象。
resize	none	調整日曆的尺寸。
moveTo	date	移動日曆到一個指定的日期。代碼實例： $('#cc').calendar('moveTo', new Date(2012, 6, 1));