（十一）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 ...
随机推荐
- Linux 系统配置IPv6
1.自动获取IPV6地址 1)修改/etc/sysconfig/network文件,修改如下字段,不存在则手动添加,部分系统默认是开启的NETWORKING_IPV6=yes 2)修改/etc/sys ...
- linux删除目录下指定后缀的文件
这几天在Colab上使用ImageAI训练模型时每次都会保存精确度有所提升的模型,这些模型可以算是中间产物,不太重要.为了避免混淆,运行完通过以下命令删除. find . -name "*. ...
- DMA详解
1.DMA由来DMA(Direct Memory Access,直接存储器访问).在DMA出现之前,CPU与外设之间的数据传送方式有程序传送方式.中断传送方式.CPU是通过系统总线与其他部件连接并进行 ...
- Nginx中文文档-安装 Nginx
nginx可以使用各平台的默认包来安装,本文是介绍使用源码编译安装,包括具体的编译参数信息. 正式开始前,编译环境gcc g++ 开发库之类的需要提前装好,这里默认你已经装好. ububtu平台编译环 ...
- Oracle数据库-primary key/foreign key和references关系
主要介绍一下个人对主键(primary key).外键(foreign key).候选键(Candidate key).超键(super key).references的总结 概念: 主键:用户选择元 ...
- JSP页面中如何注入Spring容器中的bean
第一步在JSP页面中导入下面的包: <%@page import="org.springframework.web.context.support.WebApplicationCont ...
- Could not find conda environment: tensorflow | anaconda激活环境
问题:在使用Anaconda Prompt时activate tensorflow时出现Could not find conda environment: tensorflow. 解答: 因为大家在使 ...
- java递归删除目录下所有内容
java递归删除目录下所有内容 private static boolean deleteDir(File dir) {if (dir.isDirectory()) { String[] ...
- Windows .net服务器系列 wmic命令使用示例--Examples of WMIC commands for Windows .NET SERVER Family
1.0 Method execution: NICCONFIG (Win32_NetworkAdapterConfiguration) WMIC NICCONFIG WHERE Index=1 CAL ...
- Oracle系统表整理+常用SQL语句收集（转载）
原文:https://www.cnblogs.com/jiangxinnju/p/5840420.html-- DBA/ALL/USER/V_$/GV_$/SESSION/INDEX开头的绝大部分都是 ...