easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。
easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。
使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的。
jQuery EasyUI 提供易于使用的组件,它使 Web 开发人员能快速地在流行的 jQuery 核心和 HTML5 上建立程序页面。 这些功能使您的应用适合今天的网络。 有两个方法声明的 UI 组件:
<div class="easyui-dialog" style="width:400px;height:200px" data-options=" title:'My Dialog', iconCls:'icon-ok', onOpen:function(){}"> dialog content. </div>
<input id="cc" style="width:200px" /> $('#cc').combobox({ url: ..., required: true, valueField: 'id', textField: 'text' });
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>查看示例
<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>查看示例
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> ); } }查看示例
jQuery easyui提供了一个完整的组件的集合,包括强大的DataGrid,树网格,面板。用户可以使用他们一起,或者只是用一些组件,组合和构建他想要的跨浏览器的网页应用。