什么是EasyUI？

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

easyui提供了构建现代交互式javascript应用程序的基本功能。

使用easyui，您不需要编写许多javascript代码，通常通过编写一些HTML标记来定义用户界面。

完整的HTML5网页框架。

使用easyui开发你的产品时可以大量节省你的时间和规模。

easyui使用非常简单但功能非常强大。

通过jQuery或HTML5使用EasyUI

EasyUI for jQuery为Web开发人员提供了易于使用的组件，这些组件建立在流行的jQuery核心和HTML5之上。这些使您的应用程序适合当今的Web。声明UI组件有两种方法：

使用HTML声明组件

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

使用JS代码创建组件

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

原生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 &#39;react&#39;;import { DataGrid, GridColumn } from &#39;rc-easyui&#39;;class App extends React.Component {  constructor(props) {    super(props);    this.state = {      data: this.getData()    }  }  render() {    return (      <p>        <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>      </p>    );  }}