EasyUI學(xué)習(xí)筆記剖析

EasyUI學(xué)習(xí)筆記1．class="easyui-datagrid" 用于列表展示2．注釋：圖中有標(biāo)有綠色字體的是在圖片中顯示的圖片的樣式，比如添加，刪除，修改，保存，取消。把jqueryeasyui下載好之后，一般引用下頁幾個文件引入樣式 代碼如下:<linkhref="/Resources/easyui/css/default.css"rel="stylesheet"type="text/css"/><linkhref="/Resources/easyui/js/themes/default/easyui.css"rel="stylesheet"type="text/css"/>頁面圖標(biāo)樣式<linkhref="/Resources/easyui/js/themes/icon.css"rel="stylesheet"type="text/css"/><scriptsrc="/Resources/easyui/js/jquery-1.7.2.min.js"type="text/javascript"></script>//jqueryeasyui 主要的js<scriptsrc="/Resources/easyui/js/jquery.easyui.min.js"type="text/javascript"></script>列表展示數(shù)據(jù)代碼如下:<tableid="dg"title="MyUsers"class="easyui-datagrid"style="width:700px;height:250px"url="/GetJson/CreateJson.aspx"toolbar="#toolbar"pagination="true"rownumbers="true"fitcolumns="true"singleselect="true"><thead><tr><thfield="AccountCode"width="50">編號</th><thfield="AccountName"width="50">卡名</th><thfield="AccountPwd"width="50">密碼</th><thfield="CreateTime"width="50">創(chuàng)建時間</th><thfield="CreateName"width="50">創(chuàng)建人</th></tr></thead></table>jqueryeasyui是用datagrid對數(shù)據(jù)進(jìn)行展示的， 所以class要選擇easyui-datagrid；url是本列表的一個 json格式的數(shù)據(jù)來源 toobar后面跟著的"#toobar"是列表的一個工具 欄，本示例在列表上顯示的是添加，修改，刪除功能按鈕對數(shù)據(jù)進(jìn)行操 作。pagination是否顯示分頁，rownumbers顯示行數(shù)，分頁時向后臺傳去兩個參數(shù)，一個就是當(dāng)前頁數(shù)另一個就是每頁顯示行數(shù)；fitcolumns：自適應(yīng)列寬； singleselected:單選。工具條代碼代碼如下:<divid="toolbar"><ahref="javascript:void(0)"class="easyui-linkbutton" iconcls="icon-add"onclick="newuser()"plain="true"> 添加</a><ahref="javascript:void(0)"class="easyui-linkbutton" iconcls="icon-edit "onclick="edituser()"plain="true"> 修改</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconcls="icon-remove" plain="true"> 刪除</a></div>添加彈出框：在添加彈出框內(nèi)容中，有一個 class=”easy-dialog”,這個對話框（dialog）是一個特殊類型的窗口，它在頂部有一個工具欄，在底部有一個按鈕欄。默認(rèn)情況下，對話框（ dialog）只有一個顯示在頭部右側(cè)的關(guān)閉工具。 用戶可以配置對話框行為來顯示其他工具 （比如：可折疊collapsible、可最小化 minimizable、可最大化 maximizable ，等等）。具體參考開發(fā)文檔，如下圖：添加數(shù)據(jù)彈出框代碼如下：數(shù)據(jù)源添加彈出框復(fù)制代碼 代碼如下:<divid="dlg"class="easyui-dialog"style="width:400px;height:280px;padding:10px20px;"closed="true"buttons="#dlg-buttons"><divclass="ftitle">信息編輯</div><form id="fm" method="post"><div class="fitem" ><label>編號</label><inputname="AccountCode"class="easyui-validatebox"required="true"/></div><div class="fitem" ><label>卡號</label><inputname="AccountName"class="easyui-validatebox"required="true"/></div><div class="fitem" ><label>密碼</label><inputname="AccountPwd"class="easyui-validatebox"required="true"/></div><div class="fitem" ><label>創(chuàng)建時間</label><inputname="CreateTime"class="easyui-datebox"required="true"/></div><div class="fitem" ><label>創(chuàng)建人</label><inputname="CreateName"class="easyui-vlidatebox"/></div><inputtype="hidden"name="action"id="hidtype"/><inputtype="hidden"name="ID"id="Nameid"/></form></div>?<divid="dlg-buttons"><ahref="javascript:void(0)"class="easyui-linkbutton"onclick="saveuser()" iconcls="icon-save" >保存</a><ahref="javascript:void(0)"class="easyui-linkbutton"onclick="javascript:$('#dlg').dialog('close')"iconcls="icon-cancel ">取消</a></div>class 為彈出框類型； closed: 當(dāng)前顯示狀態(tài)為隱藏； buttons: 彈出框的功能按鈕；對彈出的添加頁面添加樣式：（ id用#，clas用.）代碼如下:?<styletype="text/css">#fm{margin:0;padding:10px30px;}.ftitle{font-size:14px;font-weight:bold;padding:5px0;margin-bottom:10px;border-bottom:1pxsolid#ccc;}.fitem{margin-bottom:5px;}.fitemlabel{display:inline-block;width:80px;}</style>js實現(xiàn)對數(shù)據(jù)的添加修改刪除代碼如下:<scripttype="text/javascript">varurl;vartype;functionnewuser(){$("#dlg").dialog("open").dialog('setTitle','NewUser');;$("#fm").form("clear");url="UserManage.aspx";document.getElementById("hidtype").value="submit";}functionedituser(){varrow=$("#dg").datagrid("getSelected");if(row){$("#dlg").dialog("open").dialog('setTitle','EditUser');$("#fm").form("load",row);url="UserManage.aspx?id="+row.ID;}}functionsaveuser(){$("#fm").form("submit",{url:url,onsubmit:function(){return$(this).form("validate");},success:function(result){if(result=="1"){$.messager.alert(" 提示信息"," 操作成功");$("#dlg").dialog("close");$("#dg").datagrid("load");}else{$.messager.alert(" 提示信息"," 操作失敗");}}});}functiondestroyUser(){varrow=$('#dg').datagrid('getSelected');if(row){$.messager.confirm('Confirm','Areyousureyouwanttodestroythisuser?',function(r){if(r){$.post('destroy_user.php',{id:row.id},function(result){if(result.success){$('#dg').datagrid('reload');

