當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

什么是EasyUI，如何使用EasyUI？--easyui的十二种用法

發布時間：2023/12/20 编程问答 43 豆豆

生活随笔收集整理的這篇文章主要介紹了什么是EasyUI，如何使用EasyUI？--easyui的十二种用法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

- 簡單說明
- EasyUI的下載
- EasyUI的測試
- - EasyUI的執行需要依賴jQuery
  - 1. 拖拽
  - 2. 進度條
  - 3. 菜單按鈕
  - 4. 按鈕
  - 5. 彈出框
  - 6. 創建表格
  - 7.樹形結構
- 點擊進入對其余五種EasyUI用法的詳情介紹(面板/分類面板/選項卡/標簽頁/頁面布局/super(融合))

簡單說明

1.easyui是一種基于jQuery、Angular.、Vue和React的用戶界面插件集合。
2.easyui為創建現代化，互動，JavaScript應用程序，提供必要的功能。
3.使用easyui你不需要寫很多代碼，你只需要通過編寫一些簡單HTML標記，就可以定義用戶界面。
4.easyui是個完美支持HTML5網頁的完整框架。
5.easyui節省您網頁開發的時間和規模。
6.easyui很簡單但功能強大的。

EasyUI的下載

官網地址：http://www.jeasyui.com/download/v19.php
點擊下載（免費即可）：

EasyUI的測試

EasyUI的執行需要依賴jQuery

故JS引入;

<script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>  <script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>  <script type="text/javascript"src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>  <link rel="stylesheet" type="text/css"href="/js/jquery-easyui-1.4.1/themes/icon.css" /> <link rel="stylesheet" type="text/css"href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />

1. 拖拽

<body><div class="easyui-draggable">拖動DIV</div><div class="easyui-draggable">測試div</div></body>

2. 進度條

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>EasyUI-進度條</title> <script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script> <script type="text/javascript" src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script> <link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/icon.css" /> <link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" /> <script type="text/javascript">$(function(){$("#b").click(function(){onload(); })/*采用遞歸的方法實現進度條刷新 */var i = 0;function onload(){$('#p').progressbar({ value:i++});if(i<=100){/*延時加載,到了指定的時間,則執行函數,時間單位是毫秒*/setTimeout(function(){onload();}, 1)}}})</script> </head><body><div id="p" class="easyui-progressbar" style="width:400px;"></div><input id="b" type="button" value="加載"/> </body></html>

