文章目录

简单说明EasyUI的下载EasyUI的测试EasyUI的执行需要依赖jQuery1. 拖拽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引入;

href="/js/jquery-easyui-1.4.1/themes/icon.css" />

href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />

1. 拖拽

2. 进度条

3. 菜单按钮

href="/js/jquery-easyui-1.4.1/themes/icon.css" />

href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />

Easy-UI的菜单项

4. 按钮

href="/js/jquery-easyui-1.4.1/themes/icon.css" />

href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />

Easy-UI按钮

返回

新增

编辑

清空

移除

保存

剪切

ok

no

取消

重载

查询

打印

帮助

取消

5. 弹出框

href="/js/jquery-easyui-1.4.1/themes/icon.css" />

href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />

Easy-弹出窗口

搜索

6. 创建表格

href="/js/jquery-easyui-1.4.1/themes/icon.css" />

href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />

Easy-表格数据1

---

通过数据请求创建表格

---

通过js创建表格

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.树形结构

href="/js/jquery-easyui-1.4.1/themes/icon.css" />

href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />

EasyUI-树形结构

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(融合))