easyUI學習筆記.doc

esayUI前端開發(fā)： 企業(yè)中java工程師，大多不擅于HTML+CSS 網(wǎng)頁布局設計 ，門戶網(wǎng)站 （由前端工程師設計 ）， 企業(yè)內部應用軟件 （java工程師，選擇前端UI框架 ExtJS 、Flex 、 Easy UI ） - Easy UI 學習成本非常低 easyui 最新版本 1.3.4， bos開發(fā)使用 1.3.2版本 ExtJS 2.x 免費， 3.x 開始收費Easy ui 1.2.3版本開始收費 問題： 為什么你不用ExtJS ? easy ui 學習成本低，很容易在項目中集成使用 ，ExtJS 學習成本高昂 EasyUI+tutorial.CHM 官方demo例子jQuery_EasyUI.doc demo例子EasyUI-API+1.3.2.chm 中文apijquery.EasyUI-1.3.1+API.chm 英文api jquery-easyui-1.3.2.zip 框架開發(fā)包 目錄結構分析demo 示例locale 國際化信息文件 （默認英文提示信息）plugins 框架功能js文件 src 源碼 themes 主題樣式 自帶5套主題， icons 圖標文件 easyloader.js 核心加載器 （加載plugins 功能js）jquery-1.8.0.min.js jquery開發(fā)js文件jquery.easyui.min.js easy ui 框架功能js合集 jquery.easyui.min.js = easyloader.js + plugins/* 1.如何在頁面中使用 easy ui ？ 引入 四個文件 2、 學習使用easy ui 布局功能 layout 布局控件使用 將 body、div 分成東西南北中，五個部分 北部南部西部東部中部注意，只有center區(qū)域的必須的 3、 可折疊菜單 accordion 布局aabb通過 iconCls:icon-help 指定圖標 （必須引入 icon.css文件 ）4、 選項卡布局 tabs 布局closable為true , 選項卡可以被關閉 選項卡一選項卡二選項卡三ztree主頁菜單欄 樹形菜單 生成 樹形結構菜單，通常使用 js 類庫制作的 bos 菜單樹，使用ztree 制作的 1、zTree 是一個依靠 jQuery 實現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點。開發(fā)使用 ztree 3.5 (jquery 插件 )api 文檔css 樣式表demo 案例js 核心類庫 今天目標： 簡單樹兩種方式 （標準數(shù)據(jù) 和 簡單數(shù)據(jù) ）導入 jquery.ztree.all-3.5.js 、 zTreeStyle.css （依賴 img 圖標文件夾）2、在accordion折疊菜單中， 編寫樹形菜單 StandardData 標準樹SimpleData 簡單樹 第一種： 標準數(shù)據(jù) 第一步： 在頁面生成樹 地方，提供 標簽第二步： setting 、數(shù)據(jù)。初始化/ 初始化 標準數(shù)據(jù) 樹/ 1 、settingvar setting = ;/ 2、數(shù)據(jù)var zNodes = name:菜單1, children : name:菜單11, name:菜單12 , name:菜單2 ;/ 3、 生成樹$.fn.zTree.init($(#basicTree), setting, zNodes);第二種： 簡單數(shù)據(jù) 第一步 ：在生成樹位置，提供 標簽 第二步： setting 、數(shù)據(jù)、初始化 / 初始化 簡單數(shù)據(jù) 樹/ 1、settingvar setting = data : simpleData : enable : true / 開啟簡單數(shù)據(jù)模式;/ 2、數(shù)據(jù) var zNodes = / 每個元素 都要有 id 和 pId id:1, pId:0 ,name:菜單1,id:2, pId:0 ,name:菜單2,id:11, pId:1 ,name:菜單11, / 是id為1菜單子節(jié)點id:12, pId:1 ,name:菜單12,id:121, pId:12 ,name:菜單121/ 3、初始化樹$.fn.zTree.init($(#simpleTree), setting, zNodes);為樹上每個節(jié)點，添加點擊事件 var setting = callback : onClick : function(event, treeId, treeNode, clickFlag)alert(點我了！);編寫新增選項卡，和點擊切換代碼 callback : onClick : function(event, treeId, treeNode, clickFlag)/ 點擊菜單，在選項卡 布局中，添加tab / 通過 treeNode 獲得樹節(jié)點數(shù)據(jù)/ 判斷當前選項卡是否存在，如果存在，不添加，切換if($(#mytabs).tabs(exists,treeN)/ 存在 ，切換$(#mytabs).tabs(select,treeN);else/ 不存在$(#mytabs).tabs(add,title : treeN,content : treeN,closable: true);問題： 如何保證每個選項卡 可以單獨刷新 在tabs 選項卡 中嵌入一個 iframe $(#mytabs).tabs(add,title : treeN,content : ,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(nodesi.id);$(#parentIds).val(parentIds.join(,);$(#roleForm).submit(); else easyUI消息提示窗口，使用 easy ui 的messager 控件 $.messager.show 右下角消息框 $.messager.alert 彈出框 $.messager.confirm 確認框 / 退出登錄function logoutFun() $.messager.confirm(系統(tǒng)提示,您確定要退出本次登錄嗎?,function(isConfirm) if (isConfirm) / 退出時，清除Session location.href = $pageContext.request.contextPath /invalidate.jsp; / 清除頁面跳轉Session);$.mpt 輸入框$.gress 進度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 : 系統(tǒng)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);外調函數(shù)function getPanelOptions(id) 返回一個對應的panelsfor ( var i = 0; i panels.length; i+) if (panelsi.id = id) return panelsi;return undefined;function getPortalState() var aa=;for(var columnIndex=0;columnIndex2;columnIndex+) var cc=;var panels=$(#layout_portal_portal).portal(getPanels,columnIndex);for(var i=0;ipanels.length;i+) cc.push(panelsi.attr(id);aa.push(cc.join(,);return aa.join(:);function addPortalPanels(portalState) var columns = portalState.split切割為數(shù)組，兩行(:);for (var columnIndex = 0; columnIndex columns.length; columnIndex+) var cc = columnscolumnIndex.split兩部分，兩列(,);for (var j = 0; j cc.length; j+) var options = getPanelOptions(ccj);if (options) != nullvar p = $().attr(id, options.id).appendTo(body);p.panel(options);$(#layout_portal_portal).portal(add, panel : p,columnIndex : columnIndex);easyUI更換主題第一步：建立div更換皮膚defaultgrayblackbootstrapmetro第二部：替換默認主題地址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 = $iframei;$(ifr).contents()查找匹配元素內部所有的子節(jié)點（包括文本節(jié)點）。如果元素是一個iframe，則查找文檔內容.fin搜索所有與指定表達式匹配的元素。這個函數(shù)是找出正在處理的元素的后代元素的好方法。d(#easyuiTheme).attr(href, href);easyUI彈出窗口修改密碼function editPasswordjs函數(shù)只需要放在javascript標簽里面，$(“#p”).onclick();需要放入$(function()里面初始化加載 );() $(#editPwdWindow).window(open);初始化函數(shù)里面（設置窗口屬性）$(#addStandardWindow).window( title: 添加收派標準, width: 400, modal: true, shadow: true, closed: true, height: 400, resizable:false ); 新密碼： 確認密碼： 確定 取消 js中沒有trim函數(shù)$.trim(txtNewPass)= datagrid數(shù)據(jù)表格第一步：創(chuàng)建div第二部：初始化$(function() / 初始化 datagrid/ 創(chuàng)建grid$(#grid).datagrid(iconCls : icon-forward,fit : true,1. 可在toolbar添加事件函數(shù)：var toolbar = id : button-view,text : 查看,iconCls : icon-search,handler : doView函數(shù)名稱,/定義凍結列/凍結列 就是指定顯示參照列 使其不會出現(xiàn)滾動條var frozenColumns = field : id,顯示字段名稱checkbox : true,是否可選rowspan : 2,不是凍結列小技巧1全選復選框，只會選中當前頁面所有記錄，不會選中其它頁 獲取選中行id / 1、獲得所有選中行 的 id var rows = $(#grid).datagrid(getSelections); / 每行js對象/ 需要將 許多id 一起發(fā)送給我服務器 ，轉換 字符串var ids = ; for(var i=0; irows.length ; i+)ids.push(rowsi.id);/ 將id加入數(shù)組/ 2、將這些id 發(fā)送服務器，服務器根據(jù) id 刪除$.post($pageContext.request.contextPath/standard_delete.action,ids: ids.join(,),function(data);小技巧2：function doDblClickRow(rowIndex, rowData) / rowIndex 行號/ rowData 行數(shù)據(jù) / 將雙擊行數(shù)據(jù)，回顯form表單中 $(#name).val(rowD);/ 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();將參數(shù)轉換為json格式$(#grid).datagrid(load,param);/ 查詢數(shù)據(jù)后，關閉window$(#searchWindow).window(close);$(#searchForm).form(reset););-將form表單轉換成json格式的參數(shù)$.fn.serializeJson=function() var serializeObj=; var array=this.serializeArray(); $(array).each(function() if(serializeO) if($.isArray(serializeO) serializeO.push(this.value); else serializeO=serializeO,this.value; else serializeO=this.value; ); return serializeObj; ;=編輯表格的一行：l function doDblClickRow(rowIndex, rowData) /alert(雙擊表格數(shù)據(jù).);(rowIndex);$(#grid).datagrid(beginEdit, rowIndex);添加雙擊事件，給成員變量賦值：選擇的行號editIndex = rowIndex;var editIndex;行索引值function doAdd() /添加行if (editIndex != undefined) /如果行索引值已經(jīng)賦值，則停止編輯 行$(#grid).datagrid(endEdit, editIndex);if (editIndex = undefined) /如果行索引值未定義則，插入一行/alert(快速添加電子單.);$(#grid).datagrid(insertRow, index : 0,row : );$(#grid).datagrid(beginEdit, 0); /開始編輯editIndex = 0; /重新賦值function doSave() /保存$(#grid).datagrid(endEdit, editIndex); /結束編輯function doCancel() /取消if (editIndex != undefined) $(#grid).datagrid(cancelEdit, editIndex);if (isEmptyObject($(#grid).datagrid(getRows)editIndex) /如果取消編輯行為空，則刪除所在行$(#grid).datagrid(deleteRow, editIndex);editIndex = undefined; /重新賦值，未定義function isEmptyObject(obj) / 遍歷對象 每一個屬性，如果一個屬性都沒有，是空對象 for ( var name in obj) return false;return true;最后經(jīng)過datagrid的初始化框中的出力函數(shù)onAfterEdit : function(rowIndex, rowData, changes) $.post(); 提交數(shù)據(jù)注意，編輯的列需指明可輯屬性var columns = field : id,title : 工作單號,width : 120,align : center,editor : type