中文字幕一区二区人妻电影,亚洲av无码一区二区乱子伦as ,亚洲精品无码永久在线观看,亚洲成aⅴ人片久青草影院按摩,亚洲黑人巨大videos

上一篇：jQuery EasyUI 表單插件 - Combotree 組合樹 下一篇：jQuery EasyUI 表單插件 - Numberbox 數(shù)字框

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）提供了選擇某個項目的鍵盤導(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}
    ]]
    });

自動完成功能

讓我們?yōu)榻M合網(wǎng)格（combogrid）提那家自動完成功能。下拉數(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ù)庫，然后返回一個 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ù)時顯示的消息。 null
idField string id 的字段名。 null
textField string 顯示在文本框中的 text 字段名。 null
mode string 定義當(dāng)文本改變時如何加載數(shù)據(jù)網(wǎng)格（datagrid）數(shù)據(jù)。如果組合網(wǎng)格（combogrid）從服務(wù)器加載就設(shè)置為 'remote'。當(dāng)設(shè)置為 'remote' 模式時，用戶輸入的值將會被作為名為 'q' 的 http 請求參數(shù)發(fā)送到服務(wù)器，以獲取新的數(shù)據(jù)。 local
filter function(q, row) 定義當(dāng) 'mode' 設(shè)置為 'local' 時如何選擇本地數(shù)據(jù)。返回 true 則選擇該行。
代碼實例： 
$('#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 返回選項（options）對象。
grid none 返回數(shù)據(jù)網(wǎng)格（datagrid）對象。下面的實例顯示如何取得選中的行： 
var g = $('#cc').combogrid('grid');????// get datagrid object
var r = g.datagrid('getSelected');????// get the selected row
alert(r.name);
setValues values 設(shè)置組件值的數(shù)組。
代碼實例： 
$('#cc').combogrid('setValues', ['001','007']);
setValue value 設(shè)置組件的值。
代碼實例： 
$('#cc').combogrid('setValue', '002');
clear none 清除組件的值。
jQuery EasyUI 插件 jQuery EasyUI 插件其他擴(kuò)展
上一篇：jQuery EasyUI 表單插件 - Combotree 組合樹 下一篇：jQuery EasyUI 表單插件 - Numberbox 數(shù)字框