EasyUI 教程

EasyUI 教程

easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。

easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。

使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。

easyui是个完美支持HTML5网页的完整框架。

easyui节省您网页开发的时间和规模。

easyui很简单但功能强大的。

在jQuery 和 HTML5 上轻松使用EasyUI

jQuery EasyUI 提供易于使用的组件，它使 Web 开发人员能快速地在流行的 jQuery 核心和 HTML5 上建立程序页面。 这些功能使您的应用适合今天的网络。 有两个方法声明的 UI 组件:

直接在 HTML 声明组件

<div class="easyui-dialog" style="width:400px;height:200px"
    data-options="
        title:'My Dialog',
        iconCls:'icon-ok',
        onOpen:function(){}">
    dialog content.
</div>

编写 JS 代码来创建组件

<input id="cc" style="width:200px" />
$('#cc').combobox({
	url: ...,
	required: true,
	valueField: 'id',
	textField: 'text'
});

原生Angular组件

EasyUI for Angular是基于原生的Angular 5之上构建的，不需要其他外部JavaScript库。

<eui-datagrid [data]="data" [clickToEdit]="true" editMode="row" style="height:250px">
	<eui-grid-column field="itemid" title="Item ID" [editable]="true"></eui-grid-column>
	<eui-grid-column field="name" title="Name" [editable]="true"></eui-grid-column>
	<eui-grid-column field="listprice" title="List Price" align="right" [editable]="true">
		<ng-template euiEditTemplate let-row="row">
			<eui-numberbox [(ngModel)]="row.listprice" precision="1"></eui-numberbox>
		</ng-template>
	</eui-grid-column>
	<eui-grid-column field="unitcost" title="Unit Cost" align="right" [editable]="true">
		<ng-template euiEditTemplate let-row="row">
			<eui-numberbox [(ngModel)]="row.unitcost"></eui-numberbox>
		</ng-template>
	</eui-grid-column>
	<eui-grid-column field="attr" title="Attribute" width="30%" [editable]="true"></eui-grid-column>
	<eui-grid-column field="status" title="Status" align="center" [editable]="true">
		<ng-template euiEditTemplate let-row="row">
			<eui-switchbutton [(ngModel)]="row.status" style="max-width:80px" onText="true" offText="false"></eui-switchbutton>
		</ng-template>
	</eui-grid-column>
</eui-datagrid>

原生Vue组件

<DataGrid :data="data" style="height:250px">
	<GridColumn field="itemid" title="Item ID"></GridColumn>
	<GridColumn field="name" title="Name"></GridColumn>
	<GridColumn field="listprice" title="List Price" align="right"></GridColumn>
	<GridColumn field="unitcost" title="Unit Cost" align="right"></GridColumn>
	<GridColumn field="attr" title="Attribute" width="30%"></GridColumn>
	<GridColumn field="status" title="Status" align="center"></GridColumn>
</DataGrid>

原生React组件

import React from 'react';
import { DataGrid, GridColumn } from 'rc-easyui';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.getData()
    }
  }
  render() {
    return (
      <div>
        <DataGrid data={this.state.data} style={{height:250}}>
		<GridColumn field="itemid" title="Item ID"></GridColumn>
		<GridColumn field="name" title="Name"></GridColumn>
		<GridColumn field="listprice" title="List Price" align="right"></GridColumn>
		<GridColumn field="unitcost" title="Unit Cost" align="right"></GridColumn>
		<GridColumn field="attr" title="Attribute" width="30%"></GridColumn>
		<GridColumn field="status" title="Status" align="center"></GridColumn>
        </DataGrid>
      </div>
    );
  }
}

EasyUI 教程和演示

有很多教程和演示应用帮助你了解这个框架。

jQuery easyui提供您网页开发的一切需要。这些指南将教你如何一步一步的创建你的应用程序。希望你能从中得到帮助。

所有插件

jQuery easyui提供了一个完整的组件的集合，包括强大的DataGrid，树网格，面板。用户可以使用他们一起，或者只是用一些组件，组合和构建他想要的跨浏览器的网页应用。

• Messager 消息框
• Splitbutton 分割按钮
• textbox（文本框）
• tagbox（标签框）
• Progressbar 进度条
• Pagination 分页
• Switchbutton 开关按钮
• Calendar 日历
• passwordbox（密码框）
• maskedbox（掩码框）
• Menubutton 菜单按钮
• Combogrid 组合网格
• Draggable 可拖动
• Parser 解析器
• Datagrid 数据网格
• Layout 布局
• Form 表单
• Timespinner 时间微调器
• Panel 面板
• DateTimeSpinner 日期时间微调框
• Datalist 数据列表
• filebox（文件框）
• checkbox（复选框）
• Linkbutton 链接按钮
• Numberbox 数字框
• Sidemenu 侧栏菜单
• Resizable 可调整尺寸
• Menu 菜单
• Spinner 微调器
• Dialog 对话框
• Numberspinner 数值微调器
• Propertygrid 属性网格
• Accordion 折叠面板
• Combobox 组合框
• Combotree 组合树
• Droppable 可放置
• Window 窗口
• radiobutton（单选框）
• Tooltip 提示框
• Treegrid 树形网格
• ComboTreeGrid（树形表格下拉框）
• Tree 树
• Searchbox 搜索框
• Slider 滑块
• Easyloader 加载器
• Validatebox 验证框
• Tabs 标签页/选项卡
• Datebox 日期框
• Combo 组合
• Datetimebox 日期时间框
• Mobile 移动端