EasyUI 基础知识

Easy UI( User Interface )?

• 一个基于JQuery的UI框架，专注于开发系统页面。
• 一个简单的用户界面组件的集合。
• 封装好大部分 UI 基本功能和jquery中的局部插件，帮用户减少大量的js/css 代码。
• 适合用于开发简单的系统或原型系统， 不适用于前台项目页面（适用于后台管理界面）。
• EasyUI控件与服务器端通信的方式全部是ajax基于 json格式数据 @RestController
• 处理服务器传过来的json数据能力比较强

Eeay UI创建控件

 

第一种方式：HTML代码

<!-- 通过html方式创建控件，标签加入css样式，“easyui-控件名称” 基于html方式创建控件 属性 -->

<!-- data-options属性定义easyui属性，如果easy提供的属性与html标签属性相同，则无需将该属性写在data-options中。 -->

<a href="javascript:;" class="easyui-linkbutton" data-options="width:200, height:40, disabled:false, text:"文件上传">

 

 

第二种方式：JS代码

 

// 通过JS代码创建控件，控件选择器.控件名称()
// 属性，事件使用：全部以对象的形式作为控件的参数传递。（属性名：属性值，属性名1：属性值1，事件名：事件处理函数|事件处理函数名）

$("#btn").linkbutton({
    width:100, // 属性名：属性值
    height:200,
    iconCls:'icon-save',
    plain:true,
    onClick:test,
});

前台系统：easyui + bootstrap美工 + css

后台管理系统： easyUI