ngx inline editor

ส่วนประกอบ UI Inline-Editor Angular (เวอร์ชัน 4+) (สาธิต)

ติดตามฉันเพื่อรับการแจ้งเตือนเกี่ยวกับรุ่นใหม่

NGX-Inline-Editor เป็นไลบรารีของ Angular (เวอร์ชัน 4+) ที่ช่วยให้คุณสร้างองค์ประกอบที่แก้ไขได้ เทคนิคดังกล่าวเป็นที่รู้จักกันในชื่อ click-to-edit หรือ Edit-in-place มันขึ้นอยู่กับความคิดของ Angular-xeditable ซึ่งพัฒนาขึ้นใน AngularJs

การพึ่งพาอาศัยกัน

โดยพื้นฐานแล้วมันไม่ได้ขึ้นอยู่กับห้องสมุดใด ๆ ยกเว้น Angular4 เอง สำหรับธีมคุณอาจต้องรวม Twitter Bootstrap CSS

Angular 4+ เวอร์ชัน

ตอนนี้ Angular 4 มีเสถียรภาพ ดังนั้นหากพบข้อผิดพลาดโดยใช้ LIB นี้ให้ตรวจสอบให้แน่ใจว่าเวอร์ชันของคุณเข้ากันได้ รุ่นปัจจุบันที่ใช้ในการพัฒนา lib นี้คือ Angular4 ^4.0.0

การควบคุมและคุณสมบัติ

• ข้อความ
• textarea
• เลือก
• ช่องทำเครื่องหมาย
• วิทยุ
• วันที่
• เวลา
• วันที่
• อินพุต HTML5
  • ลวดลาย
  • ตัวเลข
  • พิสัย
• หัวพิมพ์
• UI-select
• รูปแบบที่ซับซ้อน
• แถวที่แก้ไขได้
• คอลัมน์ที่แก้ไขได้
• ตารางที่แก้ไขได้
• ธีม

เริ่มต้นอย่างรวดเร็ว

1. วิธีที่แนะนำในการติดตั้ง NGX-Inline-Editor คือผ่าน NPM Package Manager โดยใช้คำสั่งต่อไปนี้:

npm i @qontu/ngx-inline-editor --save

2. รวมธีมพื้นฐานหรือกำหนดค่าสไตล์ของคุณเองซึ่งอยู่ในเส้นทางต่อไปนี้:

dist/themes/bootstrap.css

3. รวม Twitter Bootstrap และ Fontawesome ในโครงการของคุณ

การใช้งาน

Angular (4+) และในภายหลัง

นำเข้า InlineEditorModule ลงในโมดูลแอปของคุณ:

 import { InlineEditorModule } from '@qontu/ngx-inline-editor' ;

@ NgModule ( {
  imports : [
    InlineEditorModule
  ]
} )

สิ่งนี้ทำให้ส่วนประกอบ @qontu/ngx-inline-editor ทั้งหมดพร้อมใช้งานสำหรับใช้ในส่วนประกอบแอปของคุณ

ตัวอย่างง่ายๆ

คุณสามารถค้นหาตัวอย่างที่สมบูรณ์ได้ที่นี่

 import { Component } from '@angular/core' ;

@ Component ( {
    selector : 'my-component' ,
    template : `
    <div>
        <inline-editor type="text" [(ngModel)]="editableText" (onSave)="saveEditable($event)" name="editableText1" size="8"></inline-editor>
    </div>
    <div>
        <inline-editor type="password" [(ngModel)]="editablePassword" (onSave)="saveEditable($event)"></inline-editor>
    </div>
    <div>
        <inline-editor type="textarea" [(ngModel)]="editableTextArea" (onSave)="saveEditable($event)"> </inline-editor>
    </div>
    <div>
        <inline-editor type="select" [(ngModel)]="editableSelect" (onSave)="saveEditable($event)" [options]="editableSelectOptions"
        value="valor"></inline-editor>
  </div>`
} )
export class MyComponent {
  title = 'My component!' ;

  editableText = 'myText' ;
  editablePassword = 'myPassword' ;
  editableTextArea = 'Text in text area' ;
  editableSelect = 2 ;
  editableSelectOptions = [
    { value : 1 , text : 'status1' } ,
    { value : 2 , text : 'status2' } ,
    { value : 3 , text : 'status3' } ,
    { value : 4 , text : 'status4' }
  ] ;

  saveEditable ( value ) {
    //call to http service
    console . log ( 'http.service: ' + value ) ;
  } 

API

inlineeditordirectives

ข้อความ

