esayUI实践的一些体会

时间：2016-09-13 22:25:13 阅读：377 评论：0 收藏：0 [点我收藏+]

标签：

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实践的一些体会

标签：

原文地址：http://www.cnblogs.com/huangf714/p/5869845.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

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

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

3、可折叠菜单 accordion 布局

4、选项卡布局 tabs 布局

主页菜单栏树形菜单生成

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

第一种：标准数据

第二种：简单数据