基于jQury的UI框架 easyUI

来源：互联网发布：c语言迷宫最短路径编辑：程序博客网时间：2024/06/06 00:47

基于jQury的UI框架 easyUI

sf2gis@163.com

2015年8月6日

2015年9月25日重构

2015年10月15日属性事件读写

1 目标：在页面构造类似桌面的控件，生成易于使用和布局的界面。

2 原理：使用jQuery和javascript、CSS、HTML构造不同标签的样式模仿桌面控件。

3 流程:加入easyUI的js库和css样式，构建控件。

3.1 加入css和js。

3.2 构建easyUI的容器：以easy-控件名为class的div。

示例：

<divclass="easyui-layout" style="height:100%;width:100%">

<div data-options="region:'north',title:'northtitle',split:true" style="height:20%">north</div>

<div data-options="region:'south',title:'southtitle',split:true" style="height:200px">south</div>

<div class="test">this iscenter</div>

</div>

3.3 设置属性：data-options兼容html5的属性（从V1.3开始）。

data-options中以JSON格式设置。

示例：

<div data-options="region:'south',title:'southtitle',split:true" style="height:200px">south</div>

4 方法：组织架构：jQuery标准插件格式。

参见：jQuery.docx插件部件。

所有控件由属性、方法和事件组成。

4.1 属性和事件作为控件的属性存在。事件以onEvent函数存在。两者的默认实现都在$.fn.plugin.defaults下定义。

参考：http://blog.csdn.net/baronyang/article/details/44706257

4.1.1属性读取：$(id).easyui-type（‘options’）[属性]

$('#showcharts').linkbutton('options')['selected']

4.1.2属性设置：$(id).easyui-type（｛属性：值｝）

$('#showcharts').linkbutton({

iconCls : 'icon-add',

text : '显示图表'

})

4.1.3事件设置：属性设置或bind（jquery模式）

4.1.3.1 属性设置（推荐）：$(id).easyuiType({事件名：响应函数})

$('#pg').propertygrid({onLoadSuccess:function(e){}});

4.1.3.2 jQuery绑定：$(id).常用事件（响应函数)或者$(id).bind(通用事件，响应函数)

$('#showcharts').click(showCharts);

$('#showcharts').bind('click',showCharts);

示例：

console.debug($.fn.dialog.defaults)

示例：linkbutton属性读写、事件绑定

//easyUITest.html

<!DOCTYPE html">

<!--

@author: sf2gis@163.com

@date: 2015-10-14 15:03

-->

<html>

<head>

<metacontent="text/html; charset=utf-8" />

<linkrel="stylesheet" type="text/css"

href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>

<linkrel="stylesheet" type="text/css"

href="easyui/jquery-easyui-1.4.3/themes/icon.css"/>

<linkrel="stylesheet" type="text/css"href="css/home.css" />

<scripttype="text/javascript"

src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>

<scripttype="text/javascript"

src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

<scripttype="text/javascript"

src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

<scripttype="text/javascript" src="js/home.js"></script>

<scripttype="text/javascript"src="js/highcharts.js"></script>

<scripttype="text/javascript"src="js/highcharts-3d.js"></script>

<title>Insert titlehere</title>

</head>

<body>

<a id="showcharts"class="easyui-linkbutton"

style="width: 100px; float: right;"

data-options="disabled:false,toggle:true,selected:false,iconCls:'icon-add'">显示图表</a>

$(document).ready(function() {

//toggle pie

// $('#showcharts').click(showCharts);

$('#showcharts').bind('click',showCharts);

});

