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 移动端
阿西河

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于本站

阿西河前端教程more,是一个提供大前端开发教程的网站;这里不仅会有传统的WEB开发教程,还会包含Nodejs,Docker,云服务相关的介绍;