1.如何在页面中使用 easy ui ？

引入四个文件

src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>

2、学习使用easy ui 布局功能

layout 布局控件使用

将 body、div 分成东西南北中，五个部分

</body>

注意，只有center区域的必须的

3、可折叠菜单 accordion 布局

</div>

通过 iconCls:'icon-help' 指定图标（必须引入 icon.css文件）

4、选项卡布局 tabs 布局

closable为true , 选项卡可以被关闭

</div>

ztree

主页菜单栏树形菜单生成

树形结构菜单，通常使用 js 类库制作的

bos 菜单树，使用ztree 制作的

1、zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

开发使用 ztree 3.5 (jquery 插件 )

api 文档

css 样式表

demo 案例

js 核心类库

今天目标：简单树两种方式（标准数据和简单数据）

导入 jquery.ztree.all-3.5.js 、 zTreeStyle.css （依赖 img 图标文件夹）

src="${pageContext.request.contextPath}/js/easyui/jquery-1.8.3.js"></script>

type="text/css" href="${pageContext.request.contextPath}/js/ztree/zTreeStyle.css">

src="${pageContext.request.contextPath}/js/ztree/jquery.ztree.all-3.5.js"></script>

2、在accordion折叠菜单中，编写树形菜单

StandardData 标准树

SimpleData 简单树

第一种：标准数据

第一步：在页面生成树地方，提供 <ul> 标签

第二步： setting 、数据。初始化

// 初始化标准数据树

// 1 、setting

var setting = {};

// 2、数据

