（十一）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 ...
随机推荐
- oracle查询表指定字段类型
查询表某字段类型,如下: SELECT data_type FROM all_tab_cols WHERE table_name = UPPER('SRIS_P_BaseInfo') and colu ...
- postgresql 计算时间差的秒数、天数
处理时间时用到了,记录一下. 计算时间差天数 select extract(day FROM (age('2017-12-10'::date , '2017-12-01'::date))); 计算时间 ...
- arcgis 地理坐标系 699个，投影坐标系是4767
import arcpy # Get the list of spatial references and print it. srs = arcpy.ListSpatialReferences(sp ...
- 灵活使用ssh、dsh和pssh高效管理大量计算机
http://os.iyunv.com/art/201012/240113.htm 灵活使用ssh.dsh和pssh高效管理大量计算机 http://os.iyunv.com2010-12-23 09 ...
- Nginx可以说是标配组件，但是主要场景还是负载均衡、反向代理、代理缓存、限流等场景；而把Nginx作为一个Web容器使用的还不是那么广泛。
Nginx可以说是标配组件,但是主要场景还是负载均衡.反向代理.代理缓存.限流等场景:而把Nginx作为一个Web容器使用的还不是那么广泛. 用Nginx+Lua(OpenResty)开发高性能Web ...
- osg qt kdchart 开发施工过程模拟软件
void TeslaManage::initGanttModel() { ganttModel = , , this); ganttModel->setHeaderData(, Qt::Hori ...
- Ubuntu 16.04 haproxy + keeplive
WEB架构
- C# WebApi 接口传参详解
这篇文章主要介绍了C# WebApi 接口传参详解,本篇打算通过get.post.put.delete四种请求方式分别谈谈基础类型(包括int/string/datetime等).实体.数组等类型的参 ...
- 【Leetcode_easy】720. Longest Word in Dictionary
problem 720. Longest Word in Dictionary 题意: solution1: BFS; class Solution { public: string longestW ...
- render()中添加js函数
方案一: { title: '操作', key: 'operation', render: (_, record) => ( <div> <Link to={`/hostMai ...