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 οnclick="changeTheme('default');">default</div>

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

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

<div οnclick="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实践的一些体会相关推荐

mysql实践周心得_实践周心得体会4篇
实践周心得体会4篇实践周心得体会1 艺术实践周就这么匆匆过去了,刚开始的时候还有些不适应,还没从十一长假的休闲娱乐中缓过劲来的时候,艺术实践周就那么如火如荼的展开了,那时候忽然就那么忙起来了,讲座. ...
mysql实践周心得_实践周心得体会
实践周心得体会实践周心得体会(一) 这次的人任务是拍片,分别要求是一个新闻片一个专题片.我们组只有5个人,分别是,高X 冯XX 陈XX 金X 和我,可以说人尽其用. 我们很早就讨论策划方案,并在网上 ...
大学生python心得1000字_大学生社会实践报告心得体会范文1000字（精选4篇）
大学生社会实践报告心得体会范文1000字(精选4篇) 紧张而又充实的社会实践结束了,大家这段时间一定收获不少吧!为此需要认真地写实践报告了.你知道写实践报告需要注意哪些问题吗?下面是小编收集整理的大学 ...
mysql实践周心得_实践周心得体会范文
实践周心得体会范文当我们经过反思,对生活有了新的看法时,有这样的时机,要好好记录下来,这样能够让人头脑更加清醒,目标更加明确.相信许多人会觉得心得体会很难写吧,下面是小编帮大家整理的实践周心得体会范 ...
Matlab实践课心得体会,实验心得体会4篇
实践是检验真理唯一的标准,当想要检验自己的所学时一需要做实验来检验.下面是由出国留学网小编为大家整理的"实验心得体会四篇",仅供参考,欢迎大家阅读. 篇一:实验心得体会大学数学实 ...
linux实践感悟与体会100字,掌上综素b5学科时间活动心得体会50字
掌上综素b5学科时间活动心得体会50字通用版是一款很不错的学科教育平台,为大家准备的教育类的资讯非常全面,在平台中的相关课程非常多,各类课程资源都可以找到! 掌上综素b5学科时间活动心得体会50字通用 ...
计算机设计应用实践体会,信息技术教学实践应用心得体会
第1篇:信息技术应用心得体会通过这学期的网上研修学习,使我进一步了解了信息技术这一门科目.在各个工作领域中,每个职业都离不开信息技术.随着计算机.多媒体.现代通讯网络为代表的信息技术的迅猛发展,信息 ...
Matlab实践课心得体会,学习matlab的一点心得体会
1.前言 2.matlab的一些特点 3.学习matlab心得体会 4.matlab的一些资源 1.前言我接触Matlab的时间比较长了,最开始是在大学里面的数学实验课上了解了一些,学了些基础的命令 ...
学科实践活动感悟50字_初中学科实践活动心得体会50字
教案通常又叫课时计划,包括时间.方法.步骤.检查以及教材的组织等.那么教师是怎么设计教案的呢?下面是小编分享给大家的初中数学实践活动教案的资料,希望大家喜欢!初中数学实践活动教案一教学目标1.会通过列 ...
matlab实践总结与体会,MatLab实习心得体会
MatLab实习心得体会我从中国石油大学(北京)来到大庆油田勘探开发研究院实习,刚刚来到这里时我内心充满了激动和喜悦,对这个有着辉煌成绩的科研单位充满了期待.到了这里没多久我就参加培训中心组织的入院 ...

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实践的一些体会相关推荐

最新文章

热门文章

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折叠菜单中，编写树形菜单

第一种：标准数据

第二种：简单数据