easyui是什么

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:&#39;My Dialog&#39;,
        iconCls:&#39;icon-ok&#39;,
        onOpen:function(){}">
    dialog content.
</div>

使用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 '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>
    );
  }
}

更多相关知识，请访问 PHP中文网！！