Monthly Archives: March 2018

Download EasyUI for Angular 1.0

Installation

1. Copy/Paste the /easyui/components folder to the reference folder in your project.

2. Open your application module and add a reference to EasyUIModel.

  1. import { NgModule } from ‘@angular/core’;
  2. import { FormsModule } from ‘@angular/forms’;
  3. import { BrowserModule } from ‘@angular/platform-browser’;
  4. import { AppComponent } from ‘./app.component’;
  5.  
  6. import { EasyUIModule } from ‘easyui/components/easyui/easyui.module’;
  7.  
  8. @NgModule({
  9. bootstrap: [
  10. AppComponent
  11. ],
  12. declarations: [
  13. AppComponent
  14. ],
  15. imports: [
  16. FormsModule,
  17. BrowserModule,
  18. EasyUIModule
  19. ]
  20. })
  21. export class AppModule { }

3. Import CSS files.

You can add these CSS files to your index.html file.

  1. <link rel=“stylesheet” type=“text/css” href=“assets/themes/default/easyui.css”>
  2. <link rel=“stylesheet” type=“text/css” href=“assets/themes/angular.css”>
  3. <link rel=“stylesheet” type=“text/css” href=“assets/themes/icon.css”>

Or import them to your app.component.css file.

  1. @import ‘easyui/themes/material/easyui.css’;
  2. @import ‘easyui/themes/angular.css’;
  3. @import ‘easyui/themes/icon.css’;

4. Add components to the app.component.ts file.

  1. import { Component } from ‘@angular/core’;
  2.  
  3. @Component({
  4. selector: ‘app-root’,
  5. template: `
  6. <h2>Basic DataGrid</h2>
  7. <eui-datagrid [data]=”data” style=”height:250px”>
  8. <eui-grid-column field=”itemid” title=”Item ID”></eui-grid-column>
  9. <eui-grid-column field=”name” title=”Name”></eui-grid-column>
  10. <eui-grid-column field=”listprice” title=”List Price” align=”right”></eui-grid-column>
  11. <eui-grid-column field=”unitcost” title=”Unit Cost” align=”right”></eui-grid-column>
  12. <eui-grid-column field=”attr” title=”Attribute” width=”30%”></eui-grid-column>
  13. <eui-grid-column field=”status” title=”Status” align=”center”></eui-grid-column>
  14. </eui-datagrid>
  15. `
  16. })
  17. export class AppComponent {
  18. data = [
  19. {“code”:“FI-SW-01”,“name”:“Koi”,“unitcost”:10.00,“status”:“P”,“listprice”:36.50,“attr”:“Large”,“itemid”:“EST-1”},
  20. {“code”:“K9-DL-01”,“name”:“Dalmation”,“unitcost”:12.00,“status”:“P”,“listprice”:18.50,“attr”:“Spotted Adult Female”,“itemid”:“EST-10”},
  21. {“code”:“RP-SN-01”,“name”:“Rattlesnake”,“unitcost”:12.00,“status”:“P”,“listprice”:38.50,“attr”:“Venomless”,“itemid”:“EST-11”},
  22. {“code”:“RP-SN-01”,“name”:“Rattlesnake”,“unitcost”:12.00,“status”:“P”,“listprice”:26.50,“attr”:“Rattleless”,“itemid”:“EST-12”},
  23. {“code”:“RP-LI-02”,“name”:“Iguana”,“unitcost”:12.00,“status”:“P”,“listprice”:35.50,“attr”:“Green Adult”,“itemid”:“EST-13”},
  24. {“code”:“FL-DSH-01”,“name”:“Manx”,“unitcost”:12.00,“status”:“P”,“listprice”:158.50,“attr”:“Tailless”,“itemid”:“EST-14”},
  25. {“code”:“FL-DSH-01”,“name”:“Manx”,“unitcost”:12.00,“status”:“P”,“listprice”:83.50,“attr”:“With tail”,“itemid”:“EST-15”},
  26. {“code”:“FL-DLH-02”,“name”:“Persian”,“unitcost”:12.00,“status”:“P”,“listprice”:23.50,“attr”:“Adult Female”,“itemid”:“EST-16”},
  27. {“code”:“FL-DLH-02”,“name”:“Persian”,“unitcost”:12.00,“status”:“P”,“listprice”:89.50,“attr”:“Adult Male”,“itemid”:“EST-17”},
  28. {“code”:“AV-CB-01”,“name”:“Amazon Parrot”,“unitcost”:92.00,“status”:“P”,“listprice”:63.50,“attr”:“Adult Male”,“itemid”:“EST-18”}
  29. ];
  30. }

Download EasyUI Package

Freeware Edition

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

Download

Download EasyUI for jQuery 1.5.4.2

ChangeLog

Bug
  • combotreegrid: The ‘onChange’ event does not fire when entering values on the inputing box. fixed.
  • combobox: Clicking on the drop-down panel will jump to the bottom of body on win10 IE11. fixed.
  • datebox: Clicking on the ‘Today’ button doesn’t trigger the ‘onSelect’ event. fixed.
  • propertygrid: The ‘getChanges’ method doesn’t work after editing the only one row. fixed.
Improvement
  • combo: Add the ‘panelEvents’ property.
  • combo: Attach the default ‘mousedown’ event handler.
  • combobox: The ‘setValues’ method can be called to initialize the displaying text.
  • combotreegrid: Press ENTER key to select the highlighted rows.
  • panel: Improve the resizing performance.
  • filebox: The ‘files’ method allows the user to get the selected file list.
  • searchbox: Improvent the ‘selectName’ method.

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.