easyUI学习笔记

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

3、 可折叠菜单 accordion 布局

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

4、 选项卡布局 tabs 布局

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

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 图标文件夹）

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

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

StandardData 标准树 SimpleData 简单树

第一种： 标准数据

第一步： 在页面生成树 地方，提供

标签

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

// 初始化 标准数据 树

// 1 、setting

var setting = {};

// 2、数据

var zNodes = [ {

name:'菜单1', children : [ {name:'菜单11'}, {name:'菜单12'} ] },

{name:'菜单2'} ];

// 3、 生成树

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

第二种： 简单数据

第一步 ：在生成树位置，提供

标签

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

// 初始化 简单数据 树

// 1、setting var setting = { };

// 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'}, data : {

simpleData : {

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

}

{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); // 不存在

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

}else{

}

}

title : treeNode.name, content : treeNode.name, closable: true

});

}

问题： 如何保证每个选项卡 可以单独刷新 在tabs 选项卡 中嵌入一个 iframe

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

});

title : treeNode.name,

content : \"\",

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 Session } .confirm('系统提示','您确定要退出本次登录吗?',function(isConfirm) { if (isConfirm) { // 退出时，清除Session location.href = '${pageContext.request.contextPath }/invalidate.jsp'; // 清除 } });

$.messager.prompt 输入框 $.messager.progress

进度

easyUI的ext属性portal

第一步，建立两个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) { 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} } } var options = getPanelOptions(cc[j]); if (options) { var p = $('
').attr('id', options.id).appendTo('body'); p.panel(options); $('#layout_portal_portal').portal('add', { panel : p, columnIndex : columnIndex }); } easyUI更换主题
第一步：建立div
更换皮肤
default
gray
black
bootstrap
metro
第二部：替换默认主题地址 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'); if ($iframe.length > 0) { for ( var i = 0; i < $iframe.length; i++) { var ifr = $iframe[i]; $(ifr).contents().find('#easyuiTheme').attr('href', href); } }
}; easyUI弹出窗口
修改密码
function editPassword() { $('#editPwdWindow').window('open'); } 初始化函数里面（设置窗口属性） $('#addStandardWindow').window({ title: '添加收派标准', width: 400, modal: true, shadow: true, closed: true, height: 400, resizable:false });
新密码：
确认密码：
确定 取消
class=\"easyui-linkbutton\" class=\"easyui-linkbutton\" icon=\"icon-ok\" icon=\"icon-cancel\" datagrid数据表格
第一步：创建div
第二部：初始化 $(function() { // 初始化 datagrid // 创建grid $('#grid').datagrid({ iconCls : 'icon-forward', fit : true, 1. 可在toolbar添加事件函数： var toolbar = [ { id : 'button-view', text : '查看', iconCls : 'icon-search', handler : doView }, //定义冻结列 var frozenColumns = [ [ { field : 'id', checkbox : true, rowspan : 2 },
小技巧1 全选复选框，只会选中当前页面所有记录，不会选中其它页 获取选中行id // 1、获得所有选中行 的 id var rows = $(\"#grid\").datagrid('getSelections'); // 每行js对象 // 需要将 许多id 一起发送给我服务器 ，转换 字符串 var ids = []; for(var i=0; i
菜单项一
菜单项二
easyUI的form表单数据校验
$('#save').click(function(){ // 判断表单校验是否通过，如果通过再提交 if($('#form').form('validate')){ // 通过 $('#form').submit(); }else{ $.messager.alert(\"警告\表单存在非法数据，请修正！\ } }); 下拉项，通过ajax从服务器中读取数据，显示 data-options=\"valueField:'id',textField:'name',url:'${pageContext easyUI搜索框searchbox
第一步：搜索框
按到达地查询
按商品查询
js函数 function doSearch(name, value){ $(\"#grid\").datagrid(\"load\ conditionName:value, conditionValue:name }); } 服务器代码：全文搜索
因篇幅问题不能全部显示，请点此查看更多更全内容
查看全文