jquery+easyui培訓文檔
08-10
目 錄1.... Accordion（可摺疊標籤）... 21.1 實例... 21.2 參數... 32.... DateBox（日期框）... 42.1 實例... 42.2 參數... 62.3 事件... 62.4 方法... 63.... ComboBox(組合框) 73.1 實例... 73.2 參數... 93.3 事件... 93.4 方法... 94.... Dialog（對話框）... 104.1 實例... 104.2 參數... 124.3 事件... 124.4 方法... 125.... Messager（提示框）... 125.1 實例... 125.2 方法... 155.3 擴展... 166.... NumberBox（數字框）... 166.1 實例... 166.2 參數... 177.... ValidateBox（驗證框）... 187.1 實例... 187.2 參數... 207.3 方法... 207.4 擴展... 208.... Pagination（分頁）... 208.1 實例... 208.2 參數... 228.3 事件... 239.... Window（窗口）... 239.1 實例... 239.2 參數... 259.3 事件... 269.4 方法... 2610... Panel（面板）... 2610.1 實例... 2610.2 參數... 2810.3 事件... 2910.4 方法... 2911... Tabs（標籤）... 3011.1 實例... 3011.2 參數... 3211.3 事件... 3211.4 方法... 3311.5 標籤面板屬性... 3312... Tree（樹）... 3312.1 實例... 3312.2 參數... 3612.3 事件... 3712.4 方法... 3713... Layout（布局）... 3813.1 實例... 3813.2 參數... 3913.3 方法... 3914... Datagrid（數據表）... 3914.1 實例... 3914.2 參數... 4314.3 Column參數... 4414.4 事件... 4514.5 方法... 46（可摺疊標籤）1.1.1 代碼<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jQuery EasyUI</title><link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../themes/icon.css"><script type="text/javascript" src="../jquery-1.4.2.min.js"></script><script type="text/javascript" src="../jquery.easyui.min.js"></script><script type="text/javascript">$( function() {$("#aa").accordion( {width : 400,height : 200,fit : false});});</script></head><body><div id="aa" border="true" ><div title="Title1" icon="icon-save" style="overflow: auto; padding: 10px;"><h3 style="color: #0099FF;">Accordion for jQuery</h3><p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p></div><div title="Title2" icon="icon-reload" selected="true"style="padding: 10px;">content2</div><div title="Title3">content3</div></div></body></html>1.1.2 效果圖1.1.3 擴展實例html代碼中<div id="aa" border="true" >此行也可寫成<div id="aa" class="easyui-accordion" style="width:300px;height:200px;" fit="false" border="false">，並且將js代碼全部去掉，效果圖是一樣的。1.2.1 容器參數參數名稱參數類型描述默認值width數字可摺疊標籤的寬度。autoheight數字可摺疊標籤的高度。autofit布爾是否使可摺疊標籤自動縮放以適應父容器的大小，當為true時width和height參數將失效。falseborder布爾是否顯示邊界線。true1.2.2 面板參數可摺疊標籤面板繼承自面板（panel）,許多屬性定義在<div />標籤里，下面的屬性就是如此：參數名稱參數類型描述默認值selected布爾設置可摺疊標籤中默認展開的標籤頁false（日期框）2.1.1 代碼<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>jQuery EasyUI</title><link rel="stylesheet" type="text/css"href="../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../themes/icon.css"><script type="text/javascript" src="../jquery-1.4.2.min.js"></script><script type="text/javascript" src="../jquery.easyui.min.js"></script><script>function disable() {$("#dd").datebox("disable");}function enable() {$("#dd").datebox("enable");}/*將Date/String類型,解析為String類型.傳入String類型,則先解析為Date類型不正確的Date,返回 ""如果時間部分為0,則忽略,只返回日期部分.*/function formatDate(v) {if (v instanceof Date) {var y = v.getFullYear();var m = v.getMonth() + 1;var d = v.getDate();var h = v.getHours();var i = v.getMinutes();var s = v.getSeconds();var ms = v.getMilliseconds();if (ms > 0)return y + "-" + m + "-" + d + " " + h + ":" + i + ":" + s+ "." + ms;if (h > 0 || i > 0 || s > 0)return y + "-" + m + "-" + d + " " + h + ":" + i + ":" + s;return y + "-" + m + "-" + d;}return "";}$( function() {$("#dd").datebox( {currentText:"今天",closeText:"關閉",disabled:false,required:true,missingMessage:"必填",formatter:formatDate});});</script></head><body><h1>DateBox</h1><div style="margin-bottom: 10px;"><a href="#" onclick=disable();>disable</a><a href="#" onclick=enable();>enable</a></div><input id="dd"></input></body></html>2.1.2 效果圖屬性名類型描述默認值currentText字元串為當前日期按鈕顯示的文本TodaycloseText字元串關閉按鈕顯示的文本Closedisabled布爾如果為true則禁用輸入框falserequired布爾定義輸入框是否為必添falsemissingMessage字元串當輸入框為空時提示的文本必填formatterfunction格式化日期的函數，這個函數以』date』為參數，並且返回一個字元串——parserfunction分析字元串的函數，這個函數以』date』為參數並返回一個日期——事件名參數描述onSelectdate當選擇一個日期時觸發方法名參數描述destroynone銷毀組件disablenone禁用輸入框.enablenone啟用輸入框組合框)3.1.1 代碼<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>jQuery EasyUI</title><link rel="stylesheet" type="text/css"href="../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../themes/icon.css"><script type="text/javascript" src="../jquery-1.4.2.min.js"></script><script type="text/javascript" src="../jquery.easyui.min.js"></script><script>function loadData(){$("#cc").combobox({url:"combobox_data.json",//該文件內容在下面valueField:"id",textField:"text"});}function setValue(){$("#cc").combobox("setValue","2");}function getValue(){var val = $("#cc").combobox("getValue");alert(val);}function disable(){$("#cc").combobox("disable");}function enable(){$("#cc").combobox("enable");}$( function() {$("#cc").combobox( {width:150,listWidth:150,listHeight:100,//valuefield:"value",//textField:"text",//url:"combobox_data.json",editable:false});});</script></head><body><h1>ComboBox</h1><div style="margin-bottom: 10px;"><a href="#" onclick="loadData()">loadData</a><a href="#" onclick="setValue()">setValue</a> <a href="#"onclick="getValue()">getValue</a> <a href="#" onclick="disable()">disable</a><a href="#" onclick="enable()">enable</a></div><span>Options: </span><select id="cc" name="dept" required="true"><option value="">==請選擇==</option><option value="0">蘋果</option><option value="1">香蕉</option><option value="2">鴨梨</option><option value="3">西瓜</option><option value="4">芒果</option></select></body></html>combobox_data.json內容：[{"id":1,"text":"text1"},{"id":2,"text":"text2"},{"id":3,"text":"text3","selected":true},{"id":4,"text":"text4"},{"id":5,"text":"text5"}]3.1.2 效果圖屬性名類型描述默認值width數字組件的寬度autolistWidth數字下拉列表的寬度nulllistHeight數字下拉列表的高度nullvalueField字元串基礎數據值名稱綁定到這個組合框valuetextField字元串基礎數據的欄位的名稱綁定到這個組合框texteditable布爾定義是否可以直接到文本域中鍵入文本trueurl字元串載入列表數據的遠程URLnull事件名參數描述onLoadSuccessnone當遠程數據成功載入時觸發onLoadErrornone當遠程數據載入失敗時觸發onSelectrecord當用戶選擇了一個列表項時觸發onChangenewValue, oldValue當文本域欄位的值改變時觸發方法名參數描述selectvalue選擇下拉列表中的一項setValueparam設定指定值到文本域，參數可以是一個字元串，也可以是一個Javascript對象，如果是對象，必須包含兩個屬性各對應valueField和TextField屬性。getValuenone獲取欄位值reloadurl請求遠程列表數據.（對話框）4.1.1 代碼<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>jQuery EasyUI</title><link rel="stylesheet" type="text/css"href="../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../themes/icon.css"><script type="text/javascript" src="../jquery-1.4.2.min.js"></script><script type="text/javascript" src="../jquery.easyui.min.js"></script><script>$(function(){$("#dd").dialog({title:"對話框",collapsible:true,minimizable:true,maximizable:true,resizable:true,toolbar:[{text:"Add",iconCls:"icon-add",handler:function(){alert("add");}},"-",{text:"Save",iconCls:"icon-save",handler:function(){alert("save");}}],buttons:[{text:"Ok",iconCls:"icon-ok",handler:function(){alert("ok");}},{text:"Cancel",handler:function(){$("#dd").dialog("close");}}]});});function open1(){$("#dd").dialog("open");}function close1(){$("#dd").dialog("close");}</script></head><body><h1>Dialog</h1><div style="margin-bottom: 10px;"><a href="#" onclick="open1()">open1</a><a href="#" onclick="close1()">close1</a></div><div id="dd" icon="icon-save"style="padding: 5px; width: 400px; height: 200px;"><p>dialog content.</p><p>dialog content.</p><p>dialog content.</p><p>dialog content.</p><p>dialog content.</p><p>dialog content.</p><p>dialog content.</p><p>dialog content.</p></div></body></html>4.1.2 效果圖屬性名類型描述默認值title字元串對話框的標題文本New Dialogcollapsible布爾定義是否顯示可摺疊按鈕falseminimizable布爾定義是否顯示最小化按鈕falsemaximizable布爾定義是否顯示最大化按鈕falseresizable布爾定義對話框是否可編輯大小falsetoolbar數組對話框上的工具條，每個工具條包括:text,iconCls,disabled,handleretc.nullbuttons數組對話框底部的按鈕，每個按鈕包括:text,iconCls,handleretc.nullDialog的事件和窗口(Window)的事件相同。Dialog的函數方法和窗口(Window)的相同。（提示框）5.1.1 代碼<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>jQuery EasyUI</title><link rel="stylesheet" type="text/css"href="../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../themes/icon.css"><script type="text/javascript" src="../jquery-1.4.2.min.js"></script><script type="text/javascript" src="../jquery.easyui.min.js"></script><script>function show1(){$.messager.show({title:"My Title",msg:"Message will be closed after 4 seconds.",showType:"show"});}function show2(){$.messager.show({title:"My Title",msg:"Message will be closed after 5 seconds.",timeout:5000,showType:"slide"});}function show3(){$.messager.show({title:"My Title",msg:"Message never be closed.",timeout:0,showType:"fade"});}function alert1(){$.messager.alert("My Title","Here is a message!");}function alert2(){$.messager.alert("My Title","Here is a error message!","error");}function alert3(){$.messager.alert("My Title","Here is a info message!","info");}function alert4(){$.messager.alert("My Title","Here is a question message!","question");}function alert5(){$.messager.alert("My Title","Here is a warning message!","warning");}function confirm1(){$.messager.confirm("My Title", "Are you confirm this?", function(r){if (r){alert("confirmed:"+r);location.href = "http://www.google.com";}});}function prompt1(){$.messager.prompt("My Title", "Please type something", function(r){if (r){alert("you type:"+r);}});}$(function(){$.messager.defaults={ok:"確定",cancel:"取消"};});</script></head><body><h1>Messager</h1><div><a href="javascript:void(0)" onclick="show1()">show</a> | <ahref="#" onclick="show2()">slide</a> | <a href="#" onclick="show3()">fade</a>|</div><div><a href="#" onclick="alert1()">alert</a> | <a href="#"onclick="alert2()">alert(error)</a> | <a href="#" onclick="alert3()">alert(info)</a>| <a href="#" onclick="alert4()">alert(question)</a> | <a href="#"onclick="alert5()">alert(warning)</a></div><div><a href="#" onclick="confirm1();">confirm</a></div><div><a href="#" onclick="prompt1()">prompt</a></div><div style="height: 600px;"></div></body></html>5.1.2 效果圖方法名參數描述$.messager.showoptions在屏幕的右下角顯示一個消息窗口。這些選項的參數可以是一下的一個配置對象：showType：定義如何將顯示消息窗口。可用的值是：null,slide,fade,show。默認值是slide。showSpeed：定義消息窗口完成的時間（以毫秒為單位）， 默認值600。width：定義消息窗口的寬度。 默認值250。height：定義消息窗口的高度。 默認值100。msg：定義顯示的消息文本。title：定義顯示在標題面板顯示的標題文本。timeout：如果定義為0，消息窗口將不會關閉，除非用戶關閉它。如果定義為非0值，當超時後消息窗口將自動關閉。$.messager.alerttitle, msg, icon, fn顯示一個警告窗口。參數如下：title：顯示在標題面板的標題文本。msg：提示框顯示的消息文本。icon：提示框顯示的圖標。可用的值是：error,question,info,warning.fn：當窗口關閉時觸發的回調函數。$.messager.confirmtitle, msg, fn顯示一個含有確定和取消按鈕的確認消息窗口。參數如下：title：顯示在標題面板的標題文本。msg：確認消息窗口顯示的消息文本。fn(b)：當用戶點擊按鈕後觸發的回調函數，如果點擊OK則給回調函數傳true,如果點擊cancel則傳false。$.messager.prompttitle, msg, fn顯示一個確定和取消按鈕的信息提示窗口，提示用戶輸入一些文本。參數如下：title：顯示在標題面板的標題文本。msg：提示窗口顯示的消息文本。fn(val)：用戶點擊按鈕後的回調函，參數是用戶輸入的內容。可以通過$.messager.defaults方法自定義alert框的ok按鈕和cancel按鈕上顯示的文字。名字類型描述默認值ok字元串Ok按鈕上的文本Okcancel字元串Cancel按鈕上的文本Cancel（數字框）6.1.1 代碼<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jQuery EasyUI</title><link rel="stylesheet" type="text/css"href="../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../themes/icon.css"><script type="text/javascript" src="../jquery-1.4.2.min.js"></script><script type="text/javascript" src="../jquery.easyui.min.js"></script><script>function disable(){$("#nn").numberbox("disable");}function enable(){$("#nn").numberbox("enable");}$(function(){$("#nn").numberbox({min:5.5,max:20,precision:2});});</script></head><body><h1>NumberBox</h1><p>The Box can only input number.</p><div style="margin-bottom: 10px;"><a href="#" onclick="disable()">disable</a><a href="#" onclick="enable()">enable</a></div><input id="nn" required="true" /></body></html>6.1.2 效果圖選項名類型描述默認值min數字文本框中可允許的最小值nullmax數字文本框中可允許的最大值nullprecision數字最高可精確到小數點後幾位0（驗證框）7.1.1 代碼<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>jQuery EasyUI</title><link rel="stylesheet" type="text/css"href="../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../themes/icon.css"><style type="text/css">input,textarea {width: 200px;border: 1px solid #ccc;padding: 2px;}</style><script type="text/javascript" src="../jquery-1.4.2.min.js"></script><script type="text/javascript" src="../jquery.easyui.min.js"></script><script>function valid(){alert($("#dfe").validatebox("isValid"));}$(function(){$.extend($.fn.validatebox.defaults.rules, {minLength: {validator: function(value, param){return value.length >= param[0];},message: "Please enter at least {0} characters."}});});</script></head><body><h1>ValidateBox <a href="#0" onclick="valid();">EmailisValid</a></h1><div><table><tr><td>Name:</td><td><input class="easyui-validatebox" required="true"validType="length[1,3]"></td></tr><tr><td>Email:</td><td><input id="dfe" class="easyui-validatebox"invalidMessage="email格式錯誤" validType="email"></td></tr><tr><td>URL:</td><td><input class="easyui-validatebox" required="true"validType="url"></td></tr><tr><td>testr:</td><td><input class="easyui-validatebox" validType="minLength[5]"invalidMessage="至少5個字元"></td></tr><tr><td>Note:</td><td><textarea class="easyui-validatebox" required="true"missingMessage="必填" style="height: 100px;"></textarea></td></tr></table></div></body></html>7.1.2 效果圖屬性名類型描述默認值required布爾定義文本域是否為必填項falsevalidType字元串定義欄位的驗證類型url（匹配電子郵件正則表達式規則）, email（匹配URL正則表達式規則），length[0,100]（允許字元串長度的範圍）etc.nullmissingMessage字元串當文本框為空時提示的文本信息This field is required.invalidMessage字元串當文本框內容不合法時提示的文本信息null方法名參數描述destroynone刪除並且銷毀組件validatenone做驗證以確定文本框的內容是否是有效的。isValidnone調用驗證方法並返回驗證結果，true或者false當然也可以自定義驗證規則，重寫$.fn.validatebox.defaults.rules 可以定義一個校驗器的功能和無效的顯示消息。例如，要定義一個minLength有效的類型：$.extend($.fn.validatebox.defaults.rules, {minLength: {validator: function(value, param){return value.length >= param[0];},message: "Please enter at least {0} characters."}});定義好以後我們就可以使用了，下面的代碼表示輸入的最小長度是5個字元：<input class="easyui-validatebox" validType="minLength[5]">（分頁）8.1.1 代碼<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>jQuery EasyUI</title><link rel="stylesheet" type="text/css"href="../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../themes/icon.css"><script type="text/javascript" src="../jquery-1.4.2.min.js"></script><script type="text/javascript" src="../jquery.easyui.min.js"></script><script>$(function(){$("#pp").pagination({total:114,pageSize:15,pageNumber:2,pageList:[10,15,20,30,50,100],loading:false,showPageList:true,showRefresh:true,beforePageText:"第",afterPageText:"頁，共{pages}頁",displayMsg:"{from}-{to}/{total}",buttons:[{iconCls:"icon-add",handler:function(){alert("add");}},{iconCls:"icon-cut",handler:function(){alert("cut");}},{iconCls:"icon-save",handler:function(){alert("save");}}],onSelectPage:function(pageNumber, pageSize){$(this).pagination("loading");alert("pageNumber:"+pageNumber+",pageSize:"+pageSize);$(this).pagination("loaded");}});});</script></head><body><h1>Pagination</h1><div style="margin: 10px 0;"><a href="#"onclick="javascript:$("#pp").pagination({loading:false})">loaded</a> <ahref="#" onclick="javascript:$("#pp").pagination({loading:true})">loading</a></div><div id="pp"style="width: 500px; background: #efefef; border: 1px solid #ccc;"></div></body></html>8.1.2 效果圖屬性名類型描述默認值total數字當分頁建立時設置記錄的總數量1pageSize數字每一頁顯示的數量10pageNumber數字當分頁建立時，顯示的頁數1pageList數組用戶可以修改每一頁的大小，pageList屬性定義了多少種大小可以改變.[10,20,30,50]loading布爾定義數據是否正在載入falsebuttons數組定義自定義按鈕，每個按鈕包含兩個屬性：iconCls: 顯示背景圖像的CSS類handler: 當一個按鈕被點擊時的處理函數nullshowPageList布爾定義是否顯示頁面列表trueshowRefresh布爾定義是否顯示刷新按鈕truebeforePageText字元串在輸入框組件前顯示的標籤PageafterPageText字元串在輸入框組件後顯示的標籤Of {pages}displayMsg字元串顯示一個頁面的信息。Displaying {from} {to} of {total} items事件名參數描述onSelectPagepageNumber, pageSize當用戶選擇一個新頁時觸發，回調函數包含兩個參數：pageNumber: 新頁面的頁數pageSize: 新頁面的大小onBeforeRefreshageNumber, pageSize刷新按鈕被點擊之前觸發，如果返回false則取消刷新操作onRefreshageNumber, pageSize刷新以後觸發onChangePageSizeageSize改變頁面大小時觸發（窗口）窗口的主要用法和面板（panel）用法差不多9.1.1 代碼<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html style="height:100%;width:100%;"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><link rel="stylesheet" type="text/css"href="../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../themes/icon.css"><script type="text/javascript" src="../jquery-1.4.2.min.js"></script><script type="text/javascript" src="../jquery.easyui.min.js"></script><script>function resize(){$("#w").window({title: "yewen2",width: 600,collapsible:false,minimizable:false,maximizable:false,closable:false,closed: false,height: 300,draggable:false,resizable:false,shadow:false,modal:true});}function open1(){$("#w").window("open");}function close1(){$("#w").window("close");}function test(){$("#test").window("open");}</script></head><body style="height: 100%; width: 100%; overflow: hidden; border: none;"><h1>Window</h1><div><a href="javascript:void(0)" onclick="resize()">resize</a> <ahref="javascript:void(0)" onclick="open1()">open</a> <ahref="javascript:void(0)" onclick="close1()">close</a></div><div id="w" class="easyui-window" title="My Window" icon="icon-save"style="width: 500px; height: 200px; padding: 5px; background: #fafafa;"><div class="easyui-layout" fit="true"><div region="center" border="false"style="padding: 10px; background: #fff; border: 1px solid #ccc;">jQuery EasyUI framework help you build your web page easily. <br /><br />click <a href="#" onclick="test()">here</a> to popup another window.</div><div region="south" border="false"style="text- align: right; height: 30px; line-height: 30px;"><aclass="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)"onclick="resize()">Ok</a> <a class="easyui-linkbutton"icon="icon-cancel" href="javascript:void(0)" onclick="resize()">Cancel</a></div></div></div><div id="test" class="easyui-window" closed="true" modal="true"title="Test Window" style="width: 300px; height: 100px;"></div></body></html>9.1.2 效果圖大多數的屬性和面板(panel)的屬性是相同的，下面列出一些Window私有的屬性：屬性名類型描述默認值zIndex數字窗口的z-index屬性，可以通過這個屬性來增加9000draggable布爾定義窗口是否可被拖動trueresizable布爾定義窗口是否可以被改變大小trueshadow布爾如果設置為true，窗口的陰影也將顯示。truemodal布爾定義窗口是否是一個模式窗口。falseWindow也重寫了Panel里的一些屬性屬性名類型描述默認值title字元串窗口的標題文本New Windowcollapsible布爾定義是否顯示可摺疊定義按鈕trueminimizable布爾定義是否顯示最小化按鈕truemaximizable布爾定義是否顯示最大化按鈕trueclosable布爾定義是否顯示關閉按鈕trueWindow的事件和面板(panel)的事件相同除了」header」和」body」以外，Window的函數方法和面板(panel)的相同（面板）10.1.1 代碼<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jQuery EasyUI</title><link rel="stylesheet" type="text/css"href="../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../themes/icon.css"><script type="text/javascript" src="../jquery-1.4.2.min.js"></script><script type="text/javascript" src="../jquery.easyui.min.js"></script><script>function open1(){$("#p").panel("open");}function close1(){$("#p").panel("close");}function load1(){$("#p").panel({href:"tabs_href_test.html"});$("#p").panel("open");}</script></head><body style="background: #fafafa;"><h1>Panel</h1><div style="margin-bottom: 10px;"><a href="#" onclick="open1()">open</a><a href="#" onclick="close1()">close</a> <a href="#" onclick="load1()">load</a></div><divstyle="width: 600px; height: 300px; border: 1px solid red; padding: 5px;"><div id="p" class="easyui-panel" title="My Title" icon="icon-save"collapsible="true" minimizable="true" maximizable=true closable="true"style="width: 500px; height: 150px; padding: 10px; background: #fafafa;"><p>panel</p><p>panel</p><p>panel</p><p>panel</p><p>panel</p><p>panel</p><p>panel</p><p>panel</p><p>panel</p><p>panel</p><p>panel</p><p>panel</p></div></div></body></html>10.1.2 效果圖名字類型描述默認值title字元串在面板頭部顯示的標題文本nulliconCls字元串一個CSS類來顯示在面板中的16x16圖標nullwidth數字設置面板的寬度autoheight數字設置面板的高度autoleft數字設置面板左側位置nulltop數字設置面板的頂部位置nullcls字元串給面板添加一個CSS類nullheaderCls字元串給面板頭部添加一個CSS類nullbodyCls字元串給面板主體添加一個CSS類nullstyle對象給面板自定義樣式{}fit布爾當設置為true，面板尺寸將適合它的父容器。falseborder布爾定義面板的邊框truedoSize布爾當設置為true，面板載創建的時候將被調整和重新布局truecollapsible布爾定義是否顯示可摺疊定義按鈕falseminimizable布爾定義是否顯示最小化按鈕falsemaximizable布爾定義是否顯示最大化按鈕falseclosable布爾定義是否顯示關閉按鈕falsetools數組自定義工具，每個工具可以包含兩個屬性：iconCls and handler[]collapsed布爾定義在初始化的時候摺疊面板falseminimized布爾定義在初始化的時候最小化面板falsemaximized布爾定義在初始化的時候最大化面板falseclosed布爾定義在初始化的時候關閉面板falsehref字元串一個遠程的URL載入數據，然後顯示在面板中nullloadingMessage字元串當載入遠程數據時，在面板中顯示的信息Loading…名字參數描述onLoadnone當遠程數據載入時觸發onBeforeOpennone當面板打開之前觸發onOpennone當面板打開之後觸發onBeforeClosenone當面板關閉之前觸發onClosenone當面板關閉之後觸發onBeforeDestroynone當面板銷毀之前觸發onDestroynone當面板關閉之後觸發onBeforeCollpasenone當面板摺疊之前觸發onCollapsenone當面板摺疊之後觸發onBeforeExpandnone當面板展開之前觸發onExpandnone當面板展開之後觸發onResizewidth, height當面板調整大小之後觸發width: 新的寬度;height: 新的高度onMoveleft,top當面板移動之後觸發left: 新的左側位置top: 新的頂部位置onMaximizenone當窗口最大化的時候被觸發onRestorenone當窗口恢復到原來的大小時被觸發onMinimizenone當窗口最小化的時候被觸發名字參數描述optionsnone返回設置的屬性值panelnone返回面板對象headernone返回面板頭部對象bodynone返回面板主體對象setTitletitle設置面板頭部標題openforceOpen當forceOpen設置為true，面板被打開的時候忽略onBeforeOpen回調函數closeforceClose當forceClose設置為true，面板被關閉的時候忽略onBeforeClose回調函數destroyforceDestroy當forceDestroy設置為true，面板被銷毀的時候忽略onBeforeDestroy回調函數refreshnone當設置了href值時，刷新面板來載入遠程數據resizeoptions設置面板的大小和布局，這些選項包含以下的屬性：width: 新面板的寬度; height: 新面板的高度; left: 新面板的左側位置; top: 新面板的頂部位置moveoptions移動面板到一個新的位置，這些選項包含以下屬性: left: 新面板的左側位置;top: 新面板的頂部位置（標籤）11.1.1 代碼<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jQuery EasyUI</title><link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../themes/icon.css"><script type="text/javascript" src="../jquery-1.4.2.min.js"></script><script type="text/javascript" src="../jquery.easyui.min.js"></script><script>var index = 0;function addTab(){index++;$("#tt").tabs("add",{title:"New Tab " + index,content:"Tab Body " + index,closable:true});}</script></head><body><h1>Tabs</h1><div><a class="easyui-linkbutton" icon="icon-add" href="javascript:void(0)" onclick="addTab()">add tab</a></div><br/><div id="tt" class="easyui-tabs" style="width:500px;height:250px;"><div title="Tab1" style="padding:20px;display:none;"></div><div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;" cache="false" href="tabs_href_test.html"> This is Tab2 width closebutton.</div><div title="Tab3" icon="icon-reload" closable="true" style="padding:20px;display:none;"><table id="test" class="easyui-datagrid" fit="true"><thead><tr><th field="f1" width_="60">field1</th><th field="f2" width_="60">field2</th><th field="f3" width_="60">field3</th></tr></thead><tbody><tr><td>d1</td><td>d2</td><td>d3</td></tr><tr><td>d11</td><td>d21</td><td>d31</td></tr></tbody></table></div><div title="Tab4 with iframe" closable="true" style="width:100%;height:100%;display:none;"><iframe scrolling="yes" frameborder="0" src="https://www.getit01.com/getimg_360.php?url=http://www.google.com" style="width:100%;height:100%;"></iframe></div><div title="Tab5 with sub tabs" closable="true" icon="icon-cut" style="padding:10px;display:none;"><div class="easyui-tabs" fit="true" plain="true" style="height:100px;width:300px;"><div title="Title1">Content 1</div><div title="Title2">Content 2</div><div title="Title3">Content 3</div></div></div></div></body></html>11.1.2 效果圖參數名參數描述默認值width數字標籤容器的寬度autoheight數字標籤容器的高度autoidSeed數字The base id seed to generate tab panel』s DOM id attribute.0plain布爾如果為ture標籤沒有背景圖片falsefit布爾如果為ture則設置標籤的大小以適應它的容器的父容器falseborder布爾如果為true則顯示標籤容器的邊框truescrollIncrement數字滾動按鈕每次被按下時滾動的像素值100scrollDuration數字每次滾動持續的毫秒數400事件名參數描述onLoadarguments當一個AJAX標籤載入遠程數據完成時被觸發，參數和jQuery.ajax成功返回的回調函數相同onSelecttitle當用戶選擇一個標籤面板時被觸發onClosetitle當用戶關閉一個標籤面板時被觸發方法名參數描述resizenone調整標籤容器的大小和布局addoptions添加新標籤面板，可選參數是一個配置對象，詳細信息可以查看下面的標籤面板屬性closetitle關閉一個標籤面板，標題參數表明被關閉的面板selecttitle選擇一個標籤面板existstitle指示特定的標籤是否存在屬性名類型描述默認值id字元串標籤面板的ID屬性nulltitle字元串標籤面板的文本標題content字元串標籤面板的主體內容href字元串填充標籤內容的遠程URL地址nullcache布爾如果為true，當設置href時，對標籤面板進行緩存trueicon字元串標籤面板上標題的圖標CSS類nullclosable布爾如果為true，標籤面板會顯示出關閉按鈕，點擊可以關閉選項卡面板。falseselected布爾如果為true，標籤標籤面板將被選中falsewidth數字標籤面板的寬度autoheight數字標籤面板的高度auto（樹）12.1.1 代碼<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jQuery EasyUI</title><link rel="stylesheet" type="text/css"href="../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../themes/icon.css"><script type="text/javascript" src="../jquery-1.4.2.min.js"></script><script type="text/javascript" src="../jquery.easyui.min.js"></script><script type="text/javascript">$(function(){$("#tt1").tree({animate:true,onClick:function(node){alert("you click "+node.text);}});$("#tt2").tree({checkbox: true,url: "tree_data.json",onClick:function(node){alert("you click "+node.text);}});});function reload(){$("#tt2").tree("reload");}function getChecked(){var nodes = $("#tt2").tree("getChecked");var s = "";for(var i=0; i<nodes.length; i++){if (s != "") s += ",";s += nodes[i].text;}alert(s);}function getSelected(){var node = $("#tt2").tree("getSelected");alert(node.text);}function collapse(){var node = $("#tt2").tree("getSelected");$("#tt2").tree("collapse",node.target);}function expand(){var node = $("#tt2").tree("getSelected");$("#tt2").tree("expand",node.target);}function append(){var node = $("#tt2").tree("getSelected");$("#tt2").tree("append",{parent: node.target,data:[{text:"new1"},{text:"new2",state:"closed",children:[{text:"subnew1"},{text:"subnew2"}]}]});}function remove(){var node = $("#tt2").tree("getSelected");$("#tt2").tree("remove", node.target);}function isLeaf(){var node = $("#tt2").tree("getSelected");var b = $("#tt2").tree("isLeaf", node.target);alert(b)}</script></head><body><h1>Tree</h1><p>Create from HTML markup</p><ul id="tt1" class="easyui-tree"><li><span>Folder</span><ul><li><span>Sub Folder 1</span><ul><li><span><a href="#">File 11</a></span></li><li><span>File 12</span></li><li><span>File 13</span></li></ul></li><li><span>File 2</span></li><li><span>File 3</span></li></ul></li><li><span>File21</span></li></ul><hr></hr><p>Create from JSON data</p><div style="margin: 10px;"><a href="#" onclick="reload()">reload</a><a href="#" onclick="getChecked()">getChecked</a> <a href="#"onclick="getSelected()">getSelected</a> <a href="#"onclick="collapse()">collapse</a> <a href="#" onclick="expand()">expand</a><a href="#" onclick="append()">append</a> <a href="#" onclick="remove()">remove</a><a href="#" onclick="isLeaf()">isLeaf</a></div><ul id="tt2"></ul></body></html>12.1.2 效果圖選項名類型描述默認值url字元串一個網址retrive遠程數據。nullanimate布爾當節點展開或摺疊是否顯示動畫效果。falsecheckbox布爾是否帶複選框False事件名參數描述onClicknode用戶點擊一個節點時觸發。，該節點參數包含以下屬性：id:節點IDtext:節點的文本attributes:節點自定義屬性target:點擊DOM對象的目標onDblClicknode用戶雙擊一個節點時觸發，參數同onclick事件onLoadSuccessarguments載入數據成功時觸發，參數arguments類似jQuery.ajax.的success函數onLoadErrorarguments載入數據成功時觸發，參數arguments類似jQuery.ajax.的error函數方法名參數描述optionsnone返回樹的所有參數對象loadDatadata載入樹的數據reloadnone重新載入樹的數據getRootnone返回樹的root節點getRootsnone返回樹的所有root節點getParenttarget返回某個節點的父節點getChildrentarget返回某個節點的孩子節點getCheckednone獲取被勾選的節點getSelectednone獲取選中的節點，並返回它，如果沒有節點選擇返回null。isLeaftarget判斷某個節點是否葉子節點selecttarget選擇一個節點，目標參數表明該節點的DOM對象。collapsetarget摺疊節點，目標參數表明該節點的DOM對象。expandtarget展開一個節點，目標參數表明該節點的DOM對象。collapseAllnone摺疊所有節點expandAllnone展開所有節點appendparam一些子節點追加到父節點。參數有兩個屬性：parent: DOM對象，父節點追加。data:數組，節點數據。toggletarget綁定某個節點的展開或者摺疊狀態，使之不能再改變。removetarget刪除一個節點和它的子節點，目標參數表明該節點的DOM對象。updateparam更新指定的節點，參數param包含如下屬性：Target：目標節點；id,text,iconCls,checked,etc.（布局）此例最外層寫在了body上，也可以寫在某個div上。13.1.1 代碼<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jQuery EasyUI</title><link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"><script type="text/javascript" src="../jquery-1.4.2.min.js"></script><script type="text/javascript" src="../jquery.easyui.min.js"></script><script>$(function(){var p = $("body").layout("panel","west").panel({onCollapse:function(){alert("collapse");}});setTimeout(function(){$("body").layout("collapse","east");},0);});</script></head><body class="easyui-layout"><div region="north" border="false" style="height:60px;background:#B3DFDA;">north region</div><div region="west" split="true" title="West" style="width:150px;padding:10px;">west content</div><div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div><div region="south" border="false" style="height:50px;background:#A9FACD;padding:10px;">south region</div><div region="center" title="Main Title"></div></body></html>13.1.2 效果圖所有屬性都必須定義在布局面板創建的<div/>標記上。名稱類型描述默認值title字元串布局面板的標題文本nullregion字元串定義布局面板的位置，該值是下列之一: north, south, east, west, center.border布爾如果為ture則顯示布局面板的邊框truesplit布爾如果為ture則顯示分隔欄，用戶可以用它來改變布局面板的大小falseicon字元串在面板頭部顯示圖標的CSSnullhref字元串從遠程地址載入數據的URLnull方法名參數描述panelregion返回某個方位的面板，參數region取值可以是：north,south,east,west,centercollapseregion收縮某個方位的面板，參數region取值可以是：north,south,east,westexpandregion展開某個方位的面板，參數region取值可以是：north,south,east,west（數據表）14.1.1 代碼<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jQuery EasyUI</title><link rel="stylesheet" type="text/css"href="../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../themes/icon.css"><script type="text/javascript" src="../jquery-1.4.2.min.js"></script><script type="text/javascript" src="../jquery.easyui.min.js"></script><script>$(function(){$("#test").datagrid({title:"My Title",iconCls:"icon-save",width:800,height:450,nowrap: true,striped: true,url:"datagrid_data.json",sortName: "code",sortOrder: "desc",idField:"code",frozenColumns:[[{field:"ck",checkbox:true},{title:"code",field:"code",width:80,sortable:true}]],columns:[[{title:"Base Information",colspan:3},{field:"opt",title:"Operation",width:100,align:"center", rowspan:2,formatter:function(value,rec){return "<span style="color:red">Edit Delete</span>";}}],[{field:"name",title:"Name",width:120},{field:"addr",title:"Address",width:120,rowspan:2,sortable:true},{field:"col4",title:"Col41",width:150,rowspan:2}]],pagination:true,rownumbers:true,singleSelect:true,toolbar:[{text:"Add",iconCls:"icon-add",handler:function(){alert("add")}},{text:"Cut",iconCls:"icon-cut",disabled:true,handler:function(){alert("cut")}},"-",{text:"Save",iconCls:"icon-save",handler:function(){alert("save")}}]});var p = $("#test").datagrid("getPager");if (p){$(p).pagination({onBeforeRefresh:function(){alert("before refresh");}});}});function resize(){$("#test").datagrid({title: "New Title",striped: true,width: 650,queryParams:{p:"param test",name:"My Name"}});}function getSelected(){var selected = $("#test").datagrid("getSelected");alert(selected.code+":"+selected.name);}function getSelections(){var ids = [];var rows = $("#test").datagrid("getSelections");for(var i=0;i<rows.length;i++){ids.push(rows[i].code);}alert(ids.join(":"))}function clearSelections(){$("#test").datagrid("clearSelections");}function selectRow(){$("#test").datagrid("selectRow",2);}function selectRecord(){$("#test").datagrid("selectRecord","002");}function unselectRow(){$("#test").datagrid("unselectRow",2);}</script></head><body><h1>DataGrid</h1><div style="margin-bottom: 10px;"><a href="#" onclick="resize()">resize</a><a href="#" onclick="getSelected()">getSelected</a> <a href="#"onclick="getSelections()">getSelections</a> <a href="#"onclick="clearSelections()">clearSelections</a> <a href="#"onclick="selectRow()">selectRow</a> <a href="#"onclick="selectRecord()">selectRecord</a> <a href="#"onclick="unselectRow()">unselectRow</a></div><table id="test"></table></body></html>14.1.2 效果圖NameTypeDescriptionDefaulttitle字元串標題文字nulliconCls字元串一個css類，將提供一個背景圖片作為標題圖標nullborder布爾是否顯示面板的邊界。truewidth數字表格的寬度autoheight數字表格的高度autocolumns數組表格的列的配置對象，詳見下面column屬性介紹。nullfrozenColumns數組與columns屬性相通，但這些列將固定在左側，不得變動。nullstriped布爾是否顯示斑馬線falsemethod字元串遠程數據的獲取類型，可取值為post或getpostnowrap布爾是否在一行顯示數據trueidField字元串指定哪些欄位時標識欄位nullurl字元串從遠程請求數據的地址nullloadMsg字元串當遠程載入數據時，現實的等待信息提示Processing, please wait …pagination布爾是否顯示底部分頁工具欄falserownumbers布爾是否顯示行號列falsesingleSelect布爾是否允許只選擇一行falsefit布爾是否允許表格自動縮放，以適應父容器falsepageNumber數字初始化頁碼1pageSize數字初始化頁面大小10pageList數組初始化頁面大小選擇清單[10,20,30,40,50]queryParams對象當請求遠程數據時，發送的額外的參數{}sortName字元串定義哪一列可以排序nullsortOrder字元串定義列排序的方式，遞增（asc）或遞減（desc）asceditors對象定義當編輯某行數據時的編輯器predefined editors參數NameTypeDescriptionDefaulttitle字元串列標題文字undefinedfield字元串列欄位名稱undefinedwidth數字列寬度undefinedrowspan數字該列占幾行單元格undefinedcolspan數字該列占幾列單元格undefinedalign字元串數據對其方式，可選值有left,right,centerundefinedsortable布爾是否允許該列排序undefinedcheckbox布爾是否顯示選擇框undefinedformatter函數包含三個參數：value: the field value.rowData: the row record datarowIndex: the row index.undefinededitorstring,objectIndicate the edit type. When string indicates the edit type, when object contains two properties:type: string, the edit type, possible type is: text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree.options: object, the editor options corresponding to the edit type.undefinedNameParametersDescriptiononLoadSuccessdata遠程數據載入成功時觸發onLoadErrornone遠程數據載入失敗時觸發onBeforeLoaddata請求發出去，載入數據前觸發。如果返回false，載入數據動作則退出onClickRowrowIndex, rowData當用戶點擊某行時觸發, the parameters contains:rowIndex: the clicked row index, start with 0rowData: the record corresponding to the clicked rowonDblClickRowrowIndex, rowData當用戶雙擊某行時觸發, the parameters contains:rowIndex: the clicked row index, start with 0rowData: the record corresponding to the clicked rowonSortColumnsort, order當用戶排序某列時觸發, the parameters contains:sort: the sort column field nameorder: the sort column orderonSelectrowIndex, rowData當用戶選擇某行時觸發, the parameters contains:rowIndex: the selected row index, start with 0rowData: the record corresponding to the selected rowonUnselectrowIndex, rowData當用戶取消選擇某行時觸發, the parameters contains:rowIndex: the unselected row index, start with 0rowData: the record corresponding to the unselected rowonBeforeEditrowIndex, rowData當用戶開始編輯某行時觸發, the parameters contains:rowIndex: the editing row index, start with 0rowData: the record corresponding to the editing rowonAfterEditrowIndex, rowData, changes當用戶完成編輯某行時觸發, the parameters contains:rowIndex: the editing row index, start with 0rowData: the record corresponding to the editing rowchanges: the changed field/value pairsonCancelEditrowIndex, rowData當用戶退出編輯某行時觸發, the parameters contains:rowIndex: the editing row index, start with 0rowData: the record corresponding to the editing rowNameParameterDescriptionoptionsnone返回所有參數的對象getPagernone返回分頁對象resizenone調整表格大小reloadparam重新載入行fixColumnSizenone固定列的大小loadDataparam載入本地數據，舊行將被刪除getDatanone返回已載入的數據getRowsnone返回當前頁的行數getSelectednone返回第一次選擇的行記錄getSelectionsnone返回所有選定行，如果沒選擇記錄，則返回空數組clearSelectionsnone取消所有選擇selectAllnone選擇當前頁所有行selectRowindex選擇某行，行索引以0開始selectRecordidValue通過id值選擇一行unselectRowindex取消選擇某行beginEditindex開始編輯某行endEditindex結束編輯某行cancelEditindex退出編輯某行refreshRowindex刷新一行的數據appendRowrow添加新行deleteRowindex刪除一行getChangestypeGet changed rows since the last commit. The type parameter indicate which type changed rows, possible value is: inserted,deleted,updated,etc. When the type parameter is not assigned, return all changed rows.acceptChangesnoneCommits all the changes data since it was loaded or since the last time acceptChanges was called.rejectChangesnoneRolls back all the changes data since it was created, or since the last time acceptChanges was called.
推薦閱讀：
你的讚賞是我堅持原創的動力
讚賞共 0 人讚賞推薦閱讀：