（十一）easyUI之下拉框
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%
String path = request.getContextPath();
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
href="<%=path%>/script/easyUI-1.4/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css"
href="<%=path%>/script/easyUI-1.4/themes/icon.css">
<script type="text/javascript"
src="<%=path%>/script/easyUI-1.4/jquery-1.8.3.min.js"></script>
<script type="text/javascript"
src="<%=path%>/script/easyUI-1.4/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="<%=path%>/script/easyUI-1.4/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
jQuery(function() {
//下拉列表框
$('#cc').combobox({
width : 150,
valueField : 'id',
textField : 'username',
data : [ {
"username" : 'admin',
"id" : '1'
}, {
"username" : 'user1',
"id" : '11'
}, {
"username" : 'user',
"id" : '12'
} ]
}); //自定义下拉列表框
$('#c2').combo({
required : true,
editable : false,
labelPosition : 'top'
});
$('#sp').appendTo($('#c2').combo('panel'));
$('#sp input').click(
function() {
var v = $(this).val();
var s = $(this).next('span').text();
$('#c2').combo('setValue', v).combo('setText', s).combo(
'hidePanel');
}); //树形下拉框
$('#c3').combotree({
url : 'tree.json',
required : true
}); //网格下拉框
$('#c4').combogrid({
panelWidth:450, idField:'dept_id',
textField:'dept_name',
url:'datagrid_data1.json',
rownumbers:true,
multiple:true,
checkbox:true,
columns:[[
{field:'',title:'',checkbox:true,width:60},
{field:'dept_id',title:'id',width:60},
{field:'dept_name',title:'部门名称',width:100},
{field:'address',title:'部门地址',width:120},
{field:'salary',title:'平均薪水',width:100}
]]
});
});
</script>
</head>
<body>
<table>
<tr>
<td>下拉列表框</td>
<td><div id="cc"></div></td>
</tr>
<tr>
<td>自定义下拉列表框</td>
<td>
<div id="c2"></div>
<div id="sp">
<input type="radio" name="lang" value="01"><span>Java</span><br />
<input type="radio" name="lang" value="02"><span>C#</span><br />
<input type="radio" name="lang" value="03"><span>Ruby</span><br />
<input type="radio" name="lang" value="04"><span>Basic</span><br />
<input type="radio" name="lang" value="05"><span>Fortran</span>
</div>
</td>
</tr>
<tr>
<td>树形下拉框</td>
<td><div id="c3"></div></td>
</tr>
<tr>
<td>网格下拉框</td>
<td><div id="c4"></div></td>
</tr>
</table>
</body>
</html>
- datagrid_data1.json
{
"total": 11,
"rows": [
{
"address": "qweawe",
"dept_name": "部门1",
"dept_id": "1",
"salary": "100000"
},
{
"address": "qweqwe",
"parent_id": "1",
"dept_name": "1的子部门1",
"dept_id": "11",
"salary": "2000"
},
{
"address": "qwe",
"parent_id": "1",
"dept_name": "1的子部门2",
"dept_id": "12",
"salary": "2005"
},
{
"address": "ad",
"dept_name": "部门2",
"dept_id": "2",
"salary": "5225"
},
{
"address": "d",
"parent_id": "2",
"dept_name": "2的子部门1",
"dept_id": "21",
"salary": "5888"
},
{
"address": "zx",
"dept_name": "部门3",
"dept_id": "3",
"salary": "858585"
},
{
"address": "c",
"parent_id": "3",
"dept_name": "3的子部门1",
"dept_id": "31",
"salary": "58"
},
{
"address": "sd",
"parent_id": "31",
"dept_name": "3的三级子部门",
"dept_id": "311",
"salary": "8585"
},
{
"address": "wa",
"parent_id": "311",
"dept_name": "ssssss",
"dept_id": "3111",
"salary": "85858"
},
{
"address": "wq",
"parent_id": "3",
"dept_name": "3的子部门2",
"dept_id": "32",
"salary": "8585"
},
{
"address": "ewe",
"parent_id": "32",
"dept_name": "3的三级子部门",
"dept_id": "321",
"salary": "858"
}
]
}
- tree.json
[
{
"children": [
{
"id": "11",
"text": "1的子部门1"
},
{
"id": "12",
"text": "1的子部门2"
}
],
"id": "1",
"text": "部门1"
},
{
"children": [
{
"id": "21",
"text": "2的子部门1"
}
],
"id": "2",
"text": "部门2"
},
{
"children": [
{
"children": [
{
"children": [
{
"id": "3111",
"text": "ssssss"
}
],
"id": "311",
"text": "3的三级子部门"
}
],
"id": "31",
"text": "3的子部门1"
},
{
"children": [
{
"id": "321",
"text": "3的三级子部门"
}
],
"id": "32",
"text": "3的子部门2"
}
],
"id": "3",
"text": "部门3"
}
]
结果：
（十一）easyUI之下拉框的更多相关文章
- EasyUI下拉框级联
EasyUI用来实现后台界面还是可以的,毕竟面对的是小众群体而非广大的用户,简单为美.这里想聊的功能是一种下拉框的联动,比如我选中了下拉框A的某一项,那么下拉框B的选项就是甲乙丙丁,如果我选了A的另一 ...
- ASP.NET MVC之下拉框绑定四种方式（十）
前言 上两节我们讲了文件上传的问题,关于这个上传的问题还未结束,我也在花时间做做分割大文件处理以及显示进度的问题,到时完成的话再发表,为了不耽误学习MVC其他内容的计划,我们今天开始好好讲讲关于MVC ...
- yii2组件之下拉框带搜索功能（yii-select2）
简单的小功能,但是用起来还是蛮爽的.分享出来让更多的人有更快的开发效率,开开心心快乐编程. 如果你还没有使用过composer,你可就out了,看我的教程分享,composer简直就是必备神奇有木有. ...
- 转：python webdriver API 之下拉框处理
下拉框也是 web 页面上非常常见的功能,webdriver 对于一般的下拉框处理起来也相当简单,要想定位下拉框中的内容,首先需要定位到下拉框:这样的二次定位,我们在前面的例子中已经有过使用,下面通过 ...
- thymeleaf之下拉框回显选中
#1.select下拉框取值 <div class="form-group "> <label id="resource" ...
- 插件之下拉框Select2
select2为代替常规的select而出现,可自定义select的样式,最明显的功能就是集合中可以搜索 关于浏览器要求,ie8+,Chrome 8+,Firefox 10+,Safari 3+,Op ...
- 【Python+selenium Wendriver API】之下拉框定位
上代码: # coding:utf-8 from selenium import webdriver from selenium.webdriver.common.action_chains impo ...
- Python自动化之下拉框，隐藏标签定位 代码&报错解决
python自动化:下拉框定位方法之select标签 style="display: none;" 报错 selenium.common.exceptions.ElementNo ...
- Selenium之下拉框操作
下拉框操作: 一般下拉框适用场景:在新增时有下拉框选项,在二级联动或多级联动有下拉(比如:在选择省市县时的多级联动下拉). 下拉框选择都有select的标签属性,存在两个属性select和option ...
随机推荐
- TynSerial序列（还原）TClientDataSet
TynSerial序列(还原)TClientDataSet 可以一次性序列(还原)多个TClientDataSet. 1)TClientDataSet查询数据 procedure TForm1.Qry ...
- Tomcat监听shutdown释放数据库连接池
开发时因为更新代码,频繁重启Tomcat,遇到一个问题:在执行shutdown脚本后,Tomcat进程没有关闭依然存在(但是HTTP服务已经停止),需要手动执行kill命令才行.查了一些资料结合经验, ...
- IDEA新建本地项目关联远程git仓库
现在远程git仓库创建一个repository,然后本地创建项目,最后进行关联.三板斧,打完收工. 第一步.第二步地球人都知道,略过不表,第三步比较关键,举个例子: 0.创建本地Git仓库:VCS - ...
- pyecharts绘画优美图形
常用图形:柱形图-折线图-饼图-散点图 from pyecharts import Line, Bar, Pie, EffectScatter # 数据 attr =["衬衫", ...
- 【产品】C转B
http://www.woshipm.com/pmd/2780830.html 这篇文章总结的不错.
- （五）AJAX技术
一.定义 AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的 ...
- laravel门面DB返回数组配置
在数据库配置文件中添加 'fetch' => PDO::FETCH_ASSOC, //但是这个配置好像是全局的,不能针对单个数据库连接进行配置 也可以在方法内使用php内置函数get_objec ...
- 修改NGUI 3.11 的控件 inputfileld hide input 属性bug
1.勾选hideinput属性后,输入中文,会出现,无法显示的问题. 2.勾选hideinput属性后,密码框会出现第一个字母被吃掉的问题 解决方案:控件都不要勾选hideinput属性,代码做如下修 ...
- Azure Web应用相关设置
这里用来记录自己在工作中,在Azure Web应用中用到的配置 设置NodeJS版本 Azure Web应用默认的NodeJS版本是0.10.4,这个版本太低,不能满足实际的需要 参照下图修改,根据自 ...
- 利用pandas读取Excel表格，用matplotlib.pyplot绘制直方图、折线图、饼图
利用pandas读取Excel表格,用matplotlib.pyplot绘制直方图.折线图.饼图 数据: 折线图代码: import pandas as pdimport matplotlib. ...