 < inline-editor
        type =" text "
        [(ngModel)] =" editableText "
        (onSave) =" saveEditable($event) "
        name =" editableText1 "
        size =" 8 "
        disabled =" true "
        min =" 1 "
        max =" 8 "
        pattern =" ^[a-zA-Z]{1,3} "
        (onError) =" myHandleError() " > </ inline-editor >

• type [ string ] ระบุองค์ประกอบประเภท <input> ที่จะแสดง
• onSave [ event handler ] นิพจน์ที่ระบุจะถูกเรียกใช้เมื่อใดก็ตามที่แบบฟอร์มจะถูกบันทึกผ่านปุ่มคลิกที่บันทึก อาร์กิวเมนต์ $event จะเป็นค่าส่งคืนค่าของการส่งอินพุต
• onError [ event handler ] นิพจน์ที่ระบุจะถูกเรียกใช้เมื่อใดก็ตามที่แบบฟอร์มจะถูกบันทึกผ่านปุ่มคลิกที่ปุ่มบันทึกและข้อผิดพลาดจะถูกกระตุ้น (ตัวอย่าง: ค่าไม่ได้อยู่ระหว่างขั้นต่ำและสูงสุด)
• name [ string ] กำหนดชื่อขององค์ประกอบ <input> > ค่าเริ่มต้น undefined
• size [ number ] กำหนดความกว้างเป็นอักขระขององค์ประกอบ <input> ค่าเริ่มต้นคือ 8
• disabled [ boolean ] หากตั้งค่าเป็น true องค์ประกอบอินพุตที่ปิดใช้งานไม่สามารถใช้งานได้และไม่สามารถคลิกได้ ค่าเริ่มต้นเป็น false
• min [ number ] แอตทริบิวต์ MIN ระบุค่าต่ำสุดสำหรับองค์ประกอบ <input> ค่าเริ่มต้นคือ 1
• max [ number ] แอตทริบิวต์สูงสุดระบุค่าสูงสุดสำหรับองค์ประกอบ <input> ค่าเริ่มต้นคือ Infinity

รหัสผ่าน

 < inline-editor
        type =" password "
        [(ngModel)] =" editablePassword "
        (onSave) =" saveEditable($event) "
        name =" editablePassword "
        size =" 8 "
        disabled =" true "
        min =" 1 "
        max =" 8 "
        (onError) =" myHandleError " > </ inline-editor >

• type [ string ] ระบุองค์ประกอบประเภท <input> ที่จะแสดง
• onSave [ event handler ] นิพจน์ที่ระบุจะถูกเรียกใช้เมื่อใดก็ตามที่แบบฟอร์มจะถูกบันทึกผ่านปุ่มคลิกที่บันทึก อาร์กิวเมนต์ $event จะเป็นค่าส่งคืนค่าของการส่งอินพุต
• onError [ event handler ] นิพจน์ที่ระบุจะถูกเรียกใช้เมื่อใดก็ตามที่แบบฟอร์มจะถูกบันทึกผ่านปุ่มคลิกที่ปุ่มบันทึกและข้อผิดพลาดจะถูกกระตุ้น (ตัวอย่าง: ค่าไม่ได้อยู่ระหว่างขั้นต่ำและสูงสุด)
• name [ string ] กำหนดชื่อขององค์ประกอบ <input> > ค่าเริ่มต้น undefined
• size [ number ] กำหนดความกว้างเป็นอักขระขององค์ประกอบ <input> ค่าเริ่มต้นคือ 8
• disabled [ boolean ] หากตั้งค่าเป็น true องค์ประกอบอินพุตที่ปิดใช้งานไม่สามารถใช้งานได้และไม่สามารถคลิกได้ ค่าเริ่มต้นเป็น false
• min [ number ] แอตทริบิวต์ MIN ระบุค่าต่ำสุดสำหรับองค์ประกอบ <input> ค่าเริ่มต้นคือ 1
• max [ number ] แอตทริบิวต์สูงสุดระบุค่าสูงสุดสำหรับองค์ประกอบ <input> ค่าเริ่มต้นคือ Infinity

textarea

