easyui是基于jquery、angular、vue和react的用户界面组件的集合。使用easyui不需要编写许多javascript代码，只需要编写一些html标记来定义用户界面即可。
什么是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声明组件
<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> ); }}
更多相关知识，请访问 ！！