EasyUI–下拉框combobox

首先声明,所谓的数据控件这一个概念,EasyUI官方应该也没这个说法。猫哥是感觉网页上经常使用的、经常需要从后台获取数据后显示到控件内部的,有这么四个:下拉框、下拉列表、树、表格。

之前猫哥已经分别演示了如何从json文件、如何从后端(比如Servlet)返回的json数据中加载数据到EasyUI控件。所以对于这四个数据控件,猫哥仅演示从json文件中获取数据后绑定即可,这样非常简洁明了,到了项目开发演示的阶段,根据需求一些地方就会使用后端过来的数据。

因为数据控件的使用频率高、需要说明的地方也多,尤其是表格(涉及很多内容比如分页、带复选框),所以本篇单独讲下拉框的实现及其数据的绑定。

先看示意图:
这里写图片描述
其中用到了一个users_data.json文件,在webroot下的json文件夹下,具体内容为:

[
	{
	    "userId":"1",
		"userName":"test",
		"userEmail":"maoge@maoge.com",
		"userSex":"1"
	},
	{
	    "userId":"2",
		"userName":"haha",
		"userEmail":"haha@maoge.com",
		"userSex":"0"
	}
]

具体实现如下,注意文字描述:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>下拉框combobox示例</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-combobox样式即可</div>
		<select id="hobby" class="easyui-combobox" label="兴趣爱好:" labelPosition="left" style="width:100%;">
				<option value="football">足球</option>
				<option value="basketball">篮球</option>
		</select>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="getSelectedHobby()">获取选中值</a>
	</div>
	<div class="easyui-panel" title="示例 静态绑定数据" style="width:400px;padding:10px 10px;">
		<div>静态绑定users_data.json文件中的数据,注意可以将url换成servlet的url,就可以直接获取后端的数据,当然,后端的数据需要以json格式返回</div>
		<div>注意valueField和textField分别对应json数据中的‘键’,还有一点就是select标签换成input也是可行的</div>
		<select id="name" class="easyui-combobox" style="width:100%;" data-options="
			url:'json/users_data.json',
			valueField: 'userId',
			textField: 'userName',
			label: '选择用户',
			labelPosition: 'top'">
		</select>
	</div>
	<div class="easyui-panel" title="示例 动态绑定数据" style="width:400px;padding:10px 10px;">
		<div>通过js动态绑定数据</div>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="bindUsersInfo()">绑定</a>
		<select id="usersSelect" class="easyui-combobox" style="width:100%;" data-options="
			valueField: 'userId',
			textField: 'userName',
			label: '选择用户',
			labelPosition: 'top'">
		</select>
	</div>
	
	<script type="text/javascript">
		function getSelectedHobby(){
			var value=$("#hobby").combobox("getValue");
			alert(value);
		}
		function bindUsersInfo(){
			$('#usersSelect').combobox('reload', 'json/users_data.json');
		}
	</script>
  </body>
</html>


如有问题请扫码联系我
在这里插入图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页