igniteui angular wrappers
17.0.0
igniteui-angular แทน! ใช้ส่วนประกอบที่พบใน projectsigniteui-angular-wrapperssrcpublic-api.ts เพื่อใช้การควบคุม Ignite UI ในแอปพลิเคชันเชิงมุม ทำงานกับตัวอย่างการทำงานที่นี่
ที่สำคัญ ที่เก็บข้อมูลได้รับการเปลี่ยนชื่อจาก igniteui-angular2 เป็น igniteui-angular-wrappers อ่านเพิ่มเติมเกี่ยวกับการประชุมการตั้งชื่อใหม่ของเรา
ในการเรียกใช้ตัวอย่างคุณต้องติดตั้ง node.js บนเครื่องของคุณ หลังจากนั้นจากเทอร์มินัลของคุณเรียกใช้คำสั่งต่อไปนี้:
git clone https://github.com/IgniteUI/igniteui-angular-wrapperscd igniteui-angular-wrappersnpm installnpm start igniteui-angular-wrappers ขึ้นอยู่กับแพ็คเกจที่ได้รับอนุญาตจาก ignite-ui-full ทำตามคำแนะนำนี้เกี่ยวกับการตั้งค่าการเข้าถึงฟีด NPM ส่วนตัวของ Ignite UI และเพิ่มการพึ่งพาไปยัง package.json
"dependencies": {
"@infragistics/ignite-ui-full": "latest"
}
เพื่อเริ่มต้นด้วย Ignite UI CLI และ Ignite UI angular wrappers:
npm i -g igniteui-cli
ig new <project name> --framework=angular --type=ig-ts
cd <project name>
ig add combo <component name>
ig start
ในแอปพลิเคชันเชิงมุม, Ignite UI ควบคุมการเริ่มต้นการเริ่มต้นมาร์กอัปซึ่งทำได้โดยใช้แท็กที่กำหนดเอง
การควบคุมแต่ละตัวใช้องค์ประกอบแท็กที่กำหนดเองซึ่งชื่อแท็กถูกสร้างขึ้นโดยการแยกตัวอักษรทุนแต่ละตัวในชื่อควบคุมด้วยสัญลักษณ์ -
หมายเหตุ : ขอแนะนำให้ใช้แท็กปิด ( </ig-combo> ) ผ่านแท็กปิดตัวเอง ( <ig-combo/> ) เนื่องจากหลังเป็นที่รู้จักกันในการสร้างปัญหาเกี่ยวกับเบราว์เซอร์บางตัว (ขึ้นอยู่กับโหมดเอกสารที่ใช้)
| ชื่อควบคุม | ติดแท็ก |
|---|---|
| igcombo | <ig-combo> |
| iggrid | <ig-grid> |
| igdatachart | <ig-data-chart> |
| igdialog | <ig-dialog> |
| igdateeditor | <ig-date-editor> |
| คนอพยพ | <ig-editor> |
| igmaskeditor | <ig-mask-editor> |
| Ignumericeditor | <ig-numeric-editor> |
| igpercenteditor | <ig-percent-editor> |
| igtexteditor | <ig-text-editor> |
| igdatepicker | <ig-date-picker> |
| igtree | <ig-tree> |
| igmap | <ig-map> |
| igupload | <ig-upload> |
| igvideoplayer | <ig-video-player> |
มีสองแอตทริบิวต์บังคับที่ต้องตั้งค่าเป็นแท็กที่กำหนดเองของ Ignite UI Control Custom: options - ชี้ไปที่คุณสมบัติในคลาสองค์ประกอบแอปพลิเคชันที่มีการกำหนดค่าของการควบคุม widgetId - การควบคุมต้องมี ID ที่จะกำหนดให้
@Component({
selector: 'my-app',
template: `<ig-grid
[(options)]="gridOptions"
[(widgetId)]='id'
[dataSource]='data'
></ig-grid>`
})
export class AppComponent {
private gridOptions: IgGrid;
private id: string;
private data: any;
constructor() {
this.data = Northwind.getData();
this.id ='grid1';
this.gridOptions = {
width: "100%",
height: "400px",
autoGenerateColumns: true
};
}
}
ในตัวอย่างนี้ options แอตทริบิวต์จุดไปยังคุณสมบัติ gridOptions ในคลาส COMPOMENT Application และจุด widgetId ไปยังคุณสมบัติ id
ตัวเลือกระดับบนสุดทั้งหมดได้รับอนุญาตให้ตั้งค่าเป็นแอตทริบิวต์ของแท็กที่กำหนดเองของ Ignite UI Control ในกรณีนี้แอตทริบิวต์ options ไม่ได้บังคับ แต่ได้รับอนุญาต และหากทั้งสอง- options และแอตทริบิวต์ระดับบนรวมกันคุณลักษณะระดับบนสุดจะแทนที่ options เมื่อมีคุณสมบัติที่ทับซ้อนกัน นอกจากนี้การเปลี่ยนแอตทริบิวต์ระดับบนจะใช้การเปลี่ยนแปลงกับวิดเจ็ตเฉพาะในกรณีที่ตัวเลือกถูกตั้งค่า
@Component({
selector: 'my-app',
template: `<ig-grid
[widgetId]='id'
[width]='w'
[autoCommit]='true'
[dataSource]='data'
[height]='h'
[autoGenerateColumns]='true'
>
</ig-grid>`
})
export class AppComponent {
private id: string;
private data: any;
private w: string;
private h: string;
private pKey: string;
constructor() {
this.data = Northwind.getData();
this.id ='grid1';
this.w = '100%';
this.h = '400px';
this.pKey = 'ProductID';
}
}
มีแท็กที่กำหนดเองสองแท็ก <column> และ <features> ที่ใช้ใน IGGRID/IGTREEGRID/IGHIERARCHICALGRID เพื่อกำหนดค่า columns และตัวเลือก features ตามลำดับ
<ig-grid [widgetId]='id'>
<column [key]="'ProductID'" [headerText]="'Product ID'" [width]="'165px'" [dataType]="'number'"></column>
<column [key]="'ProductName'" [headerText]="'Product Name'" [width]="'250px'" [dataType]="'string'"></column>
<column [key]="'QuantityPerUnit'" [headerText]="'Quantity per unit'" [width]="'250px'" [dataType]="'string'"></column>
<column [key]="'UnitPrice'" [headerText]="'Unit Price'" [width]="'100px'" [dataType]="'number'"></column>
<features>
<paging [pageSize]="currPageSize"></paging>
<filtering></filtering>
<selection></selection>
<group-by></group-by>
</features>
</ig-grid>
คุณสมบัติ GRIDS แต่ละตัวจะแสดงด้วยแท็กที่กำหนดเอง
| ชื่อคุณลักษณะ | ติดแท็ก |
|---|---|
| การเคลื่อนที่แบบคอลัมน์ | <column-moving> |
| การกรอง | <filtering> |
| โดยกลุ่ม | <group-by> |
| การซ่อน | <hiding> |
| เซลล์ | <cell-merging> |
| ภาคผนวก | <append-rows-on-demand> |
| หัวหลายคอลัมน์ | <multi-column-headers> |
| การเพจ | <paging> |
| ตอบสนอง | <responsive> |
| การปรับขนาด | <resizing> |
| Rowselectors | <row-selectors> |
| การเลือก | <selection> |
| การจัดเรียง | <sorting> |
| บทสรุป | <summaries> |
| การแก้ไขคอลัมน์ | <column-fixing> |
| คำแนะนำเครื่องมือ | <tooltips> |
| การอัปเดต | <updating> |
เพื่อที่จะเปลี่ยนตัวเลือกเพิ่มเติมในครั้งเดียว (หรือสร้างส่วนประกอบใหม่ด้วยชุดตัวเลือกอื่น) การกำหนดค่าใหม่สามารถนำไปใช้กับคุณสมบัติ options
@Component({
selector: 'my-app',
template: `<ig-grid
[(options)]="gridOptions"
[(widgetId)]='id'
[dataSource]="data"
></ig-grid>`
})
export class AppComponent {
private gridOptions: IgGrid;
private id: string;
private data: any;
constructor() {
this.data = Northwind.getData();
this.id ='grid1';
this.gridOptions = {
width: "100%",
height: "400px",
autoGenerateColumns: true
};
}
recreateGrid() {
this.gridOptions = {
dataSource: Northwind.getAnotherData(),
width: "700px",
autoGenerateColumns: true,
features: [
{ name: "Paging" }
]
};
}
}
ในตัวอย่างนี้ options แอตทริบิวต์จุดไปยัง gridOptions และการเปลี่ยนแปลงในการอ้างอิงจะทำลายกริดรวมตัวเลือกเก่าเข้ากับตัวเลือกใหม่และสร้างกริดด้วยตัวเลือกที่รวมกัน โปรดทราบว่ากริดใหม่จะมีความสูง 400px แม้ว่าจะไม่ได้กำหนดไว้ในตัวเลือกใหม่เนื่องจากการรวมกับตัวเลือกใหม่ หากต้องการปิดใช้งานตัวเลือกให้ตั้งค่าเป็น null , undefined , [] หรือ {}
การเชื่อมโยงกับเหตุการณ์การควบคุมนั้นทำได้โดยการกำหนดแอตทริบิวต์ที่ชื่อของแอตทริบิวต์เป็นชื่อของชื่อเหตุการณ์ของการควบคุมที่ล้อมรอบด้วยวงเล็บและค่าคือชื่อของตัวจัดการเหตุการณ์
| เหตุการณ์ | มาร์กอัป |
|---|---|
| iggrid.events.databind | <ig-grid (dataBind)="dataBindHandler"> |
| igcombo.events.textHanged | <ig-combo (textChanged)="textChangedHandler"> |
| igdateeditor.events.keypress | <ig-date-editor (keypress)="keypressHandler"> |
@Component({
selector: 'my-app',
template: `<ig-grid
[(options)]="gridOptions"
[(widgetId)]='id'
[dataSource]="data"
(dataBind)="dataBindHandler($event)"></ig-grid>`
})
export class AppComponent {
private gridOptions: IgGrid;
private id: string;
private data: any;
private dataBindHandler: any;
constructor() {
this.data = Northwind.getData();
this.id ='grid1';
this.gridOptions = {
width: "100%",
height: "400px",
autoGenerateColumns: true
};
}
dataBindHandler(event, ui) {
// event handler code
}
}
การเชื่อมโยงกับกิจกรรมฟีเจอร์ iggrid* ทำในรหัสการกำหนดค่าของตัวควบคุม
@Component({
selector: 'my-app',
template: `<ig-grid
[(options)]="gridOptions"
[dataSource]="data"
[(widgetId)]='id'></ig-grid>`
})
export class AppComponent {
private gridOptions: IgGrid;
private id: string;
private data: any;
constructor() {
this.data = Northwind.getData();
this.id ='grid1';
this.gridOptions = {
width: "100%",
height: "400px",
autoGenerateColumns: true,
features: [
{
name: "Filtering",
dataFiltered: function (evt, ui) {
// event handler code
}
}
]
};
}
}
ในตัวอย่างนี้เหตุการณ์ iggridfiltering dataFiltered ได้รับการจัดการในคลาสองค์ประกอบแอปพลิเคชัน
วิธีการส่วนประกอบสามารถเรียกได้โดยการเข้าถึงส่วนประกอบจากมุมมอง ตัวอย่างเช่น:
@Component({
selector: 'my-app',
template: '<ig-grid #grid1
[(options)]="gridOptions">
<features>
<paging [pageSize]="'2'"></paging>
</features>
</ig-grid>'
})
export class AppComponent {
private gridOptions: IgGrid;
@ViewChild("grid1") myGrid: IgGridComponent;
private id: string;
constructor() { ... }
ngAfterViewInit() {
//call grid method
var cell = this.myGrid.cellById(1, "Name");
//call grid paging method
this.myGrid.featuresList.paging.pageIndex(2);
}
}
ขณะนี้การควบคุมต่อไปนี้รองรับการเชื่อมโยงข้อมูลแบบสองทาง:
สำหรับการเชื่อมโยงข้อมูลสองทางกับการทำงานคุณต้องกำหนดแหล่งข้อมูลเป็นคุณสมบัติในเทมเพลต ตัวอย่าง:
<ig-combo [widgetId]="'combo2'"
[(options)]="options"
[dataSource]='northwind'
[(ngModel)]="combo.value1">
</ig-combo>
หมายเหตุ: การเชื่อมข้อมูลแบบสองทางจะไม่ทำงานหากคุณใช้ options.dataSource ในไฟล์. TTS เป็นการกำหนดค่า
ในการทริกเกอร์การตรวจจับการเปลี่ยนแปลงด้วยตนเองให้ใช้ markForCheck API
ต้องขอบคุณ @type/ignite-ui จึงเป็นไปได้ที่จะสร้างอินสแตนซ์ของแหล่งข้อมูล Ignite UI ทั้งหมด
let source = new Infragistics.DataSource(settings);
อินสแตนซ์แหล่งข้อมูลนี้ได้รับด้วย IntelliSense เกี่ยวกับวิธีการ IgDatasource
source.dataBind();
ตรวจสอบการสาธิตต่อไปนี้สำหรับข้อมูลเพิ่มเติม
คำสั่งสำหรับการรันการทดสอบคือ:
npm test
หลังจากนั้นหากการทดสอบทั้งหมดประสบความสำเร็จผ่านการครอบคลุมรหัสสำหรับไฟล์ public-api.ts จะถูกสร้างขึ้นภายใต้โฟลเดอร์. ./coverage/igniteui-angular-wrappers igniteui-angular-wrappers
หากต้องการดูความครอบคลุมของรหัสคุณสามารถเปิดไฟล์ HTML ใดไฟล์หนึ่งภายใต้. ./coverage/igniteui-angular-wrappers/src /igniteui-angular-wrappers/src
IGNITE UI เป็นชุดเครื่องมือ HTML5+ ขั้นสูงที่ช่วยให้คุณสร้างแอพพลิเคชั่นเว็บที่น่าทึ่งและทันสมัย การสร้างบน jQuery และ jQuery UI ส่วนใหญ่ประกอบด้วยคุณลักษณะที่อุดมไปด้วยคุณลักษณะที่อุดมไปด้วยการควบคุม/วิดเจ็ต UI ที่มีประสิทธิภาพสูงเช่นแผนภูมิทุกชนิดแผนที่การสร้างภาพข้อมูลข้อมูล (ลำดับชั้นการแก้ไขข้อมูลกริดการเชื่อมต่อที่เพิ่มขึ้น มีรายชื่อมากเกินไปที่นี่ - ตรวจสอบเว็บไซต์สำหรับข้อมูลเพิ่มเติมและดาวน์โหลดการทดลองใช้
Ignite UI ไม่ได้เป็นเพียงห้องสมุดอื่นที่สร้างขึ้นในเวลาว่างของใครบางคน มันพร้อมในเชิงพาณิชย์ได้รับการทดสอบมาอย่างดีปรับแต่งเพื่อประสิทธิภาพสูงสุดออกแบบมาเพื่อ UX ที่ดีและได้รับการสนับสนุนโดย Infragistics ซึ่งเป็น บริษัท ที่เน้นประสบการณ์พร้อมประวัติการติดตามประสบการณ์กว่า 24 ปีในการจัดหาเครื่องมือส่วนต่อประสานผู้ใช้ที่มีประสิทธิภาพสูงสำหรับองค์กรสำหรับเว็บหน้าต่างและสภาพแวดล้อมมือถือ