//reloadtheuserdata}else{$.messager.show({ //showerrormessagetitle:'Error',msg:result.errorMsg});}},'json');}});}}</script>data-options="fit:true"-><bodyclass="easyui-layout" data-options= "fit:true ">-</body>加上data-options= "fit:true "好讓框架能自適應(yīng)瀏覽器窗口。collapsible boolean定義是否顯示折疊按鈕。truedata-options:就是用來定義組件的各種樣式和內(nèi)容，事件的。是 Jqueryeasyui 的panel的屬性，title定義在面板頭部顯示的標(biāo)題文本，collapsible 定義是否顯示可折疊按鈕，cionCls設(shè)置一個 16x16圖標(biāo)的CSS類ID顯示在面板左上角，onOpen 是事件，在打開面板之后觸發(fā)ctrlSelect：在啟用多行選擇的時候允許使用Ctrl鍵+鼠標(biāo)點擊的方式進(jìn)行多選操作。（該屬性自1.3.6版開始可用）HIS（醫(yī)院信息系統(tǒng)）醫(yī)院管理和醫(yī)療活動中進(jìn)行信息管理和聯(lián)機(jī)操作的計算機(jī)應(yīng)用系統(tǒng) ,英文縮寫 HIS.。HIS是覆蓋醫(yī)院所有業(yè)務(wù)和業(yè)務(wù)全工程的信息管理系統(tǒng)。 按照學(xué)術(shù)界公認(rèn)的 MorrisF.Collen所給的定義，應(yīng)該是：利用電子計算機(jī)和通訊設(shè)備，為醫(yī)院所屬各部門提供病人診療信息(PatientCareInformation) 和行政管理信息（ AdministrationInformation) 的收集(Collect)、存儲(Store)、處理(Process)、提取(Retrieve)和數(shù)據(jù)交換(Communicate)的能力并滿足授權(quán)用戶(AuthorizedUsers)的功能需求的平臺。jQueryEasyUIMessager 基本使用2、$.messager.alert(title,msg,icon,fn)1>、基本用法代碼：<htmlxmlns="/1999/xhtml"><headrunat="server">3<title>消息提示框</title>4<linkhref="/jquery-easyui-1.2.4/themes/default/easyui.css"rel="stylesh5<linkhref="/jquery-easyui-1.2.4/themes/icon.css"rel="stylesheet"type6<scriptsrc="/jquery-easyui-1.2.4/jquery-1.6.4.min.js"type="text/javasc7<scriptsrc="/jquery-easyui-1.2.4/jquery.easyui.min.js"type="text/javas8<scriptsrc="/jquery-easyui-1.2.4/locale/easyui-lang-zh_CN.js"type="tex9<scripttype="text/javascript">10$(function(){11$.messager.alert("操作提示","操作成功！");12});13</script></head><body></body></html>效果圖：2>、icon使用icon四種設(shè)置："error"、"info"、"question"、"warning"效果：1<scripttype="text/javascript">2$(function(){3$.messager.alert("操作提示","操作成功！","info");4});5</script>1<scripttype="text/javascript">2$(function(){3$.messager.alert("操作提示","操作失?。?,"error");4});5</script>1<scripttype="text/javascript">2$(function(){3$.messager.alert("操作提示","您確定要執(zhí)行操作嗎！","question");4});5</script>1<scripttype="text/javascript">2$(function(){3$.messager.alert("操作提示","您確定要執(zhí)行操作嗎！","warning");4});5</script>3>、function 使用1<scripttype="text/javascript">2$(function(){3$.messager.alert("操作提示","操作成功！","info",function(){4vari=1;5alert(i);6});7});8</script>2、$.messager.confirm(title,msg,fn)代碼：1<scripttype="text/javascript">2$(function(){3$.messager.confirm("操作提示","您確定要執(zhí)行操作嗎？",function4if(data){5alert("確定");6}7else{8alert("取消");9}10 });11 });12 </script>效果圖：3、$.mpt(title,msg,fn)代碼：1<scripttype="text/javascript">2$(function(){3$.mpt("操作提示","您確定要執(zhí)行操作嗎？",function(d4if(data){5alert(data);6}7});8});9</script>效果圖：4、$.messager.show(options)代碼：<htmlxmlns="/1999/xhtml"><headrunat="server">3<title>消息提示框</title>4<linkhref="/jquery-easyui-1.2.4/themes/default/easyui.css"rel="stylesh5<linkhref="/jquery-easyui-1.2.4/themes/icon.css"rel="stylesheet"type6<scriptsrc="/jquery-easyui-1.2.4/jquery-1.6.4.min.js"type="text/javasc7<scriptsrc="/jquery-easyui-1.2.4/jquery.easyui.min.js"type="text/javas8<scriptsrc="/jquery-easyui-1.2.4/locale/easyui-lang-zh_CN.js"type="tex9<scripttype="text/javascript">10$(function(){11$.messager.show({12title:"操作提示",13msg:"請選擇您要刪除的記錄！",14showType:'slide',15timeout:500016});17});18</script></head><body></body></html>或1<scripttype="text/javascript">2$(function(){3varoptions={4title:"操作提示",5msg:"請選擇您要刪除的記錄！",6showType:'slide',7timeout:50008};9$.messager.show(options);10});11</script>效果圖：showType3 種設(shè)置值:"show" 、"slide" 、"fade"5、修改 Button 顯示文字代碼：1<scripttype="text/javascript">2$(function(){3$.messager.defaults={ok:"是",cancel:"否"};45$.messager.confirm("操作提示","您確定要執(zhí)行操作嗎？",function6if(data){7alert("是");8}9else{10alert("否");11}12});13});14</script>效果圖：6、方法方法名

