您的位置：首页 > 产品设计 > UI/UE

12.EASYUI ComboBox组件

2016-08-15 00:00 375 查看
一，基本下拉框组件



<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="UTF-8">
<title>Basic ComboBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../css/demo.css">
<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<h2>基本下拉框组件</h2>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"></div>
<div>在下拉框内输入信息自动匹配.</div>
</div>

<select class="easyui-combobox" name="sheng" style="width:200px;">
<option value="河北省">河北省</option>
<option value="山东省">山东省</option>
<option value="辽宁省">辽宁省</option>
<option value="黑龙江省">黑龙江省</option>
<option value="吉林省">吉林省</option>
<option value="甘肃省">甘肃省</option>
<option value="青海省">青海省</option>
<option value="河南省">河南省</option>
<option value="江苏省">江苏省</option>
<option value="湖北省">湖北省</option>
<option value="湖南省">湖南省</option>
<option value="江西省">江西省</option>
<option value="浙江省">浙江省</option>
<option value="广东省">广东省</option>
<option value="云南省">云南省</option>
<option value="福建省">福建省</option>
<option value="台湾省">台湾省</option>
<option value="海南省">海南省</option>
<option value="山西省">山西省</option>
<option value="四川省">四川省</option>
<option value="陕西省">陕西省</option>
<option value="贵州省">贵州省</option>
<option value="安徽省">安徽省</option>
</select>

</body>
</html>

二，动态加载下拉框数据



<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="UTF-8">
<title>Basic ComboBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../css/demo.css">
<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<h2>动态加载下拉框数据</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>点击下面按钮加载数据.</div>
</div>
<div style="margin:10px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#language').combobox('reload', '../ComboBox/combobox_data1.json')">加载数据</a>
</div>

<input class="easyui-combobox" id="language" name="language"
data-options="valueField:'id',textField:'text'">
</body>
</html>

三，下拉框多选



<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="UTF-8">
<title>Basic ComboBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../css/demo.css">
<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<h2>下拉框多选</h2>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"></div>
<div>点击下拉框选择多个项.</div>
</div>
<input class="easyui-combobox"
name="language"
data-options="
url:'../ComboBox/combobox_data1.json',
valueField:'id',
textField:'text',
multiple:true,
panelHeight:'auto'
">

</body>
</html>

四，导航下拉框



<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="UTF-8">
<title>Basic ComboBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../css/demo.css">
<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<h2>导航下拉框</h2>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"></div>
<div>导航下拉框时选中一个值.</div>
</div>
<div style="margin:10px 0;">
<input type="checkbox" checked onchange="$('#cc').combobox({selectOnNavigation:$(this).is(':checked')})">
<span>导航选中</span>
</div>

<select id="cc" class="easyui-combobox" name="sheng" style="width:200px;">
<option value="河北省">河北省</option>
<option value="山东省">山东省</option>
<option value="辽宁省">辽宁省</option>
<option value="黑龙江省">黑龙江省</option>
<option value="吉林省">吉林省</option>
<option value="甘肃省">甘肃省</option>
<option value="青海省">青海省</option>
<option value="河南省">河南省</option>
<option value="江苏省">江苏省</option>
<option value="湖北省">湖北省</option>
<option value="湖南省">湖南省</option>
<option value="江西省">江西省</option>
<option value="浙江省">浙江省</option>
<option value="广东省">广东省</option>
<option value="云南省">云南省</option>
<option value="福建省">福建省</option>
<option value="台湾省">台湾省</option>
<option value="海南省">海南省</option>
<option value="山西省">山西省</option>
<option value="四川省">四川省</option>
<option value="陕西省">陕西省</option>
<option value="贵州省">贵州省</option>
<option value="安徽省">安徽省</option>
</select>

</body>
</html>

五，下拉框自定义格式



<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="UTF-8">
<title>Basic ComboBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../css/demo.css">
<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<h2>下拉框自定义格式</h2>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"></div>
<div>如何在下拉框中自定义格式.</div>
</div>
<input class="easyui-combobox" name="language" data-options="
url: '../ComboBox/combobox_data1.json',
valueField: 'id',
textField: 'text',
panelWidth: 350,
panelHeight: 'auto',
formatter: formatItem
">
<script type="text/javascript">
function formatItem(row){
var s = '<span style="font-weight:bold">' + row.text + '</span><br/>' +
'<span style="color:#888">' + row.desc + '</span>';
return s;
}
</script>
</body>
</html>

六，绑定远程数据



<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="UTF-8">
<title>Basic ComboBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../css/demo.css">
<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<h2>绑定远程数据</h2>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"></div>
<div>下拉框绑定了一个远程数据.</div>
</div>
<input class="easyui-combobox"
name="language"
data-options="
url:'../ComboBox/combobox_data1.json',
valueField:'id',
textField:'text',
panelHeight:'auto'
">

</body>
</html>

七，下拉框组件相关操作



<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="UTF-8">
<title>Basic ComboBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../css/demo.css">
<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<h2>下拉框组件相关操作</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>点击下面按钮执行相关操作.</div>
</div>

<div style="margin:10px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="setvalue()">设置值</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="alert($('#state').combobox('getValue'))">获取值</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#state').combobox('disable')">禁用</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#state').combobox('enable')">启用</a>
</div>
<script type="text/javascript">
function setvalue(){
$.messager.prompt('设置值','请输入一个值(张三,李四,王八等):',function(v){
if (v){
$('#state').combobox('setValue',v);
}
});
}
</script>

<select id="state" class="easyui-combobox" name="sheng" style="width:200px;">
<option value="河北省">河北省</option>
<option value="山东省">山东省</option>
<option value="辽宁省">辽宁省</option>
<option value="黑龙江省">黑龙江省</option>
<option value="吉林省">吉林省</option>
<option value="甘肃省">甘肃省</option>
<option value="青海省">青海省</option>
<option value="河南省">河南省</option>
<option value="江苏省">江苏省</option>
<option value="湖北省">湖北省</option>
<option value="湖南省">湖南省</option>
<option value="江西省">江西省</option>
<option value="浙江省">浙江省</option>
<option value="广东省">广东省</option>
<option value="云南省">云南省</option>
<option value="福建省">福建省</option>
<option value="台湾省">台湾省</option>
<option value="海南省">海南省</option>
<option value="山西省">山西省</option>
<option value="四川省">四川省</option>
<option value="陕西省">陕西省</option>
<option value="贵州省">贵州省</option>
<option value="安徽省">安徽省</option>
</select>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航