阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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 移动端
      目录
      目录