jQuery EasyUI詳解-EasyUI下拉列表datalist

阿新 • • 發佈：2019-02-06

本篇主要介紹下拉列表控制元件的資料繫結和下拉列表選中項的獲取。

與下拉框有兩點不同，第一是外觀上下拉列表會同時顯示多個待選項，第二是下拉列表會經常遇到需要多選的情況。

之前貓哥自己也沒在EasyUI中遇到過使用下拉列表時，同時獲取多個選中項的功能，今天寫DEMO的時候，只能感覺大約是$("#mydatalist").datalist("getSelectedRows");或者$("#mydatalist").datalist("getSelectedItems");然後試了半天沒試出來，然後去翻官方示例和教程，也沒找到，最後又去百度了半天，發現這個EasyUI的datalist還是挺冷門的，竟然沒找到…好尷尬啊。

最後靈機一動，其實下拉列表不就是列數是1的表格麼，果斷去找datagrid(表格)獲取多個選中行的方法，發現是var rows = $('#dg').datagrid('getSelections');，問題解決。(PS其實人家框架開發組對方法的設計還是挺為使用者著想的。只是獲取一個選中項的方法getSelected中Selected應該是形容詞或者動詞過去式（過去分詞）吧，而Selections既然能加s表複數應該是名詞吧，隱隱約約不甚合適，應該用getSelectedOne和getSelectedAll區分，或者用getSelectItem和getSelectedItems區分更加適合開發者去猜)。

OK，示意圖奉上：
這裡寫圖片描述
原始碼奉上：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>下拉列表datalist示例</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" 
>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
  </head>
  <body>
    <div class="easyui-panel" title="示例 簡單下拉列表" style="width:400px;padding:10px 10px;">
        <div>使用easyui-datalist樣式即可，需要注意的是簡單下拉列表是依賴與ul標籤的,注意lines:'true'使單元格直接具有分割線，更加美觀</div>
        <ul id="hobby" class="easyui-datalist" title="Basic DataList" data-options="lines:'true'" >
            <li value="football">足球</li>
            <li value="basketball">籃球</li>
        </ul>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="getSelectedHobby()">獲取選中值</a>
    </div>
    <div class="easyui-panel" title="示例  可多選的下拉列表" style="width:400px;padding:10px 10px;">
        <div>注意本示例資料直接來自json/hobby.json</div>
        <div id="hobbys" class="easyui-datalist" title="請選擇興趣愛好(可多選)" style="width:400px;height:250px" data-options="
            url: 'json/hobby.json',
            method: 'get',
            singleSelect:false">
        </div>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="getSelectedHobbys()">獲取選中項</a>
    </div>
    <script type="text/javascript">
        function getSelectedHobby(){
            var value=$("#hobby").datalist("getSelected");
            alert(value.text);
        }
        function getSelectedHobbys(){
            var value=$("#hobbys").datalist("getSelections");
            var result="你喜歡：";
            for(var i=0;i<value.length;i++){
                result+=value[i].text;
            }
            alert(result);
        }
    </script>
  </body>
</html>

最後，需要注意的是，datalist關聯後臺json檔案資料時，只關聯text鍵，本次使用的hobby.json原始碼如下。

[
{"text":"足球"},
{"text":"籃球"}
]

jQuery EasyUI詳解-EasyUI下拉列表datalist

jQuery EasyUI詳解-EasyUI下拉列表datalist

easyui -combobox 動態獲取下拉列表前後臺完整過程

jQuery EasyUI詳解-EasyUI環境配置

jQuery EasyUI詳解-EasyUI佈局和標籤頁

jQuery UI Autocomplete控制元件下拉列表固定高度

JQuery EasyUI combobox(下拉列表框)

jquery easyui中獲取下拉列表的值

詳細的<select>下拉列表詳解

（轉）基於MVC4+EasyUI的Web開發框架經驗總結（6）--在頁面中應用下拉列表的處理

easyui-combobox 下拉列表的JSON獲取資料例子

easyui中實現多個下拉列表聯動

EasyUI學習之Combobox（級聯下拉列表）（二）

easyui-combobox下拉列表獲取值

EasyUi的ComboBox(下拉列表框)

基於MVC4+EasyUI的Web開發框架經驗總結（6）--在頁面中應用下拉列表的處理

EasyUI ComboBox（下拉列表框）

Easyui 下拉列表動態繫結資料 C#

EasyUI下拉列表中實現輸入框不可手動輸入

easyui 下拉列表如何動態載入資料

EasyUI combobox下拉列表實現搜尋過濾（模糊匹配）

jQuery EasyUI詳解-EasyUI下拉列表datalist

相關推薦