EasyUI–下拉列表datalist详解

最新推荐文章于 2024-04-13 07:06:41 发布

程序员大阳

最新推荐文章于 2024-04-13 07:06:41 发布

阅读量1.1w

点赞数 1

分类专栏： # 前端文章标签： jquery easyui datalist 下拉列表

未经本人允许，请勿转载本人文章

本文链接：https://blog.csdn.net/woshisangsang/article/details/62060511

版权

前端专栏收录该内容

60 篇文章 5 订阅

订阅专栏

点此查看全部文字教程、视频教程、源代码

本篇主要介绍下拉列表控件的数据绑定和下拉列表选中项的获取。

与下拉框有两点不同，第一是外观上下拉列表会同时显示多个待选项，第二是下拉列表会经常遇到需要多选的情况。

之前猫哥自己也没在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":"篮球"}
]

程序员大阳

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录