3. 菜單按鈕

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>EasyUI-3-菜單按鈕</title> <script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.min.js"></script> <script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script> <script type="text/javascript"src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script> <link rel="stylesheet" type="text/css"href="/js/jquery-easyui-1.4.1/themes/icon.css" /> <link rel="stylesheet" type="text/css"href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" /> <script type="text/javascript">$(function(){//菜單是默認影藏的，使其進行展現$('#mm').menu('show', { left: 200, //左側位置top: 100 //頂部位置});})function menuHandler(item){alert("添加點擊事件做想做的事情,其中item表示點擊的菜單項");alert(item.text); //輸出點擊項的文本內容} </script> </head> <body><h1>Easy-UI的菜單項</h1><div id="mm" class="easyui-menu" style="width: 200px;" data-options="onClick:menuHandler"><div>新建</div><div><span>打開</span><div style="width: 150px;"><div><b>Word</b></div><div>Excel</div><div>PowerPoint</div><div>自定義選項</div></div></div><div data-options="iconCls:'icon-save'")">保存</div><div class="menu-sep"></div><div><span>自定義</span><div style="width:150px;"><div data-options="name:'返回',iconCls:'icon-blank'">返回</div><div data-options="name:'新增',iconCls:'icon-add'">新增</div><div data-options="iconCls:'icon-edit'">編輯</div><div data-options="iconCls:'icon-clear'">清空</div><div data-options="iconCls:'icon-remove'">移動</div></div></div><div>退出</div></div> </body> </html>

4. 按鈕

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>EasyUI-4-按鈕</title> <script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.min.js"></script> <script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script> <script type="text/javascript"src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script> <link rel="stylesheet" type="text/css"href="/js/jquery-easyui-1.4.1/themes/icon.css" /> <link rel="stylesheet" type="text/css"href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" /> <script type="text/javascript">$(function(){//為按鈕添加點擊事件$("#btn1").bind("click",function(){alert("點擊事件添加成功");});})</script> </head> <body><h1>Easy-UI按鈕</h1><a id="btn1" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-back'">返回</a><a id="btn2" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">新增</a><a id="btn3" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">編輯</a><a id="btn4" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-clear'">清空</a><a id="btn5" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">移除</a><br><a id="btn6" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a><a id="btn7" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut'">剪切</a><a id="btn8" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">ok</a><a id="btn9" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-no'">no</a><a id="btn10" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">取消</a><br><a id="btn11" href="#" class="easyui-linkbutton" data-options="iconCls:'reload'">重載</a><a id="btn12" href="#" class="easyui-linkbutton" data-options="iconCls:'search'">查詢</a><a id="btn13" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-print'">打印</a><a id="btn14" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help'">幫助</a><a id="btn15" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-undo'">取消</a><br></body> </html>

5. 彈出框

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>EasyUI-5-彈出框</title> <script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.min.js"></script> <script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script> <script type="text/javascript"src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script> <link rel="stylesheet" type="text/css"href="/js/jquery-easyui-1.4.1/themes/icon.css" /> <link rel="stylesheet" type="text/css"href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" /> <script type="text/javascript">$(function(){$("#btn1").bind("click",function(){$("#win1").window({title:"彈出框",width:400,height:400,modal:true //這是一個模式窗口，只能點擊彈出框，不允許點擊別處})})$("#btn3").click(function(){alert("關閉");$("#win2").window("close");});/*定義退出消息框 */$("#btn4").click(function(){$.messager.confirm('退出','你確定要退出嗎',function(r){ if (r){ alert("確認退出");} });})/*定義消息提示框 */$.messager.show({ title:'My Title', msg:'蛋蛋都胖成一個球了，圓圓的', timeout:5000,height:200,width:300,showType:'slide' }); }) </script> </head> <body><h1>Easy-彈出窗口</h1><a id="btn1" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a><div id="win1"></div><div id="win2" class="easyui-window" title="My Window" style="width:600px;height:400px" data-options="iconCls:'icon-save',modal:true"> 我是一個窗口<a id="btn3" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-back'">關閉</a></div><div style="float: right"><a id="btn4" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">退出系統</a></div></body> </html>

6. 創建表格

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>EasyUI-6-創建表格</title> <script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.min.js"></script> <script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script> <script type="text/javascript"src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script> <link rel="stylesheet" type="text/css"href="/js/jquery-easyui-1.4.1/themes/icon.css" /> <link rel="stylesheet" type="text/css"href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" /> <script type="text/javascript">/*通過js創建表格 */$(function(){$("#table3").datagrid({/*定義工具欄 */toolbar: [{ iconCls: 'icon-edit', handler: function(){alert("點擊工具欄")} },'-',{ iconCls: 'icon-help', handler: function(){alert('幫助工具欄')} },'-',{iconCls: 'icon-save',handler: function(){alert('保存工具欄')}}], columns:[[{field:'itemIds',checkbox:true},{field:'itemId',title:'商品Id',width:100}, {field:'itemName',title:'商品名稱',width:100}, {field:'itemDesc',title:'商品描述',width:100,align:'right'} ]],fitColumns:true, //自動適應url:"datagrid_item.json", //請求數據的地址method:"get", //提交方式striped:true, //有條紋的行nowrap:true, //提高加載性能loadMsg:"正在加載", //加載數據時打印pagination:true, //分頁加載rownumbers:true, //顯示行號//singleSelect:true, //只允許選中一行數據})}) </script> </head><body><h1>Easy-表格數據1</h1><div><table class="easyui-datagrid" style="width:400px;height:250px"> <thead> <tr> <th data-options="field:'code'">Code</th> <th data-options="field:'name'">Name</th> <th data-options="field:'price'">Price</th> </tr> </thead> <tbody> <tr> <td>001</td><td>name1</td><td>2323</td> </tr> <tr> <td>002</td><td>name2</td><td>4612</td> </tr><tr> <td>003</td><td>name3</td><td>4612</td> </tr> </tbody> </table></div><hr/><h1>通過數據請求創建表格</h1><div>定義表格，并且通過url訪問json數據， fitColumns:true表示自動適應，singleSelect:true 表示選中單個<table class="easyui-datagrid" style="width:500px;height:300px" data-options="url:'datagrid_data.json',method:'get',fitColumns:true,singleSelect:true,pagination:true"> <thead> <tr> <th data-options="field:'code',width:100">Code</th> <th data-options="field:'name',width:100">Name</th> <th data-options="field:'price',width:100,align:'right'">Price</th></tr> </thead> </table> </div><hr/><h1>通過js創建表格</h1><table id="table3" style="width:700px"></table></body> </html>

datagrid_data.json

{"total":2000,"rows":[{"code":"A","name":"果汁","price":"20"},{"code":"B","name":"漢堡","price":"30"},{"code":"C","name":"雞柳","price":"40"},{"code":"D","name":"可樂","price":"50"},{"code":"E","name":"薯條","price":"10"},{"code":"F","name":"麥旋風","price":"20"},{"code":"G","name":"套餐","price":"100"}] }

datagrid_item.json

{"total":200,"rows":[{"itemId":"1","itemName":"手機","itemDesc":"蘋果手機"},{"itemId":"2","itemName":"電腦","itemDesc":"外星人"},{"itemId":"3","itemName":"平板","itemDesc":"游戲平板"},{"itemId":"4","itemName":"諾基亞","itemDesc":"砸核桃專用"},{"itemId":"5","itemName":"摩托羅拉","itemDesc":"估計快倒閉了"},{"itemId":"6","itemName":"小米","itemDesc":"組裝的都這么厲害"}] }

7.樹形結構

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>EasyUI-7-樹形結構</title> <script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.min.js"></script> <script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script> <script type="text/javascript"src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script> <link rel="stylesheet" type="text/css"href="/js/jquery-easyui-1.4.1/themes/icon.css" /> <link rel="stylesheet" type="text/css"href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" /> <script type="text/javascript">/*通過js創建樹形結構 */$(function(){$("#tree").tree({url:"tree.json", //加載遠程JSON數據method:"get", //請求方式 POSTanimate:true, //表示顯示折疊端口動畫效果checkbox:true, //表述復選框lines:true, //表示顯示連接線dnd:true, //是否拖拽onClick:function(node){ //添加點擊事件//控制臺console.info(node);}});}) </script> </head><body><h1>EasyUI-樹形結構</h1><ul id="tree"></ul></body> </html>

tree.json

[{"id":"1","text":"英雄聯盟","iconCls":"icon-save","children":[{"id":"4","text":"沙漠死神"},{"id":"5","text":"德瑪西亞"},{"id":"6","text":"諾克薩斯之手"},{"id":"7","text":"蠻族之王"},{"id":"8","text":"孫悟空"}],"state":"open"},{"id":"2","text":"王者榮耀","children":[{"id":"10","text":"阿科"},{"id":"11","text":"呂布"},{"id":"12","text":"陳咬金"},{"id":"13","text":"典韋"}],"state":"closed"},{"id":"3","text":"吃雞游戲","iconCls":"icon-save"} ]

點擊進入對其余五種EasyUI用法的詳情介紹(面板/分類面板/選項卡/標簽頁/頁面布局/super(融合))

總結

以上是生活随笔為你收集整理的什么是EasyUI，如何使用EasyUI？--easyui的十二种用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Vmware Linux虚拟机全屏
下一篇：初识easyUI