（十一）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 ...
随机推荐
- SpringBoot-文件在线预览解决方案-基于OpenOffice及jacob
项目中有一个需求:实现文件(主要是Office文件)的在线预览,根据前端需求,Office文件需要转换成pdf或者html方可在浏览器中打开预览,那么后端需要将文件转为pdf/格式返回地址给前端.目前 ...
- Oralce JDBC jar包下载
下载地址:https://pan.baidu.com/s/1sU7gu4biigEAw-3Bu7yIOA 下载包中包括以下文件: ojdbc5.jarojdbc5dms.jarojdbc5dms_g. ...
- VUE el-input正则验证
①只能输入大于0的整数 check(value) { let reg = /^[-]\d*$/; var _this = this; if (value) { if (new RegExp(reg). ...
- MongoDB基础笔记
MongoDB show dbs 查看当前的数据库 use test 选库 show tables/collections 查看当前库下的文档 db.help() 查看帮助 db.createColl ...
- [Java复习] MQ
1. 为什么要用MQ? 解耦,异步,削峰 2. MQ的优点和缺点? 优点: 解耦.异步.削峰 缺点: 1. 系统可用性降低. 外部依赖越多,越容易挂.如果MQ挂了,怎么处理? 2. 系统复杂度提高. ...
- SpringMVC源码分析--HandlerMappings
之前分析过SpringMVC中的DispatcherServlet,分析了SpringMVC处理请求的过程.但忽略了一些DispatcherServlet协助请求处理的组件,例如SpringMVC中的 ...
- java如何压缩多个文件到压缩包，并下载到浏览器？
java压缩多个文件到压缩包,并下载到浏览器 解决方法: 完整的方法如下,很简单,亲试有效,极力推荐. 我是以流作为文件,而不是file,循环把所有pdf文件压缩到pdf.zip压缩包中. 1.前 ...
- Qt编写自定义控件53-自定义宽高下拉框
一.前言 默认的qcombobox控件,如果元素item中的内容过长超过控件本身的宽度的话,会自动切掉变成省略号显示,有些应用场景不希望是省略号显示,希望有多长就显示多长,还有一种应用场景是需要设置下 ...
- 有关Linux
关于nginx https://www.cnblogs.com/jingmoxukong/p/5945200.html 停止命令 sudo systemctl stop nginx.service
- keepalived两台机器同时出现vip问题
配置文件: 主:192.168.1.14 ! Configuration File for keepalived global_defs { script_user root enable_scrip ...