參數(shù)

描述$.messager.show

options

在屏幕的右下角顯示一個消息窗口。這些選項showType ：定義如何將顯示消息窗口?？捎胹howSpeed ：定義消息窗口完成的時間（以width ：定義消息窗口的寬度。 默認(rèn)值250height ：定義消息窗口的高度。 默認(rèn)值10$.messager.alert title,msg,icon,fn$.messager.confirm title,msg,fn$.mpt title,msg,fn、擴(kuò)展

msg：定義顯示的消息文本。title：定義顯示在標(biāo)題面板顯示的標(biāo)題文本。timeout ：如果定義為 0，消息窗口將不會關(guān)自動關(guān)閉。顯示一個警告窗口。參數(shù)如下：title：顯示在標(biāo)題面板的標(biāo)題文本。msg：提示框顯示的消息文本。icon：提示框顯示的圖標(biāo)?？捎玫闹凳牵篹rfn：當(dāng)窗口關(guān)閉時觸發(fā)的回調(diào)函數(shù)。顯示一個含有確定和取消按鈕的確認(rèn)消息窗口title：顯示在標(biāo)題面板的標(biāo)題文本。msg：確認(rèn)消息窗口顯示的消息文本。fn(b) ：當(dāng)用戶點擊按鈕后觸發(fā)的回調(diào)函數(shù)，顯示一個確定和取消按鈕的信息提示窗口，提t(yī)itle：顯示在標(biāo)題面板的標(biāo)題文本。msg：提示窗口顯示的消息文本。fn(val) ：用戶點擊按鈕后的回調(diào)函，參數(shù)是可以通過$.messager.defaults 方法自定義 alert 框的ok按鈕和cancel 按鈕上顯示的文字。名字 類型 描述 默認(rèn)值ok 字符串 Ok 按鈕上的文本cancel 字符串 Cancel 按鈕上的文本3jQuery選擇器總結(jié)jQuery的選擇器可謂之強(qiáng)大無比，這里簡單地總結(jié)一下常用的元素查找方法3$("#myELement")選擇id值等于myElement的元素，id值不能重復(fù)在文檔中只能有一4$("div")選擇所有的div標(biāo)簽元素，返回div元素數(shù)組5$(".myClass")選擇使用myClass類的css的所有元素6$("*")選擇文檔中的所有的元素，可以運(yùn)用多種的選擇方式進(jìn)行7層疊選擇器：9$("forminput")選擇所有的form元素中的input元素10$("#main>*")選擇id值為main的所有的子元素11$("label+input")選擇所有的label元素的下一個input元素節(jié)點，經(jīng)測試選擇所有input標(biāo)簽元素13$("#prev~div")同胞選擇器，該選擇器返回的為id為prev的標(biāo)簽元素的所14基本過濾選擇器：16$("tr:first")選擇所有tr元素的第一個17$("tr:last")選擇所有tr元素的最后一個18$("input:not(:checked)+span")19過濾掉：checked的選擇器的所有的input元素2122$("tr:even")選擇所有的tr元素的第0，2，4......個元素是從0開始）25$("tr:odd")選擇所有的tr元素的第1，3，5......個元26$("td:eq(2)")選擇所有的td元素中序號為2的那個td元素27$("td:gt(4)")選擇td元素中序號大于4的所有td元素28$("td:ll(4)")選擇td元素中序號小于4的所有的td元素$(":header")$("div:animated")內(nèi)容過濾選擇器：$("div:contains('John')")選擇所有div中含有John文本的元素34$("td:empty")選擇所有的為空（也不包括文本節(jié)點）的td元素的數(shù)35$("div:has(p)")選擇所有含有p標(biāo)簽的div元素36$("td:parent")選擇所有的以td為父節(jié)點的元素數(shù)組可視化過濾選擇器：3839$("div:hidden")選擇所有的被hidden的div元素40$("div:visible")選擇所有的可視化的div元素屬性過濾選擇器：43$("div[id]")選擇所有含有id屬性的div元素44$("input[name='newsletter']")選擇所有的name屬性等于'newsletter'的input元4546$("input[name!='newsletter']")選擇所有的name屬性不等于'newsletter'的input元素47$("input[name^='news']")$("input[name$='news']")$("input[name*='man']")