var zNodes = [

{

name:'菜单1',

children : [

{name:'菜单11'},

{name:'菜单12'}

]

{name:'菜单2'}

];

// 3、生成树

$.fn.zTree.init($("#basicTree"), setting, zNodes);

第二种：简单数据

第一步：在生成树位置，提供 <ul>标签

第二步： setting 、数据、初始化

// 初始化简单数据树

// 1、setting

var setting = {

data : {

simpleData : {

enable : true // 开启简单数据模式

}

};

// 2、数据

var zNodes = [ // 每个元素都要有 id 和 pId

{id:1, pId:0 ,name:'菜单1'},

{id:2, pId:0 ,name:'菜单2'},

{id:11, pId:1 ,name:'菜单11'}, // 是id为1菜单子节点

{id:12, pId:1 ,name:'菜单12'},

{id:121, pId:12 ,name:'菜单121'}

]

// 3、初始化树

$.fn.zTree.init($("#simpleTree"), setting, zNodes);

为树上每个节点，添加点击事件

var setting = {

callback : {

onClick : function(event, treeId, treeNode, clickFlag){

alert("点我了！！！");

}

};

编写新增选项卡，和点击切换代码

callback : {

onClick : function(event, treeId, treeNode, clickFlag){

// 点击菜单，在选项卡布局中，添加tab

// 通过 treeNode 获得树节点数据

// 判断当前选项卡是否存在，如果存在，不添加，切换

if($("#mytabs").tabs('exists',treeNode.name)){

// 存在，切换

$("#mytabs").tabs('select',treeNode.name);

}else{

// 不存在

$("#mytabs").tabs('add',{

title : treeNode.name,

content : treeNode.name,

closable: true

});

}

问题：如何保证每个选项卡可以单独刷新

在tabs 选项卡中嵌入一个 iframe

$("#mytabs").tabs('add',{

title : treeNode.name,

content : "<iframe src='http://www.baidu.com' style='width:100%;height:100%;border:0;'></iframe>",

closable: true

});

ztree提交checkbox信息技巧：

if ($("#roleForm").form('validate')) {

var treeObj = $.fn.zTree.getZTreeObj("functionTree");

var nodes = treeObj.getCheckedNodes(true);

var parentIds=[];

for ( var i = 0; i < nodes.length; i++) {

parentIds.push(nodes[i].id);

}

$("#parentIds").val(parentIds.join(","));

$("#roleForm").submit();

} else {

}

easyUI

消息提示窗口，使用 easy ui 的messager 控件

$.messager.show 右下角消息框

$.messager.alert 弹出框

$.messager.confirm 确认框

// 退出登录

function logoutFun() {

$.messager

.confirm('系统提示','您确定要退出本次登录吗?',function(isConfirm) {

if (isConfirm) {

// 退出时，清除Session

location.href = '${pageContext.request.contextPath }/invalidate.jsp'; // 清除[w1] Session

}

});

}

$.messager.prompt 输入框

$.messager.progress 进度

easyUI的ext属性portal

第一步，建立两个div

</div>

第二部

panels = [ {

id : 'p1',

title : '公共栏',

height : 255,

collapsible : true,

href:'page_portal_gonggao.action'

}, {

id : 'p2',

title : '代办事宜',

height : 255,

collapsible : true,

href:'page_portal_daiban.action'

}, {

id : 'p3',

title : '预警信息',

height : 255,

collapsible : true,

href:'page_portal_yujing.action'

}, {

id : 'p4',

title : '系统BUG反馈',

height : 255,

collapsible : true,

href:'page_portal_bug.action'

}];

$('#layout_portal_portal').portal({

border : false,

fit : true

});

var state = state = 'p1,p2:p3,p4';/*冒号代表列，逗号代表行*/

addPortalPanels(state);

$('#layout_portal_portal').portal('resize');

外调函数

function getPanelOptions(id) {[w2]

for ( var i = 0; i < panels.length; i++) {

if (panels[i].id == id) {

return panels[i];

}

return undefined;

}

function getPortalState() {

var aa=[];

for(var columnIndex=0;columnIndex<2;columnIndex++) {

var cc=[];

var panels=$('#layout_portal_portal').portal('getPanels',columnIndex);

for(var i=0;i<panels.length;i++) {

cc.push(panels[i].attr('id'));

}

aa.push(cc.join(','));

}

return aa.join(':');

}

function addPortalPanels(portalState) {

var columns = portalState.split[w3] (':');

for (var columnIndex = 0; columnIndex < columns.length; columnIndex++) {

var cc = columns[columnIndex].split[w4] (',');

for (var j = 0; j < cc.length; j++) {

var options = getPanelOptions(cc[j]);

if (options) {[w5]

var p = $('<div/>').attr('id', options.id).appendTo('body');

p.panel(options);

$('#layout_portal_portal').portal('add', {

panel : p,

columnIndex : columnIndex

});

}

easyUI更换主题

第一步：建立div

<a href="javascript:void(0);" class="easyui-menubutton"

data-options="menu:'#layout_north_pfMenu',iconCls:'icon-ok'">更换皮肤</a>

</div>

<div onclick="changeTheme('default');">default</div>

<div onclick="changeTheme('black');">black</div>

<div onclick="changeTheme('bootstrap');">bootstrap</div>

<div onclick="changeTheme('metro');">metro</div>

</div>

第二部：替换默认主题地址

changeTheme = function(themeName) {

var $easyuiTheme = $('#easyuiTheme');

var url = $easyuiTheme.attr('href');

var href = url.substring(0, url.indexOf('themes')) + 'themes/'

+ themeName + '/easyui.css';

$easyuiTheme.attr('href', href);

var $iframe = $('iframe');[w6]

if ($iframe.length > 0) {

for ( var i = 0; i < $iframe.length; i++) {

var ifr = $iframe[i];

$(ifr).contents()[w7] .fin[w8] d('#easyuiTheme').attr('href', href);

}

};

easyUI弹出窗口

function editPassword[w9] () {

$('#editPwdWindow').window('open');

}

初始化函数里面（设置窗口属性）

$('#addStandardWindow').window({

title: '添加收派标准',

width: 400,

modal: true,

shadow: true,

closed: true,

height: 400,

resizable:false

});

<div id="editPwdWindow" class="easyui-window" title="修改密码" collapsible="false" minimizable="false"

maximizable="false" icon="icon-save" style="width: 300px; height: 150px; padding: 5px;

background: #fafafa">

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</div>

</div>[w10]

</div>

datagrid数据表格

第一步：创建div

</div>

第二部：初始化

$(function() {

// 初始化 datagrid

// 创建grid

$('#grid').datagrid({

iconCls : 'icon-forward',

fit : true,

可在toolbar添加事件函数：

var toolbar = [ {

id : 'button-view',

text : '查看',

iconCls : 'icon-search',

handler : doView[w11]

//定义冻结列[w12]

var frozenColumns = [ [ {

field : 'id',[w13]

checkbox : true,[w14]

rowspan : 2

[w15]

小技巧1

全选复选框，只会选中当前页面所有记录，不会选中其它页

获取选中行id

// 1、获得所有选中行的 id

var rows = $("#grid").datagrid('getSelections'); // 每行js对象

// 需要将许多id 一起发送给我服务器，转换字符串

var ids = [];

for(var i=0; i<rows.length ; i++){

ids.push(rows[i].id);// 将id加入数组

}

// 2、将这些id 发送服务器，服务器根据 id 删除

$.post("${pageContext.request.contextPath}/standard_delete.action",{ids: ids.join(",")},function(data){

});

小技巧2：

function doDblClickRow(rowIndex, rowData){

// rowIndex 行号

// rowData 行数据

// 将双击行数据，回显form表单中

$('#name').val(rowData.name);

// numberbox 不能直接用val 回显

$('#minweight').numberbox('setValue', rowData.minweight);

// 隐藏id

$('#standardId').val(rowData.id);

// 弹出窗口

$('#addStandardWindow').window('open');

}

-----------------------------------------------------------------------------------------------------------------

小技巧3：

// 重置form

$('#standardForm').form('reset');

// 对form 添加离焦事件

$('#standardForm *').trigger('blur');

// 刷新表格

$('#grid').datagrid('reload');

小技巧4：将条件传入重新加载查询

$("#btn").click(function() {

var param = $('#searchForm').serializeJson();[w16]

$('#grid').datagrid('load',param);

// 查询数据后，关闭window

$('#searchWindow').window('close');

$('#searchForm').form('reset');

});

----------------------------------------------------------------------------------------------------------------

将form表单转换成json格式的参数

$.fn.serializeJson=function(){

var serializeObj={};

var array=this.serializeArray();

$(array).each(function(){

if(serializeObj[this.name]){

if($.isArray(serializeObj[this.name])){

serializeObj[this.name].push(this.value);

}else{

serializeObj[this.name]=[serializeObj[this.name],this.value];

}

}else{

serializeObj[this.name]=this.value;

}

});

return serializeObj;

};

==================================================================

编辑表格的一行：

l function doDblClickRow(rowIndex, rowData) {

//alert("双击表格数据...");

console.info(rowIndex);

$('#grid').datagrid('beginEdit', rowIndex);[w17]

editIndex = rowIndex;

}

var editIndex;[w18]

function doAdd() { //添加行

if (editIndex != undefined) { //[w19]

$("#grid").datagrid('endEdit', editIndex);

}

if (editIndex == undefined) { //[w20]

//alert("快速添加电子单...");

$("#grid").datagrid('insertRow', {

index : 0,

row : {}

});

$("#grid").datagrid('beginEdit', 0); //[w21]

editIndex = 0; //[w22]

}

function doSave() { //保存

$("#grid").datagrid('endEdit', editIndex); //[w23]

}

function doCancel() { //取消

if (editIndex != undefined) {

$("#grid").datagrid('cancelEdit', editIndex);

if (isEmptyObject($("#grid").datagrid('getRows')[editIndex])) { //[w24]

$("#grid").datagrid('deleteRow', editIndex);

}

editIndex = undefined; //[w25]

}

function isEmptyObject(obj) {

// 遍历对象每一个属性，如果一个属性都没有，是空对象

for ( var name in obj) {

return false;

}

return true;

}

最后经过datagrid的初始化框中的出力函数onAfterEdit : function(rowIndex, rowData, changes) { $.post(); 提交数据

注意，编辑的列需指明可辑属性

var columns = [ [ {

field : 'id',

title : '工作单号',

width : 120,

align : 'center',

editor : {

type : 'validatebox', //[w26]

options : {

required : true //[w27]

}

}, {

技巧：添加鼠标右键菜单

1.初始化表格datagrid内：

onRowContextMenu : function(e, rowIndex, rowData) { //[w28]

e.preventDefault();//[w29]

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

left : e.pageX, // 鼠标当前横坐标

top : e.pageY

// 鼠标当前纵坐标

});

$("#showUserId").val(rowData.id);

$("#showUserName").html(rowData.username);

}

鼠标右键菜单项

</div>

easyUI的form表单数据校验

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

// 判断表单校验是否通过，如果通过再提交

if($('#form').form('validate')){

// 通过

$('#form').submit();

}else{

$.messager.alert("警告","表单存在非法数据，请修正！","warning");

}

});

下拉项，通过ajax从服务器中读取数据，显示

easyUI搜索框searchbox

第一步：搜索框

<input id="ss" class="easyui-searchbox" style="width:300px"

data-options="menu:'#menu',prompt:'请输入您的查询内容',searcher:doSearch" />[w32]

<div data-options="name:'arrivecity'">按到达地查询</div>

<div data-options="name:'product'">按商品查询</div>

</div>

js函数

function doSearch(name, value){

$("#grid").datagrid("load",{

conditionName:value,

conditionValue:name

[w33] });

}

服务器代码：全文搜索

[w1]页面跳转

[w2]返回一个对应的panels

[w3]切割为数组，两行

[w4]两部分，两列

[w5] != null

[w6]各种框架主题替换

[w7]查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容

[w8]搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

[w9]js函数只需要放在javascript标签里面，

$(“#p”).onclick();需要放入$(function(){

里面初始化加载

}

);

[w10]js中没有trim函数

$.trim(txtNewPass)==""

[w11]函数名称

 [w12]//冻结列 就是指定显示参照列 使其不会出现滚动条

[w13]显示字段名称

[w14]是否可选

[w15]不是冻结列

[w16]将参数转换为json格式

[w17]添加双击事件，给成员变量赋值：选择的行号

[w18]行索引值

[w19]如果行索引值已经赋值，则停止编辑行

[w20]如果行索引值未定义则，插入一行

[w21]开始编辑

[w22]重新赋值

[w23]结束编辑

[w24]如果取消编辑行为空，则删除所在行

[w25]重新赋值，未定义

[w26]text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree.

[w27]为输入框类型，定制一些属性

如果行编辑时候，存在validatebox 校验效果，如果不满足校验，无法进行endEdit 事件

[w28]e 事件对象， rowIndex 行号 , rowData 行数据

[w29]阻止默认事件执行

[w30]值

[w31]显示项

[w32]

menu 指定搜索选项

prompt 默认提示内容

searcher 点击搜索时，执行js函数

[w33]json格式参数传入，重新加载

esayUI实践的一些体会的更多相关文章

GTD实践2周年后一些体会
从2011年7月1日算起,实践GTD已经有2年多了,在GTD一周年时写了<用iPhone打造GTD实践1周年的心得体会>这篇文章,随着实践的深入,如今又有了一些新的认识,2013年初制定的 ...
Exp3免杀原理与实践 20164312 马孝涛
1.实验要求 1.1 正确使用msf编码器(0.5分),msfvenom生成如jar之类的其他文件(0.5分),veil-evasion(0.5分),加壳工具(0.5分),使用shellcode编 ...
Exp3 免杀原理与实践
一.实验过程 1.编码器 (1)使用msf编码器,直接生成meterpreter可执行文件(跟Exp2中生成backdoor.exe的过程一样,生成后门文件),送到Virscan.VirusTotal ...
2018-2019-2 网络对抗技术 20165206 Exp3 免杀原理与实践
- 2018-2019-2 网络对抗技术 20165206 Exp3 免杀原理与实践 - 实验任务 1 正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion,自己 ...
2018-2019-2 网络对抗技术 20165328 Exp3 免杀原理与实践
一.实验要求: . 实践内容(.5分) .5分),msfvenom生成如jar之类的其他文件(.5分),veil-evasion(.5分),加壳工具(.5分),使用shellcode编程(1分) .5 ...
2018-2019-2 网络对抗技术 20165323 Exp3 免杀原理与实践
一.实践内容 1.1 正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion,加壳工具,使用shellcode编程 1.2 通过组合应用各种技术实现恶意代码免杀 ( ...
2018-2019-2 网络对抗技术 20165319 Exp3 免杀原理与实践
免杀原理及基础问题回答免杀原理: 免杀指的是一种能使病毒木马免于被杀毒软件查杀的技术.由于免杀技术的涉猎面非常广,其中包含反汇编.逆向工程.系统漏洞等黑客技术,所以难度很高,一般人不会或没能力接触这 ...
2018-2019-3 网络对抗技术 20165235 Exp3 免杀原理与实践
2018-2019-3 网络对抗技术 20165235 Exp3 免杀原理与实践基础问题回答杀软是如何检测出恶意代码的? 1.对某个文件的特征码进行分析,(特征码就是一类恶意文件中经常出现的一段代 ...
网络对抗技术 20165220 Exp3 免杀原理与实践
实验任务 1 正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion,自己利用shellcode编程等免杀工具或技巧: 2 通过组合应用各种技术实现恶意代码免杀(1 ...

随机推荐

mvc中Action前HttpPost的作用
本文导读:在ASP.NET MVC框架中,为了限制某个action只接受HttpPost的请求,对于HttpGet的请求则提示404找不到页面,可以在action的方法前面加上[HttpPost]属性 ...
RMAN兼容性列表
Target/Auxiliary Database RMAN Executable Catalog Database Catalog Schema 8.1.7.4 8.1.7.4 >=8.1.7 ...
C#模拟PrtScn实现截屏
有了之前的基础知识了解,如今開始实现PrtScn和Alt+PrtScn. 首先新建一个WPF应用程序,命名为PrintscreenAndAltPrintScreen 导入keybd_event方法: ...
background-image:url(data:image/gif;base64,XXXX) base64方式将本地图片添加到文档中
background-image:url(data:image/gif;base64,R0lGODlhCwAMAMZjAElxvlNvtVRxtkp1v0p9wVh7vkqBwl58vml6vml7v ...
mysql-5.7 group commit 详解
一.mysql group commit 的官方定义: InnoDB, like any other ACID-compliant database engine, flushes the redo ...
Spring MVC简单的HelloWorld例子
1.web.xml配置(主要配置Servlet)[默认情况 Spring的配置文件在WEB-INF的<servlet-name>-servlet.xml] <?xml version ...
Hadoop: Setup Maven project for MapReduce in 5mn
Hadoop: Setup Maven project for MapReduce in 5mn 25 MAY 2013 / ANTOINE AMEND I am sure I am not the ...
iptables的地址取反操作
感叹号要写在-d的前面才行,而且要用空格隔开. iptables -A OUTPUT -o eth0 -p tcp ! -d xxx.xxx.xxx.xxx -j DROP
Correlation and Regression
Correlation and Regression Sample Covariance The covariance between two random variables is a statis ...
NGUI UIPanel绘制原理学习
NGUI底层绘制都是调用UIDrawCall来完成的,它会动态实例化出材质球,改变UV偏移和缩放(图集显示).并且全部是面片 UIPanel也是面片,但是内部物体遮罩比较特殊,经过查找发现,影响UIP ...

esayUI实践的一些体会

1.如何在页面中使用 easy ui ？

2、 学习使用easy ui 布局功能

3、 可折叠菜单 accordion 布局

4、 选项卡布局 tabs 布局

ztree

主页菜单栏 树形菜单 生成

2、在accordion折叠菜单中， 编写树形菜单

第一种： 标准数据

第二种： 简单数据

easyUI

消息提示窗口，使用 easy ui 的messager 控件

easyUI的ext属性portal

easyUI更换主题

easyUI弹出窗口

datagrid数据表格

easyUI的form表单数据校验

easyUI搜索框searchbox

esayUI实践的一些体会的更多相关文章

随机推荐

热门专题

2、学习使用easy ui 布局功能

3、可折叠菜单 accordion 布局

4、选项卡布局 tabs 布局

主页菜单栏树形菜单生成

2、在accordion折叠菜单中，编写树形菜单

第一种：标准数据

第二种：简单数据