easyui笔记
1、入門
1.1. 簡介
封裝大量的jQuery插件(簡化ajax，jquery，css樣式，布局)
- 學習內容
- 學習方法
1.2. 環境搭建
- 資源文件介紹
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-qBrpBa8n-1632141642930)(https://static01.imgkr.com/temp/3f4fcc3d9c494f198775fe7e96f12dc0.png)]
- 搭建環境的步驟
2、第一個插件
2.1. linkbutton 按鈕
-
標準開發步驟
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-aUbZeKF5-1632141642933)(https://static01.imgkr.com/temp/687f11eb007745feb430d14fa6c17a61.png)]
2.2. 代碼模板
- 實現方式1
HTML標簽+樣式
- 實現方式2
HTML標簽+編程插件方法
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-RHjYi8dC-1632141642937)(https://static01.imgkr.com/temp/b4d4186900b54112b90b4d3e70b740c2.png)]
實例：
<!-- HTML標簽 + esyui-樣式 --><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',size:'large',onClick:testEvent">黃浩</a><!-- HTML標簽+ easyui 插件方法 --><a style="color:green;" id="btn1" href="#">王惠凱</a><script>//使用easyui按鈕插件$("#btn1").linkbutton({onClick:function(){//alert("王惠凱，被點了。");//調用改變大小的resize方法。$("#btn1").linkbutton('resize',{width:300,height:100});}});function testEvent(){alert("我被點了!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");//調用按鈕的 disable方法。//$("按鈕").linkbutton('disable');$("a:first").linkbutton('disable');}</script>2.3. EasyUI插件核心模板
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-lVymOgOi-1632141642938)(https://static01.imgkr.com/temp/8f5c0292ac1d49ec89114181a0406b44.png)]
- 屬性
-
事件
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-bisbGFoJ-1632141642939)(https://static01.imgkr.com/temp/29d031bfc3024f7795e9c6d2e2461206.png)]
- 方法
3、基本插件庫
3.1. Panel面板
- 效果
- 代碼
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-zmPz4hv4-1632141642940)(https://static01.imgkr.com/temp/d2adc234d8a540b6a4dbe4ffa5d9bc5b.png)]
實例：
<!-- 標簽div+easyui-panel --><div class="easyui-panel" data-options="title:'我是標題',iconCls:'icon-man'">路征信</div><hr /><!-- 準備按鈕 --><div id="tt"><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'"></a></div><!-- div+panel() --><div id="p1">劉遠遠遠遠遠遠遠遠遠遠遠遠遠遠遠遠遠遠，來啦老弟。</div><script>/* 生效一個panel插件 */$("#p1").panel({title:"玉龍標題",//標題iconCls:"icon-man",//標題圖標width:600,//寬度 400height:300,//高度 300closable:true,//顯示關閉按鈕maximizable:true,//最大化按鈕tools:'#tt',//引用按鈕組href:"${pageContext.request.contextPath}/index.jsp",//引用遠程頁面,寫目標頁面的URI});</script>[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-i8ovG1BY-1632141642941)(https://static01.imgkr.com/temp/5afacd4213294a5ea346ab3ba06d7e17.png)]
3.2. window面板
- 代碼
實例：
<!-- 定義按鈕組 --><div id="tt1"><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'"></a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'"></a></div><a href="#" class="easyui-linkbutton">我是一個按鈕</a><!-- div + window() --><div id="d1">常帥宇</div><script>/* window窗口*/$("#d1").window({title : "新聞",iconCls : "icon-man",width : 300,height : 400,href : "${pageContext.request.contextPath}/index.jsp",modal : true,//燈罩效果draggable : false,//是否可拖拽tools:'#tt1'});</script>3.3. dialog對話框
- 代碼
實例：
<!-- 定義按鈕組 --><div id="tt1"><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'"></a><a href="#" class="easyui-linkbutton"data-options="iconCls:'icon-save'"></a></div><!-- 底部按鈕組 --><div id="tt2"><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-man',onClick:login">登錄</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">取消</a></div><a href="#" class="easyui-linkbutton">我是一個按鈕</a><!-- div + window() --><div id="d1"><!-- 登錄表單 --><form action="#"><fieldset><legend>登錄</legend><table align="center"><tr><td>用戶名</td><td><input type="text" name="username" id="username" /></td></tr><tr><td>密碼</td><td><input type="text" name="password" id="password" /></td></tr></table></fieldset></form></div><script>/* dialog對話框*/$("#d1").dialog({iconCls:"icon-man",//圖標width:400,//寬度//height:400,//高度title:'用戶登錄',//標題modal:true,//toolbar:'#tt1',//對話框上部，工具欄位置,綁定一個按鈕組buttons:'#tt2',//在對話框底部，綁定按鈕組});</script>3.4. messager消息框
- 代碼
實例：
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok',onClick:test1">測試消息框</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save',onClick:test2">測試提示框</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-man',onClick:test3">測試確認框</a><script>/**展示一個消息框*/function test1(){$.messager.show({title:'操作提示',showSpeed:3000,//顯示過渡的事件。timeout:3000,//顯示后ting停留事件。showType:'fade',//修改顯示消失的過場效果msg:"您的余額已經不足，請求及時沖腦子!",});}/**警告框，提示框*/function test2(){$.messager.alert({msg:"您的余額不足了!",//消息提示文字title:'標題',//標題icon:'error',//提示框圖標，'error' 'info' 'question' 'warning'fn:function(){//窗口關閉后，調用的函數,只有點擊確定按鈕.//窗口關閉了console.log("窗口關閉了");}});}/**顯示一個確認框*/function test3(){$.messager.confirm({title:'警告',//標題msg:'真的要分手嗎?',//提示文字fn:function(r){//用戶選擇確定或者取消后，調用函數console.log(r);if(r){//刪除數據console.log("你是個好人！@");}else{//什么不做。console.log("在處處!!!");}}});}</script>4、表單相關
4.1. textbox 文本輸入框
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-rwAwObId-1632141642945)(https://static01.imgkr.com/temp/1f6bac5e7d3b4b3cb79a0977ac321606.png)]
- 代碼
4.2. numberbox 數字輸入框
- 代碼
4.3. datebox 日期框
- 代碼
4.4. filebox 文件
- 代碼
4.5. combobox下拉列表
- 注意
- 代碼
- 屬性列表
- 事件
- 方法
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-JID1ClmP-1632141642946)(https://static01.imgkr.com/temp/e559717f55ab4d79a2fccce2b78895c5.png)]
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~按鈕組~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --><!-- 添加客戶信息表單的按鈕組 --><div id="addPersonBtn"><a href="javascript:void(0)" class="easyui-linkbutton" data-options="onClick:person.add">添加</a><a href="javascript:void(0)" class="easyui-linkbutton" data-options="onClick:person.clear">清空</a></div><!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~按鈕組~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --><a href="javascript:void(0)" class="easyui-linkbutton" data-options="onClick:person.showUpdate">修改</a><div id="fmdiv" style="text-align: center;"><form id="fmPersonAdd" action="${pageContext.request.contextPath }/person/add.do" ><fieldset><legend>添加客戶信息</legend><table align="center" ><tr><td>姓名</td><td><input type="text" name="username" id="name" /></td></tr><tr><td>年齡</td><td><input type="text" name="age" id="age" /></td></tr><tr><td>性別</td><td><input type="text" name="sex" id="sex" /></td></tr><tr><td>手機號</td><td><input type="text" name="mobile" id="mobile" /></td></tr><tr><td>地址</td><td><input type="text" name="address" id="address" /></td></tr></table></fieldset></form></div><script>/* person相關的函數 */var person = {add:function(){//將表單數據提交.alert("asd");//$("form").form('submit');$("#fmPersonAdd").form("submit");},clear:function(){//清空表單數據$("#fmPersonAdd").form("clear");},showUpdate:function(){//將服務器查詢到perosn信息--->json串--->JS對象?/**$.ajax({urltyoesuccess:function(json){}});*///var ps = {"id":"1001","name":"王惠凱","age":18,"sex":1,"mobile":"12345678901","address":"河南鄭州，中南海!"};//將ps對象數據加載到表單中,//$("#fmPersonAdd").form('load',ps);$("#fmPersonAdd").form('load','${pageContext.request.contextPath}/person/getById.do?id=100035');}};/**表單綁定success事件?*/$("#fmPersonAdd").form({success:function(data){console.log(typeof(data));var json = JSON.parse(data);if(json.code==200){location.href="${pageContext.request.contextPath}/index.jsp";}}});/**easyui插件初始化工作*/$("#fmdiv").dialog({title:"客戶添加",iconCls:"icon-man",width:300,buttons:'#addPersonBtn',});$("#username").textbox({required:true,});$("#age").numberbox({required:true,precision:0,min:0,max:120,});$("#sex").numberbox({required:true,precision:0,min:0,max:1,});$("#mobile").numberbox({required:true,precision:0,validType:'length[11,11]',invalidMessage:'手機號，必須是11位',});$("#address").textbox({multiline:true,height:50,});</script>- 登錄案例編碼思路
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-SUlxQfQQ-1632141642947)(https://static01.imgkr.com/temp/652ac185fd174fd7a7d40a34b761dd65.png)]
5、表格相關
5.1. DataGrid 數據表格
- HTML代碼
- 方法
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-PE0nEtNQ-1632141642947)(https://static01.imgkr.com/temp/05be14d121be4d498f30242d0c20d6d7.png)]
- column列屬性
5.2. 分頁
- 屬性
- 思路
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-M1JEqlDB-1632141642948)(https://static01.imgkr.com/temp/de0e5279eca44a64bb1145e6dff04ce4.png)]
- 其他方法
6、布局相關
6.1. tabs標簽
- 代碼
6.2. accordion手風琴
- 代碼
6.3. layui 布局
允許用戶將頁面切割為上下左右中5個部分。
1. 標簽<body class="easyui-layout"><div><div><div><div><div><div><div><div><div><div></body>2. 插件名easyui-layout <body class="easyui-layout"><div data-options="title:'標題',region:'north',height:120,">上</div><div data-options="title:'底部信息',region:'south',height:80,">下</div><div data-options="title:'菜單',region:'west',width:150,">左</div><div data-options="title:'通知',region:'east',width:200">右</div><div data-options="title:'主頁',region:'center'">中</div></body>6.4. tree樹
- 代碼
- 思路
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-JFLyj5XP-1632141642949)(https://static01.imgkr.com/temp/879e50262df0469e80081fe0577a47e1.png)]
- 遠程異步加載
6.4. tree樹
- 代碼
- 思路
[外鏈圖片轉存中…(img-JFLyj5XP-1632141642949)]
- 遠程異步加載
總結
- 上一篇： 어느 도시 보유 하 면 사랑 이다（事
- 下一篇： js Date 生成某年某月的天数