 < inline-editor
        type =" textarea "
        [(ngModel)] =" editableTextArea "
        (onSave) =" saveEditable($event) "
        name =" editableTextArea "
        size =" 8 "
        disabled =" true "
        cols =" 50 "
        rows =" 4 "
        min =" 1 "
        max =" 8 "
        (onError) =" myHandleError " > </ inline-editor >

• type [ string ] ระบุองค์ประกอบประเภท <input> ที่จะแสดง
• onSave [ event handler ] นิพจน์ที่ระบุจะถูกเรียกใช้เมื่อใดก็ตามที่แบบฟอร์มจะถูกบันทึกผ่านปุ่มคลิกที่บันทึก อาร์กิวเมนต์ $event จะเป็นค่าส่งคืนค่าของการส่งอินพุต
• onError [ event handler ] นิพจน์ที่ระบุจะถูกเรียกใช้เมื่อใดก็ตามที่แบบฟอร์มจะถูกบันทึกผ่านปุ่มคลิกที่ปุ่มบันทึกและข้อผิดพลาดจะถูกกระตุ้น (ตัวอย่าง: ค่าไม่ได้อยู่ระหว่างขั้นต่ำและสูงสุด)
• name [ string ] กำหนดชื่อขององค์ประกอบ <input> > ค่าเริ่มต้น undefined
• size [ number ] กำหนดความกว้างเป็นอักขระขององค์ประกอบ <input> ค่าเริ่มต้นคือ 8
• disabled [ boolean ] หากตั้งค่าเป็น true องค์ประกอบอินพุตที่ปิดใช้งานไม่สามารถใช้งานได้และไม่สามารถคลิกได้ ค่าเริ่มต้นเป็น false
• cols [ number ] ระบุความกว้างที่มองเห็นได้ของพื้นที่ข้อความ ค่าเริ่มต้นคือ 50
• rows [ number ] ระบุความสูงที่มองเห็นได้ของพื้นที่ข้อความ ค่าเริ่มต้นคือ 4
• min [ number ] แอตทริบิวต์ MIN ระบุค่าต่ำสุดสำหรับองค์ประกอบ <input> ค่าเริ่มต้นคือ 1
• max [ number ] แอตทริบิวต์สูงสุดระบุค่าสูงสุดสำหรับองค์ประกอบ <input> ค่าเริ่มต้นคือ Infinity

เลือก

ตัวอย่างพื้นฐาน

 < inline-editor
        type =" select "
        [(ngModel)] =" editableSelect "
        (onSave) =" saveEditable($event) "
        name =" editableSelect "
        disabled =" false "
        [options] =" editableSelectOptions " > </ inline-editor >

• type [ string ] ระบุองค์ประกอบประเภท <input> ที่จะแสดง
• onSave [ event handler ] นิพจน์ที่ระบุจะถูกเรียกใช้เมื่อใดก็ตามที่แบบฟอร์มจะถูกบันทึกผ่านปุ่มคลิกที่บันทึก อาร์กิวเมนต์ $event จะเป็นค่าส่งคืนค่าของการส่งอินพุต
• name [ string ] กำหนดชื่อขององค์ประกอบ <input> > ค่าเริ่มต้น undefined
• disabled [ boolean ] หากตั้งค่าเป็น true องค์ประกอบอินพุตที่ปิดใช้งานไม่สามารถใช้งานได้และไม่สามารถคลิกได้ ค่าเริ่มต้นเป็น false
• options [ Array<optionItem> | Object:{ data: Array<optionItem, value:string, text: string } ] อาร์เรย์ของรายการที่จะเลือก ควรเป็นอาร์เรย์ของวัตถุที่มี value และคุณสมบัติ text เป็นไปได้ที่จะกำหนดค่าพารามิเตอร์ค่าคีย์โดยใช้วัตถุที่ระบุฟิลด์และข้อมูลเหล่านี้

รหัส Typescript:

  editableSelect = 2 ;
  editableSelectOptions = [
    { value : 1 , text : 'status1' } ,
    { value : 2 , text : 'status2' } ,
    { value : 3 , text : 'status3' } ,
    { value : 4 , text : 'status4' }
  ] ;

  saveEditable ( value ) {
    //call to http server
    console . log ( 'http.server: ' + value ) ;

  } 

ตัวอย่างการกำหนดค่าพารามิเตอร์

• editableSelect [ number ] ระบุค่าเริ่มต้นของตัวเลือก
• editableSelectOptions [ Array<optionItem> | Object: { data: Array<optionItem, value:string, text: string } ] ระบุอาร์เรย์ของรายการที่จะเลือก ควรเป็นอาร์เรย์ของวัตถุที่มี value และคุณสมบัติ text เป็นไปได้ที่จะกำหนดค่าพารามิเตอร์ค่าคีย์โดยใช้วัตถุที่ระบุฟิลด์และข้อมูลเหล่านี้

รหัส Typescript:

  editableSelect = 2 ;
  editableSelectOptionsConfiguration = {
    data : [
      { id : 1 , field : 'status1' } ,
      { id : 2 , field : 'status2' } ,
      { id : 3 , field : 'status3' } ,
      { id : 4 , field : 'status4' }
    ] ,
    value : 'id' ,
    text : 'field'
  }