function showCharts() {

if($('#showcharts').linkbutton('options')['selected']) {

$('#showcharts').linkbutton({

iconCls :'icon-add',

text : '显示图表'

});

} else {

$('#showcharts').linkbutton({

iconCls : 'icon-remove',

text : '隐藏图表'

});

}

</script>

</body>

</html>

4.2 所有的方法由$.fn.plugin.methods定义，可以扩展。格式为function(jq,args)。调用格式为$.pluginName(methodName,args)。

示例：

console.debug($.fn.dialog.methods)

参考：http://www.jeasyui.com/documentation/index.php

4.3 使用easy构建框架：href加载其它页面

加载的HTML页面只加载body中的内容；如果无HTML结构，则全部加载。因此推荐将加载页面去掉HTML结构。

加载JSP时，可以将JSP代码正常加入。

参考：

http://zhidao.baidu.com/link?url=TSl4cd-EofsVQKFqJvp7mGm3GO6mJaX6SnTjkTXeuLhkLHIfv3mutoF8qcgjk_RG29t8fGaETYx3u7u_vfphBK

4.4 图标iconCls:指定icon的class属性

所有的icon的class属性在themes\icon.css文件中指定。图标文件在themes\icons目录中。

参考：

http://zhidao.baidu.com/link?url=DMWiUGzMLbNkPDL33We0FzX27jpFdNqvb4dqYOafiV3rNDGQDP-A_ph-JKllkvDcgi2lC_g7x_PGRjXgKtIOuECAatWPXaJk13tzw44Ts7i

//icons目录

//icons.css

.icon-blank{

background:url('icons/blank.gif') no-repeat center center;

}

.icon-add{

background:url('icons/edit_add.png') no-repeat center center;

}

.icon-edit{

background:url('icons/pencil.png') no-repeat center center;

}

.icon-clear{

background:url('icons/clear.png') no-repeat center center;

}

.icon-remove{

background:url('icons/edit_remove.png') no-repeat centercenter;

}

.icon-save{

background:url('icons/filesave.png') no-repeat center center;

}

.icon-cut{

background:url('icons/cut.png') no-repeat center center;

}

.icon-ok{

background:url('icons/ok.png') no-repeat center center;

}

.icon-no{

background:url('icons/no.png') no-repeat center center;

}

.icon-cancel{

background:url('icons/cancel.png') no-repeat center center;

}

.icon-reload{

background:url('icons/reload.png') no-repeat center center;

}

.icon-search{

background:url('icons/search.png') no-repeat center center;

}

.icon-print{

background:url('icons/print.png') no-repeat center center;

}

.icon-help{

background:url('icons/help.png') no-repeat center center;

}

.icon-undo{

background:url('icons/undo.png') no-repeat center center;

}

.icon-redo{

background:url('icons/redo.png') no-repeat center center;

}

.icon-back{

background:url('icons/back.png') no-repeat center center;

}

.icon-sum{

background:url('icons/sum.png') no-repeat center center;

}

.icon-tip{

background:url('icons/tip.png') no-repeat center center;

}

.icon-filter{

background:url('icons/filter.png') no-repeat center center;

}

.icon-man{

background:url('icons/man.png') no-repeat center center;

}

.icon-lock{

background:url('icons/lock.png') no-repeat center center;

}

.icon-more{

background:url('icons/more.png') no-repeat center center;

}

.icon-mini-add{

background:url('icons/mini_add.png') no-repeat center center;

}

.icon-mini-edit{

background:url('icons/mini_edit.png') no-repeat center center;

}

.icon-mini-refresh{

background:url('icons/mini_refresh.png') no-repeat centercenter;

}

.icon-large-picture{

background:url('icons/large_picture.png') no-repeat centercenter;

}

.icon-large-clipart{

background:url('icons/large_clipart.png') no-repeat centercenter;

}

.icon-large-shapes{

background:url('icons/large_shapes.png') no-repeat centercenter;

}

.icon-large-smartart{

background:url('icons/large_smartart.png') no-repeat centercenter;

}

.icon-large-chart{

background:url('icons/large_chart.png') no-repeat centercenter;

}

4.5 示例：动态加载jsp页面（包含高德地图js）。

//home.html

<!doctypehtml>

<html>

<head>

<metacontent="text/html; charset=utf-8" />

<linkrel="stylesheet" type="text/css"href="easyui/1.3.4/themes/default/easyui.css" />

<linkrel="stylesheet" type="text/css"href="css/home.css" />

<scripttype="text/javascript"src="js/jquery-1.8.0.min.js"></script>

<scripttype="text/javascript"src="easyui/1.3.4/jquery.easyui.min.js"></script>

<scripttype="text/javascript" src="easyui/1.3.4/locale/easyui-lang-zh_CN.js"></script>

<scripttype="text/javascript" src="js/home.js"></script>

</head>

<body>

<divid="header">

</div>

<divid="cljk" class="menuBlock">

<divid="cljk_png" class="menuPNG"style="'background-color:rgb(18,138,222)'">

<imgsrc="icons_thbd/topicon0.png" alt="thbd"><br>

<spanstyle="color:#FFF">车辆监控</span>

</div>

<divclass="menuPNG">

<imgsrc="icons_thbd/topicon1.png" alt="thbd"><br>

<spanstyle="color:#FFF">运营统计</span>

</div>

<divid="arrow"></div>

<div>

<liclass="menu_li"><a href="">行驶记录仪</a></li>

<liclass="menu_li"><a href="">轨迹回放</a></li>

<liclass="menu_li"><a href="">运营违规统计</a></li>

<liclass="menu_li"><a href="">行驶里程统计</a></li>

<liclass="menu_li"><a href="">车辆上线率统计</a></li>

<liclass="menu_li"><a href="">车辆上下线统计</a></li>

<liclass="menu_li"><a href="">车辆不在线统计</a></li>

<liclass="menu_li"><a href="">危险驾驶统计</a></li>

<liclass="menu_li"><a href="">油耗统计</a></li>

<liclass="menu_li"><a href="">设备状态查询</a></li>

<liclass="menu_li"><a href="">终端属性查询</a></li>

</ul>

</div>

<divclass="menuPNG">

<imgsrc="icons_thbd/topicon2.png" alt="thbd"><br>

<spanstyle="color:#FFF">运营管理</span>

</div>

<divid="arrow"></div>

<div>

<li class="menu_li"><a href="">操作日志查询</a></li>

<liclass="menu_li"><a href="">调度信息查询</a></li>

<liclass="menu_li"><a href="">多媒体查询</a></li>

<liclass="menu_li"><a href="">车辆上下线查询</a></li>

<liclass="menu_li"><a href="">用户在线情况查询</a></li>

<liclass="menu_li"><a href="">车辆在线查询</a></li>

<liclass="menu_li"><a href="">电子运单查询</a></li>

<liclass="menu_li"><a href="">提问消息查询</a></li>

<liclass="menu_li"><a href="">信息点播</a></li>

<liclass="menu_li"><a href="">区域协查</a></li>

<liclass="menu_li"><a href="">数据透传</a></li>

</ul>

</div>

<divclass="menuPNG">

<imgsrc="icons_thbd/topicon3.png" alt="thbd"><br>

<spanstyle="color:#FFF">业务支撑</span>

</div>

<divid="arrow"></div>

<div>

<liclass="menu_li"><a href="">组织管理</a></li>

<liclass="menu_li"><a href="">车辆管理</a></li>

<liclass="menu_li"><a href="">终端管理</a></li>

<liclass="menu_li"><a href="">SIM卡管理</a></li>

<liclass="menu_li"><a href="">驾驶员管理</a></li>

<liclass="menu_li"><a href="">驾驶员IC卡管理</a></li>

<liclass="menu_li"><a href="">终端参数设置</a></li>

<liclass="menu_li"><a href="">用户管理</a></li>

<liclass="menu_li"><a href="">权限管理</a></li>

<liclass="menu_li"><a href="">线路&围栏管理</a></li>

<liclass="menu_li"><a href="">触发拍照设置</a></li>

<liclass="menu_li"><a href="">电话本设置</a></li>

<liclass="menu_li"><a href="">事件设置</a></li>

</ul>

</div>

<divclass="menuPNG">

<imgsrc="icons_thbd/topicon5.png" alt="thbd"><br>

<spanstyle="color:#FFF">监管服务</span>

</div>

<divid="arrow"></div>

<div>

<liclass="menu_li"><a href="">定位数据补传</a></li>

<liclass="menu_li"><a href="">定位信息交换</a></li>

<liclass="menu_li"><a href="">下级平台上报</a></li>

<liclass="menu_li"><a href="">上级请求-自动应答</a></li>

<liclass="menu_li"><a href="">上级请求-人工应答</a></li>

<liclass="menu_li"><a href="">上级请求-无需应答</a></li>

</ul>

</div>

<divclass="menuPNG">

<imgsrc="icons_thbd/topicon4.png" alt="thbd"><br>

<spanstyle="color:#FFF">系统管理</span>

</div>

<divid="header-right">

<labelid="time"></label>

</div>

<divid="content" class="easyui-layout"data-options="fit:true">

<div id="south_area"data-options="region:'south',border:false"style="height:100px;background:#A9FACD;padding:10px;">southregion</div>

<divid="center_area" data-options="region:'center',title:'Center',href:'amap2.jsp'"></div>

</div>

</body>

</html>

//amap2.jsp

<%-- jsp --%>

<%@ pagecontentType="text/html;charset=GBK" language="java"errorPage="" %>

<%!

//add a member

public int count;

public String info(){

return "this is background info.";

}

<%-- html--%>

<styletype="text/css">

#map { height:100%;width:100%; }

</style>

<%-- javascript --%>

<scripttype="text/javascript">

$(document).ready(function(){

//dynamic load baidu map js lib

$.getScript("http://webapi.amap.com/maps?v=1.3&key=416a43c96936f23269f63b3148a84ab9",function(data, status, jqxhr) {

mapInit();

});

//map function

var mapObj;

function mapInit()

{

//create map

var opt = {

level:13,//level

center:new AMap.LngLat(116.397428,39.90923),//center point

doubleClickZoom:true,//zoom when double click

scrollWheel:true//zoom when scroll wheel

}

mapObj = new AMap.Map("map",opt);

//predefined plugin

mapObj.plugin(["AMap.ToolBar","AMap.OverView","AMap.Scale"],function(){

var t=new AMap.ToolBar(mapObj);

mapObj.addControl(t);

var o=new AMap.OverView({isOpen:false});//true:openoverview when init

mapObj.addControl(o);

var s=new AMap.Scale();

mapObj.addControl(s);

});

//add car marker

var car=new AMap.Marker({

id:"test01",

position:new AMap.LngLat(116.397428,39.90923),

icon:"images/car.png",

map:mapObj

});

AMap.event.addListener(car,"click",carClick);

var car2=new AMap.Marker({

id:"test02",

position:new AMap.LngLat(116.387428,39.90823),

icon:"images/car2.png",

map:mapObj

});

AMap.event.addListener(car2,"click",carClick);

//add marker cluster

var carArray=[car,car2];

varcarClustererStyles=[{url:"images/m1.png",size:newAMap.Size(53,52),offset:newAMap.Pixel(0,-26)},{url:"images/m2.png",size:new AMap.Size(56,55)}];

mapObj.plugin(["AMap.MarkerClusterer"],function(){

var carClusterer=newAMap.MarkerClusterer(mapObj,carArray,{styles:carClustererStyles,averageCenter:true});

});

}

function carClick(e){

//$.get(url,data,callback),use ajax to get background data

console.debug("click="+e.lnglat+","+e.pixel+","+e.type+e.target);

var info="<%=info()%>";

var infoWin=createInfoWindow(info);

infoWin.open(mapObj,e.lnglat);

}

function createInfoWindow(strInfo){

var infoWin=new AMap.InfoWindow({

content:"<h1>this isinfoWindow</h1><p>"+strInfo+"</p>"

});

return infoWin;

}

});

</script>

5 方法：控件

5.1 布局：整体布局eaayui-layout,面板eaysui-panel

5.1.1整体布局easyui-layout：页面切分，整个界面的划分。

5.1.1.1 目标：将整个页面划分为不同的区域，整体控制。

5.1.1.2 原理：整体div划分为不同的区域，每个区域指定大小。

5.1.1.3 流程：设置easyui-layout目标div，指定每个分区域div。

注意:必须设置HTML的DOCTPYE版本

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

示例：分区域

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0Transitional//EN">

<html>

<head>

<title>easyUI Test</title>

</head>

<body>

<divclass="easyui-layout" style="height:100%;width:100%">

<divdata-options="region:'north',title:'north title',split:true"style="height:20%">north</div>

<divdata-options="region:'south',title:'south title',split:true"style="height:200px">south</div>

<divdata-options="region:'east',title:'east title',split:true"style="width:100px">east</div>

<divdata-options="region:'west',title:'west title',split:true"style="width:100px">west</div>

<divdata-options="region:'center',title:'center title'" >

<divclass="test">this is center</div>

</div>

</script>

</body>

</html>

5.1.1.4 方法：使用easyui-layout设置目标区域，然后在其中设置分区域。

设置整体div：class="easyui-layout"

分区域region：north,south,west,east,center(必须)：data-options="region:'north'"。

标题：title。

可以推拉分割split: data-options="split:true"。

指定页面href: data-options="href:'plugin.htm'"。

折叠按钮：collapsible。

折叠：collapse，注意，所有的方法都是仅对layout控件起作用，其分区域是panel。

更多属性和方法参见API。

5.1.1.5 示例：分区域，并在不同的区域中加载指定页面。

//easyUI.htm

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>easyUI Test</title>

</head>

<body>

<div data-options="region:'north',title:'northtitle',split:true" style="height:20%">north</div>

<div data-options="region:'south',title:'southtitle',split:true" style="height:200px">south</div>

<divdata-options="region:'center',title:'center title',href:'plugin.htm'">

<div class="test">this iscenter</div>

</div>

</script>

</body>

</html>

//plugin.htm

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>Untitled</title>

</head>

<body>

Hello World!

<h2>This is a pluginHTML.</h2>

</body>

</html>

5.1.2面板：easyui-panel,基本容器，模拟基本窗口。

<div id='panel'class='easyui-panel' title='mypanel' data-options="closable:true,

collapsible:true,minimizable:true,maximizable:true">

this is panel.

<p>panel content</p>

</div>

5.1.2.1 使用面板居中显示：data-options="style:{margin:'0 auto'}"

参考：http://www.jeasyui.com/forum/index.php?topic=2054.0

http://stackoverflow.com/questions/2392563/what-is-the-difference-between-using-aligncenter-and-margin-0-auto-to-cent

</div>

5.1.3选项卡：easyui-tabs,带工具条的选项卡。

方法：定义div为easyui-tabs，子div为tab。

选项卡标题位置：tabPostion:’left’、’top’,’bottom’,’right’。

选项卡的大小：tabWidth,tabHeight。

工具条：设置工具条的内容，在tabs中指定tools为工具条的#id。

参考：http://www.jeasyui.net/demo/561.html

示例：工具条设置

<divid='tabs' class='easyui-tabs' title='mypanel' style="width:100%" data-options="closable:true">

</div>

</div>

$(document).ready(function(){

console.debug("debug");

$('#tabs').tabs({

tools:'#tab-tools'

});

</script>

示例：左侧tab

//easyUITest.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0Transitional//EN"

<html>

<head>

<metacharset="UTF-8">

href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>

<linkrel="stylesheet" type="text/css"

href="easyui/jquery-easyui-1.4.3/themes/icon.css"/>

<linkrel="stylesheet" type="text/css"

href="easyui/jquery-easyui-1.4.3/themes/color.css"/>

<scripttype="text/javascript"

src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>

<scripttype="text/javascript"

src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

<scripttype="text/javascript"

src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

<title>This is a testpage for easyUI</title>

</head>

<body>

</div>

$(document).ready(function() {

});

</script>

</body>

</html>

5.1.4分类卡：easyui-accordin,折叠选项卡。

<div id='acc' class='easyui-accordion'title='myaccordion' style="width:100%"

data-options="iconCls:'icon-save'">

</div>

5.2 窗体和对话框：各种对话框，窗体等。

5.2.1窗体：easyui-window,模拟窗体，可移动等。

<div id='win' class='easyui-window' title='my win' style="width:300px;height:100px"

data-options="iconCls:'icon-save'">

all contents here.

</div>

5.2.2对话框：easyui-dialog,带工具栏和按钮的对话框。

<div id='dlg' class='easyui-dialog' title='my dialog' style="width:300px;height:150px"

data-options="iconCls:'icon-save',resizable:true,modal:true,toolbar:[{

text:'tb1',

iconCls:'icon-edit',

handler:function(){

console.debug('tb1=click.');

}

},{

text:'tb2',

iconCls:'icon-help',

handler:function(){

console.debug('tb2=click.');

}

}],

buttons:[{

text:'btn1',

handler:function(){

console.debug('button1=click.');

}

},{

text:'btn2',

handler:function(){

console.debug('button2=click.');

}

}]

all contents here.

</div>

5.2.3消息对话框：$.messager，各种消息对话框，目标是与用户进行交互。

通知消息：$.messager.show。

警告：$.messager.alert。

确认：$.messager.conform。

信息输入：$.message.prompt。

进度：$.messager.progress。

示例：点击显示消息框，2秒后淡出。

$(document).ready(function(){

console.debug("debug");

$('#cp').click(function(){

$.messager.show({

title:"my show",

msg:"this is show messager",

timeout:2000,

showType:"fade"

})

});

</script>

5.2.4表单：$(‘’).form，ajax提交表单。

5.2.5打开文件：easyui-filebox。

5.3 常用控件：按钮、输入框、下拉框。

5.3.1按钮：easyui-linkbutton,按钮，包括普通按钮，超链接按钮，checkbox,radiobox。

5.3.1.1 按钮：使用超链接按钮easyui-linkbutton,能够使用图标或文字。

只能有一个按钮能够选中：group。

按下和弹起两种状态:toggle。

<a class="easyui-linkbutton"href="plugin.htm">linkbutton</a>

<aclass="easyui-linkbutton" href="#"data-options="toggle:true">check</a>

<aclass="easyui-linkbutton" href="#" data-options="group:'r',toggle:true">r1</a>

<aclass="easyui-linkbutton" href="#"data-options="group:'r',toggle:true">r2</a>

<a class="easyui-linkbutton"

style="width: 80%; height: 40px; margin-top:10px; margin-bottom: 10px;" data-options="toggle:true,group:'cssz'">参数设置</a><br/>

<a class="easyui-linkbutton"

style="width: 80%; height: 40px;margin-bottom: 10px;" data-options="toggle:true,group:'cssz'">报警设置</a><br/>

<a class="easyui-linkbutton"

style="width: 80%; height: 40px;margin-bottom: 10px;" data-options="toggle:true,group:'cssz'">其它设置</a><br/>

5.3.1.2 checkbox:easyui中无此控件，使用标准控件。

获取状态：$(“input:checkbox:[key=value]:状态。

参考：http://www.poluoluo.com/jzxy/201402/261608.html

示例：

//easyuiTest.html

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<linkrel="stylesheet" type="text/css"

href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>

<linkrel="stylesheet" type="text/css"

href="easyui/jquery-easyui-1.4.3/themes/icon.css"/>

<linkrel="stylesheet" type="text/css"

href="easyui/jquery-easyui-1.4.3/themes/color.css"/>

<scripttype="text/javascript"

src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>

<scripttype="text/javascript"

src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

<title>This is a testpage for easyUI</title>

</head>

<body>

<inputtype="checkbox" name="ck" value="1" />a

<inputtype="checkbox" name="ck" value="2" />b

<inputtype="checkbox" name="ck2" value="3" />c

<inputtype="checkbox" name="ck2" value="4" />d

$(document).ready(function() {

console.debug("ready");

$("input:checkbox[name='ck']").click(function(e){

var ck = $("input:checkbox[name='ck']:checked").val();

console.debug(ck);

});

})

</script>

</body>

</html>

5.3.2用户输入框:文本框等用于输入的控件

5.3.2.1 验证框：easyui-validbox,验证用户输入。

5.3.2.2 文本框：easyui-textbox,用户输入框。

可以指定带有按钮。

<inputclass="easyui-textbox" data-options="iconCls:'icon-search'"style="width:100px"></input>

5.3.2.3 数值框：easyui-numberbox,用户输入数字。

5.3.2.4 日期框：easyui-datebox。

5.3.2.5 日期时间框：easyui-datetimebox。

使用input创建。

<inputclass="easyui-datetimebox" data-options=""style="width:150px;"/>

5.3.2.6 日历：easyui-calendar。

5.3.2.7 微调框：easyui-spinner。

5.3.2.8 日期时间微调框：easyui-datetimespinner。

5.3.2.9 时间微调框：easyui-timespinner。

5.3.2.10 数值微调框：easyui-numberspinner。

5.3.3下拉框

5.3.3.1 自定义下拉框：$(‘’).combo(),不能通过标签创建。

5.3.3.2 列表下拉框：easyui-combobox。

静态创建：select填充。

动态创建：input 指定JSON文件的URL。

JSON格式：数组，每个item包含id和text属性。id表示item编号，text为显示内容。

示例：

//html

<input class="easyui-combobox"

style="width:150px"

data-options="validFild:'id',textField:'text',url:'/thbd/pages/BusinessStatistics/datatype.json'"/>

//datetype.json

[

{"id":1,"text":"事故疑点信息"},

{"id":2,"text":"指定行驶速度"},

{"id":3,"text":"累计行驶里程"},

{"id":4,"text":"疲劳驾驶信息"},

{"id":5,"text":"车辆基本信息"},

{"id":6,"text":"驾驶员信息"},

{"id":7,"text":"记录仪脉冲系数"},

{"id":8,"text":"记录仪时间"}

]

5.3.3.3 树形下拉框：easyui-combotree。

5.3.3.4 数据表格下拉框：easyui-combogrid。

5.4 菜单、工具栏：各种格式的菜单和工具栏。

5.4.1菜单：easyui-menu,菜单，包括多级菜单。

菜单创建后是隐藏的，需要显示的调用显示函数使其显示出来。或者将菜单指定为按钮的菜单属性，从而在鼠标移动到按钮时显示菜单项，实现类似菜单的效果（推荐，参见菜单按钮：easyui-menubutoon,模拟菜单栏。）。

示例：自定义显示菜单

<divdata-options="href:'plugin.htm'">menu1

<div>

</div>

$(document).ready(function(){

console.debug("debug");

$('#mm').menu('show',{

left:200,

top:100

});

$('#mm').click(

function(item){

console.debug(item.target.innerText);

}

);

});

</script>

5.4.2菜单按钮：easyui-menubutoon,模拟菜单栏。

鼠标移动到按钮的时显示菜单项。

<divdata-options="iconCls:'icon-save'">menu0</div>

<divdata-options="href:'plugin.htm'">menu1

<div>

</div>

5.4.3菜单分区按钮：easyui-menubutoon,模拟菜单栏。

鼠标移动到按钮的下拉箭头时才显示菜单项，如果移动到文本上不显示菜单项（菜单分为不同的功能区域）。

<divdata-options="href:'plugin.htm'">menu1

<div>

</div>

5.4.4分页导航栏：easyui-pagination，导航条，根据导航页数构建url并刷新显示。

使用div定义。

总数total：总数据量。

单页数量pageSize：每页的大小。

当前页面前后文本beforePageText,afterPageText：显示在当前页面文本框前后。

页面提示信息displayMsg:可以使用from,to,total变量。

示例：

5.4.5搜索框：easyui-searchbox，搜索框，根据用户输入的内容和查找的范围（menu菜单选择）调用查询函数searcher。

目标：根据不同的搜索级别，调用搜索函数搜索用户输入。

原理：设置input为搜索框，绑定一个div为搜索菜单，此菜单为div列表。

流程：设置搜索框，设置搜索菜单，绑定搜索菜单到搜索框。设置搜索函数。

方法：

设置搜索框：设置input的class为easyui-searchbox。

设置搜索菜单：一个div下的div列表。每个子div都需要设置name属性作为搜索范围。

绑定菜单：指定div的id为searchbox的menu属性。

设置搜索函数：设置searcher属性为一个funtion(value,name)。value是输入值，name是菜单的name属性。

示例：

//easyUITest.html

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>

<linkrel="stylesheet" type="text/css"

href="easyui/jquery-easyui-1.4.3/themes/icon.css"/>

<linkrel="stylesheet" type="text/css"

href="easyui/jquery-easyui-1.4.3/themes/color.css"/>

<scripttype="text/javascript"

src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>

<scripttype="text/javascript"

src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

<scripttype="text/javascript"

src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

<title>This is a testpage for easyUI</title>

</head>

<body>

<inputclass="easyui-searchbox"

data-options="searcher:sc,prompt:'input name',menu:'#mm'"></input>

<divid="mm">

<div data-options="name:'all',iconCls:'icon-ok'">allnews</div>

<divdata-options="name:'sports'">sp</div>

</div>

functionsc(value, name) {

console.debug(value);

console.debug(name);

}

</script>

</body>

</html>

5.4.6进度条：easyui-progressbar，进度条，根据进度值（百分数）显示进度。

5.4.7滑动条：easyui-slider。

5.5 树形列表：各种样式的树形列表及其数据操作。

5.5.1树形列表：easyui-tree。

目标：数据以树表列表展示，具有选中状态，折叠、拖拽、异步加载等功能。

原理：ul元素的扩展封装。

流程：创建tree控件，设置样式，设置数据。

方法：

创建tree控件：ul设置class为easyui-tree。

设置样式：整体样式使用ul的dataoptions,单项样式使用json的属性。

设置数据：使用json填充ul（推荐）或直接填充ul的标签。

示例：

//easyUITest.html

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<linkrel="stylesheet" type="text/css"

href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>

<linkrel="stylesheet" type="text/css"

href="easyui/jquery-easyui-1.4.3/themes/icon.css"/>

<linkrel="stylesheet" type="text/css"

href="easyui/jquery-easyui-1.4.3/themes/color.css"/>

<scripttype="text/javascript"

src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>

<scripttype="text/javascript"

src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

<scripttype="text/javascript"

src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

<title>This is a testpage for easyUI</title>

</head>

<body>

<ulid="tt" class="easyui-tree"data-options="checkbox:true,url:'/thbd/pages/BusinessStatistics/tree.json'">

</ul>

</body>

</html>

//tree.json

[{

"id":"tt",

"text":"Root",

"children":[{

"text":"1.1"

},{

"text":"1.2",

"state":"closed",

"children":[{

"text":"1.2.1",

"checked":true

{

"text":"1.2.2"

{

"text":"1.2.3"

}]

5.5.2树形数据列表：easyui-treegrid

5.6 数据表格：各种样式的数据表格及样式、数据操作。

5.6.1数据表格：datagrid。

参见：easyUI-数据表格datagrid.docx

5.6.2属性表格：easyui-propertygrid,datagrid的派生类。

参见：easyUI-数据表格datagrid.docx属性表格部分

6 附件:API文档

API：

7 方法：基本功能

7.1 解析easyUI：$.parse.parse(【’#cc’】)。

7.2 设置easyUI路径：easyloader.base=目录。

7.3 加载easyUI模块：easyloader.loader(‘name’,callbackfun);

7.4 加载脚本：using(‘脚本路径’，callbackfun);

8 方法：基本控件

8.1 可拖动控件：easyui-draggable。

8.2 可放置区域：easyui-droppable。

8.3 可调整大小控件：easyui-resizable。

8.4 鼠标提示控件：easyui-tooltip。

9 方法：扩展功能

包括Ribbon，可编辑的树、表格等。

0 0