jQuery EasyUI详解-EasyUI下拉列表datalist
来源:互联网 发布:曹云金 知乎 编辑:程序博客网 时间:2024/04/28 20:19
本篇主要介绍下拉列表控件的数据绑定和下拉列表选中项的获取。
与下拉框有两点不同,第一是外观上下拉列表会同时显示多个待选项,第二是下拉列表会经常遇到需要多选的情况。
之前猫哥自己也没在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":"篮球"}]
0 0
- jQuery EasyUI详解-EasyUI下拉列表datalist
- jQuery EasyUI详解-EasyUI下拉框combobox
- jquery-easyui中自定义下拉框列表
- JQuery EasyUI combobox(下拉列表框)
- JQuery EasyUI combobox(下拉列表框)
- easyUI 下拉列表
- select下拉列表(easyui)
- easyui下拉列表属性
- select下拉列表(easyui)
- jQuery EasyUI API 中文文档 - 下拉列表树(ComboTree)
- jquery easyui中获取下拉列表的值
- easyUI设置下拉列表默认值
- Jquery EasyUI DataGridView(easyui分页列表)
- jQuery EasyUI详解-EasyUI环境配置
- jQuery EasyUI详解-EasyUI表单 文本框 按钮
- jQuery EasyUI详解-EasyUI树形控件tree
- jQuery EasyUI详解-EasyUI表格datagrid
- jQuery EasyUI详解-EasyUI datagrid分页
- C++命令模式
- Leetcode刷题(5)
- Lotus and Characters
- echarts3 柱状图
- QT之QCUSTOMPLOT绘图(一)配置和第一个例子
- jQuery EasyUI详解-EasyUI下拉列表datalist
- RecyclerView实现ListView和GridView的效果
- 【九度OJ】1202题-排序
- 第一次面试总结
- 通过一个实例 Shell的快速入门教程 !
- 15. 3Sum--leetcode
- IconFont 图标的3种引用方式
- 正则中的exec方法
- 数码管左移