  saveEditable ( value ) {
    //call to http server
    console . log ( 'http.server: ' + value ) ;

  } 

ตัวอย่างเด็ก ๆ

เป็นไปได้ที่จะกำหนดค่า sublevels/เด็กเพื่อสร้างการเลือกโดยใช้อาร์เรย์ของวัตถุที่เรียกว่า children

รหัส Typescript:

 editableSelectOptionsTwoLevelsDefault = 1 ;
  editableSelectOptionsTwoLevelsConfiguration = {
    data : [
      {
        id : 1 , field : 'status1' ,
        children : [
          { id : 5 , field : 'status1.1' } ,
          { id : 6 , field : 'status1.2' }
        ]
      } ,
      { id : 2 , field : 'status2' } ,
      { id : 3 , field : 'status3' } ,
      {
        id : 4 , field : 'status4' ,
        children : [ { id : 7 , field : 'status4.1' } ]
      }
    ] ,
    value : 'id' ,
    text : 'field'
  } 

ส่วนประกอบที่ว่างเปล่า

  < inline-editor
  type =" text "
  ngModel
  empty =" My custom message "
  (onSave) =" saveEditable($event) "
  (onError) =" handleError "
  name =" editableText1 "
  size =" 8 "
  min =" 3 "
  max =" 5 " > </ inline-editor >

  < inline-editor type =" select "
                [(ngModel)] =" editableSelectDoesntExist "
                (onSave) =" saveEditable($event) "
                [options] =" editableSelectOptionsConfiguration " > </ inline-editor >

• [ string ] empty ระบุข้อความเริ่มต้นที่จะแสดงหากไม่มี ngmodel สำหรับส่วนประกอบ หากประเภทถูก select องค์ประกอบเริ่มต้นที่เลือกเป็นองค์ประกอบแรกของอาร์เรย์ options

สไตล์/ธีม

inline-editor มีชุดรูปแบบพื้นฐานต่อไปนี้ซึ่งคุณสามารถค้นหาได้ใน dist/themes/bootstrap.css :

 a . c-inline-editor {
  text-decoration : none;
  color : # 428bca ;
  border-bottom : dashed 1 px # 428bca ;
  cursor : pointer;
  line-height : 2 ;
  margin-right : 5 px ;
  margin-left : 5 px ;
}
. c-inline-editor . editable-empty ,
. c-inline-editor . editable-empty : hover ,
. c-inline-editor . editable-empty : focus ,
. c-inline-editor . a . editable-empty ,
. c-inline-editor . a . editable-empty : hover ,
. c-inline-editor . a . editable-empty : focus {
  font-style : italic;
  color : # DD1144 ;
  text-decoration : none;
}

. c-inline-editor . inlineEditForm {
  display : inline-block;
  white-space : nowrap;
  margin : 0 ;
}

# inlineEditWrapper {
  display : inline-block;
}

. c-inline-editor . inlineEditForm input ,
. c-inline-editor . select {
  width : auto;
  display : inline;
}

. c-inline-editor . inline-editor-button-group {
  display : inline-block;
}

. c-inline-editor . editInvalid {
  color : # a94442 ;
  margin-bottom : 0 ;
}

. c-inline-editor . error {
  border-color : # a94442 ;
}

[ hidden ]. c-inline-editor {
  display : none;
}

การรวมเข้ากับ NGX-Libraries อื่น ๆ

NGX-DATA-TABLE

ตัวอย่างการใช้ Table Angular2-Data (Demo)

การแก้ไขปัญหา

โปรดปฏิบัติตามแนวทางนี้เมื่อรายงานข้อบกพร่องและคำขอคุณลักษณะ:

1. ใช้บอร์ดปัญหา GitHub เพื่อรายงานข้อบกพร่องและคำขอคุณสมบัติ (ไม่ใช่ที่อยู่อีเมลของเรา)
2. โปรด เขียนขั้นตอนเพื่อทำซ้ำข้อผิดพลาด ด้วยวิธีนี้เราสามารถมุ่งเน้นไปที่การแก้ไขข้อผิดพลาดโดยไม่เกาหัวของเราที่พยายามทำซ้ำ

ขอบคุณสำหรับความเข้าใจ!

การพัฒนา

1. เพื่อสร้าง *.js ทั้งหมด, *.js.map และ *.d.ts ไฟล์:

   npm run build

2. ถึงการดีบัก:

   npm run build:watch

ผู้เขียน

Carlos Caballero - https://github.com/caballerog

Antonio Villena - https://github.com/xxxtonixxx

ใบอนุญาต

ใบอนุญาต MIT (ดูไฟล์ใบอนุญาตสำหรับข้อความเต็ม) -