選擇所有的name屬性以'news'開頭的input選擇所有的name屬性以'news'結(jié)尾的input選擇所有的name屬性包含'news'的input元52 $("input[id][name$='man']") 可以使用多個屬性進(jìn)行聯(lián)合選擇，該選擇器是得到所有53子元素過濾選擇器：55$("ulli:nth-child(2)"),$("ulli:nth-child(odd)"),$("ulli:nth-child(3n+1)")58$("divspan:first-child")返回所有的div元素的第一個子節(jié)點的數(shù)組59$("divspan:last-child")返回所有的div元素的最后一個節(jié)點的數(shù)60$("divbutton:only-child")返回所有的div中只有唯一一個子節(jié)點的所有子61表單元素選擇器：6364$(":input")選擇所有的表單輸入元素，包括input,6566$(":text")選擇所有的textinput元素67$(":password")選擇所有的passwordinput元素68$(":radio")選擇所有的radioinput元素69$(":checkbox")選擇所有的checkboxinput元素70$(":submit")選擇所有的submitinput元素71$(":image")選擇所有的imageinput元素72$(":reset")選擇所有的resetinput元素73$(":button")選擇所有的buttoninput元素74$(":file")選擇所有的fileinput元素75$(":hidden")選擇所有類型為hidden的input元素或表單的76表單元素過濾選擇器：79$(":enabled")選擇所有的可操作的表單元素80$(":disabled")選擇所有的不可操作的表單元素81$(":checked")選擇所有的被checked的表單元素82$("selectoption:selected")選擇所有的select的子元素中被selected的元素83848586選取一個name為”S_03_22″的inputtext框的上一個td的text值$(”input[@name=S_03_22]“).parent().prev().text()名字以”S_”開始，并且不是以”_R”結(jié)尾的$(”input[@name^='S_']“).not(”[@name$='_R']“)一個名為radio_01的radio所選的值93 $(”input[@name=radio_01][@checked] “).val();9495969798$("AB")查找A元素下面的所有子節(jié)點，包括非直接子節(jié)點$("A>B")查找A元素下面的直接子節(jié)點$("A+B")查找A元素后面的兄弟節(jié)點，包括非直接子節(jié)點$("A~B")查找A元素后面的兄弟節(jié)點，不包括非直接子