최신 게시글(WEB)
HOME > WEB > 최신 게시글(WEB)
2018.12.03 / 24:50

JavaScript jQuery UI Framwork 오픈소스

hanulbit
추천 수 233

What is EasyUI?

  • easyui is a collection of user-interface components based on jQuery, Angular, Vue and React.
  • easyui provides essential functionality for building modern, interactive, javascript applications.
  • using easyui you don't need to write many javascript code, you usually define user-interface by writing some HTML markups.
  • complete framework for HTML5 web page.
  • easyui saves your time and scales while developing your products.
  • easyui is very easy but powerful.

Easy to use on jQuery and HTML5

EasyUI for jQuery provides easy to use components for web developers, which is built on the popular jQuery core and HTML5. These make your applications suitable for today's web. There are two ways to declare ui components:

Declare components directly within HTML

<div class="easyui-dialog" style="width:400px;height:200px"
    data-options="
        title:'My Dialog',
        iconCls:'icon-ok',
        onOpen:function(){}">
    dialog content.
</div>

Write JavaScript code to create components

<input id="cc" style="width:200px" />

$('#cc').combobox({
	url: ...,
	required: true,
	valueField: 'id',
	textField: 'text'
});


Native angular components

EasyUI for Angular is built based on native angular 5 and higher. No other external javascript libraries are needed. 

<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>
See Demos


Native Vue components

<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>
See Demos

Native React components

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>
    );
  }
}
See Demos

Tutorials and Demos are Ready

Lots of tutorials and demos applications help you learn more about this framework.

EasyUI provides everything you need for building your web page. These tutorials will show you step-by-step how to create your application. Enjoy and hopefully you can learn from them.

See Demos




Tutorial

This tutorial aims to use easyui framework to demonstrate how to create your web page easily.

Application

Drag and Drop

Menu and Button

Layout

DataGrid

Window

Tree

Form




Download EasyUI for jQuery 1.6.10

jQuery EasyUI framework helps you build your web pages easily.

ChangeLog

Bug
  • maskedbox: The component does not accept numeric keypad. fixed.
  • combogrid: When selecting multiple records, the datagrid will scroll to the last checked record. fixed.
Improvement
  • Compatible with jQuery 3.x.
  • tabs: The 'toolPosition' property can accept 'top' and 'bottom' values.
  • textbox: The textbox label has the animating feature when focus or blur on it.
  • tooltip: Add 'valign' property.
  • tree: The node class can be initialized by setting the 'nodeCls' in the data.
New Plugins
  • sidemenu: The sidemenu is created from accordion and tree plugins. It builds a collapsible menu with some categories.
  • radiobutton: This plugin provides a round interface to select one option from a number of options.
  • checkbox: This plugin allows a user to select a value from a small set of options.

Download EasyUI Package

There are two editions of EasyUI package:

Freeware Edition

The Freeware Edition is available under Freeware License, you can use it in any freeware-licensed projects. Download jQuery EasyUI under freeware license:

Download

Commercial Edition

The Commercial Edition is also available under Commercial License, you can use it in a commercial project.

Purchase

Other Versions

The other released versions of jQuery EasyUI are also available. Click here to view a listing and choose which version you would like to download.





Download EasyUI for Vue

The EasyUI framework helps you build your web pages easily.

Installation

1. Use the NPM to install. 

  1. npm install vx-easyui --save

2. Import EasyUI files.

Import the EasyUI files to your main.js file.

  1. import 'vx-easyui/dist/themes/default/easyui.css';
  2. import 'vx-easyui/dist/themes/icon.css';
  3. import 'vx-easyui/dist/themes/vue.css';
  4. import EasyUI from 'vx-easyui';
  5. Vue.use(EasyUI);

3. Import the components to your 'App.vue'.

  1. <template>
  2.     <div>
  3.         <DataGrid :data="data" style="height:250px">
  4.             <GridColumn field="itemid" title="Item ID"></GridColumn>
  5.             <GridColumn field="name" title="Name"></GridColumn>
  6.             <GridColumn field="listprice" title="List Price" align="right"></GridColumn>
  7.             <GridColumn field="unitcost" title="Unit Cost" align="right"></GridColumn>
  8.             <GridColumn field="attr" title="Attribute" width="30%"></GridColumn>
  9.             <GridColumn field="status" title="Status" align="center"></GridColumn>
  10.         </DataGrid>
  11.     </div>
  12. </template>
  13. <script>
  14.     export default {
  15.         data() {
  16.             return {
  17.                 data: [
  18.                     {"code":"FI-SW-01","name":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr":"Large","itemid":"EST-1"},
  19.                     {"code":"K9-DL-01","name":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr":"Spotted Adult Female","itemid":"EST-10"},
  20.                     {"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr":"Venomless","itemid":"EST-11"},
  21.                     {"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr":"Rattleless","itemid":"EST-12"},
  22.                     {"code":"RP-LI-02","name":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr":"Green Adult","itemid":"EST-13"},
  23.                     {"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr":"Tailless","itemid":"EST-14"},
  24.                     {"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr":"With tail","itemid":"EST-15"},
  25.                     {"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr":"Adult Female","itemid":"EST-16"},
  26.                     {"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr":"Adult Male","itemid":"EST-17"},
  27.                     {"code":"AV-CB-01","name":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr":"Adult Male","itemid":"EST-18"}
  28.                 ]
  29.             }
  30.         }
  31.     }
  32. </script>

Licenses

Freeware Edition

The Freeware Edition is available under Freeware License, you can use it in any freeware-licensed projects.

Commercial Edition

The Commercial Edition is also available under Commercial License, you can use it in a commercial project.

Purchase