日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

EasyUI中Combox组合框的简单使用

發布時間：2025/3/19 编程问答 35 豆豆
生活随笔 收集整理的這篇文章主要介紹了 EasyUI中Combox组合框的简单使用 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

場景

效果

用法

從帶有預定義結構的 <select> 元素創建組合框（combobox）。

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;"><option value="aa">aitem1</option><option>bitem2</option><option>bitem3</option><option>ditem4</option><option>eitem5</option></select>

從 <input> 標記創建組合框（combobox）。

<input id="cc" class="easyui-combobox" name="dept"data-options="valueField:'id',textField:'text',url:'get_data.php'">

使用 javascript 創建組合框（combobox）。

<input id="cc" name="dept" value="aa">$('#cc').combobox({url:'combobox_data.json',valueField:'id',textField:'text'});

創建兩個依賴的組合框（combobox）。

<input id="cc1" class="easyui-combobox" data-options="valueField: 'id',textField: 'text',url: 'get_data1.php',onSelect: function(rec){var url = 'get_data2.php?id='+rec.id;$('#cc2').combobox('reload', url);}"><input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'">

json 數據格式的示例：

[{"id":1,"text":"text1"},{"id":2,"text":"text2"},{"id":3,"text":"text3","selected":true},{"id":4,"text":"text4"},{"id":5,"text":"text5"}]

屬性

該屬性擴展自組合（combo），下面是為組合框（combobox）添加的屬性。

名稱類型描述默認值
valueFieldstring綁定到該組合框（ComboBox）的 value 上的基礎數據的名稱。value
textFieldstring綁定到該組合框（ComboBox）的 text 上的基礎數據的名稱。text
groupFieldstring指示要被分組的字段。該屬性自版本 1.3.4 起可用。null
groupFormatterfunction(group)返回要顯示在分組項目上的分組文本。該屬性自版本 1.3.4 起可用。
代碼實例：
  • $('#cc').combobox({
  • groupFormatter: function(group){
  • return '<span style="color:red">' + group + '</span>';
  • }
  • });
    		• ?
    modestring定義在文本改變時如何加載列表數據。如果組合框（combobox）從服務器加載就設置為 'remote'。當設置為 'remote' 模式時，用戶輸入的值將會被作為名為 'q' 的 http 請求參數發送到服務器，以獲取新的數據。local
    urlstring從遠程加載列表數據的 URL 。null
    methodstring用來檢索數據的 http 方法。post
    dataarray被加載的列表數據。
    代碼實例：
  • <input class="easyui-combobox" data-options="
  • valueField: 'label',
  • textField: 'value',
  • data: [{
  • label: 'java',
  • value: 'Java'
  • },{
  • label: 'perl',
  • value: 'Perl'
  • },{
  • label: 'ruby',
  • value: 'Ruby'
  • }]" />
    		• null
    filterfunction定義當 'mode' 設置為 'local' 時如何過濾本地數據。該函數有兩個參數：
    q：用戶輸入的文本。
    row：列表中的行數據。
    返回 true 則允許顯示該行。

    代碼實例：
  • $('#cc').combobox({
  • filter: function(q, row){
  • var opts = $(this).combobox('options');
  • return row[opts.textField].indexOf(q) == 0;
  • }
  • });
    		• ?
    formatterfunction定義如何呈現行。該函數有一個參數：row。
    代碼實例：
  • $('#cc').combobox({
  • formatter: function(row){
  • var opts = $(this).combobox('options');
  • return row[opts.textField];
  • }
  • });
    		• ?
    loaderfunction(param,success,error)定義如何從遠程服務器加載數據。返回 false 則取消該動作。該函數有下列參數：
    param：要傳到遠程服務器的參數對象。
    success(data)：當獲取數據成功時將被調用的回調函數。
    error()：當獲取數據失敗時將被調用的回調函數。    		json loader
    loadFilterfunction(data)返回要顯示的過濾數據。該屬性自版本 1.3.3 起可用。?

    事件

    該事件擴展自組合（combo），下面是為組合框（combobox）添加的事件。

    名稱參數描述
    onBeforeLoadparam在請求加載數據之前觸發，返回 false 則取消加載動作。
    代碼實例：
  • // change the http request parameters before load data from server
  • $('#cc').combobox({
  • onBeforeLoad: function(param){
  • param.id = 2;
  • param.language = 'js';
  • }
  • });
    • onLoadSuccessnone當遠程數據加載成功時觸發。
    onLoadErrornone當遠程數據加載失敗時觸發。
    onSelectrecord當用戶選擇一個列表項時觸發。
    onUnselectrecord當用戶取消選擇一個列表項時觸發。

    方法

    該方法擴展自組合（combo），下面是為組合框（combobox）添加或重寫的方法。

    名稱參數描述
    optionsnone返回選項（options）對象。
    getDatanone返回加載的數據。
    loadDatadata加載本地列表數據。
    reloadurl請求遠程的列表數據。傳 'url' 參數來重寫原始的 URL 值。
    代碼實例：
  • $('#cc').combobox('reload'); // reload list data using old URL
  • $('#cc').combobox('reload','get_data.php'); // reload list data using new URL
    • setValuesvalues設置組合框（combobox）值的數組。
    代碼實例：
  • $('#cc').combobox('setValues', ['001','002']);
    • setValuevalue設置組合框（combobox）的值。
    代碼實例：
  • $('#cc').combobox('setValue', '001');
    • clearnone清除組合框（combobox）的值。
    selectvalue選擇指定的選項。
    unselectvalue取消選擇指定的選項。

    ?

    實現

    <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script> </head> <body> <select id="cc" class="easyui-combobox" name="dept" style="width:200px;"><option value="aa">aitem1</option><option>bitem2</option><option>bitem3</option><option>ditem4</option><option>eitem5</option> </select> </body> </html>

    ?

    總結

    以上是生活随笔為你收集整理的EasyUI中Combox组合框的简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。