jQuery EasyUI 表單插件 – Combogrid 組合網(wǎng)格

2018-09-25 17:10 更新

jQuery EasyUI 表單插件 - Combogrid 組合網(wǎng)格

jQuery EasyUI 插件 jQuery EasyUI 插件

擴(kuò)展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults。通過 $.fn.combogrid.defaults 重寫默認(rèn)的 defaults。

組合網(wǎng)格（combogrid）把可編輯的文本框和下拉數(shù)據(jù)網(wǎng)格面板結(jié)合起來，用戶可以從下拉數(shù)據(jù)網(wǎng)格面板中快速查找和選擇。組合網(wǎng)格（combogrid）提供了選擇某個(gè)項(xiàng)目的鍵盤導(dǎo)航支持。

依賴

  • combo
  • datagrid

用法

創(chuàng)建組合網(wǎng)格（combogrid）

1、從標(biāo)記創(chuàng)建組合網(wǎng)格（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> 元素創(chuàng)建。

<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}
    ]]
    });

自動(dòng)完成功能

讓我們?yōu)榻M合網(wǎng)格（combogrid）提那家自動(dòng)完成功能。下拉數(shù)據(jù)網(wǎng)格將根據(jù)用戶輸入顯示可能的結(jié)果。

$('#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}
    ]]
});

在服務(wù)器端，'q' 參數(shù)必須首先被檢索。用戶可以查詢數(shù)據(jù)庫，然后返回一個(gè) JSON 格式的 sql 結(jié)果到瀏覽器。

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(...);

屬性

該屬性擴(kuò)展自組合（combo）和數(shù)據(jù)網(wǎng)格（datagrid），下面是為組合網(wǎng)格（combogrid）添加的屬性。

名稱 類型 描述 默認(rèn)值
loadMsg string 當(dāng)數(shù)據(jù)網(wǎng)格（datagrid）加載遠(yuǎn)程數(shù)據(jù)時(shí)顯示的消息。 null
idField string id 的字段名。 null
textField string 顯示在文本框中的 text 字段名。 null
mode string 定義當(dāng)文本改變時(shí)如何加載數(shù)據(jù)網(wǎng)格（datagrid）數(shù)據(jù)。如果組合網(wǎng)格（combogrid）從服務(wù)器加載就設(shè)置為 'remote'。當(dāng)設(shè)置為 'remote' 模式時(shí)，用戶輸入的值將會(huì)被作為名為 'q' 的 http 請(qǐng)求參數(shù)發(fā)送到服務(wù)器，以獲取新的數(shù)據(jù)。 local
filter function(q, row) 定義當(dāng) 'mode' 設(shè)置為 'local' 時(shí)如何選擇本地?cái)?shù)據(jù)。返回 true 則選擇該行。
代碼實(shí)例： 
$('#cc').combogrid({
	filter: function(q, row){
		var opts = $(this).combogrid('options');
		return row[opts.textField].indexOf(q) == 0;
	}
});
100

事件

該事件擴(kuò)展自組合（combo）和數(shù)據(jù)網(wǎng)格（datagrid）。

方法

該方法擴(kuò)展自組合（combo），下面是為組合網(wǎng)格（combogrid）添加或重寫的方法。

名稱 參數(shù) 描述
options none 返回選項(xiàng)（options）對(duì)象。
grid none 返回?cái)?shù)據(jù)網(wǎng)格（datagrid）對(duì)象。下面的實(shí)例顯示如何取得選中的行： 
var g = $('#cc').combogrid('grid');	// get datagrid object
var r = g.datagrid('getSelected');	// get the selected row
alert(r.name);
setValues values 設(shè)置組件值的數(shù)組。
代碼實(shí)例： 
$('#cc').combogrid('setValues', ['001','007']);
setValue value 設(shè)置組件的值。
代碼實(shí)例： 
$('#cc').combogrid('setValue', '002');
clear none 清除組件的值。
jQuery EasyUI 插件 jQuery EasyUI 插件
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)