ส่วนประกอบสเปรดชีตสำหรับ ReactJS
ส่วนประกอบสเปรดชีตสำหรับ React
⚠️ ต้องการคนดูแล! ฉันไม่สามารถทำให้องค์ประกอบนี้เป็นปัจจุบันและยินดีที่จะมอบกุญแจให้กับคนที่เป็นอยู่
นี่คือองค์ประกอบสเปรดชีตที่สร้างขึ้นใน ReactJS ของ Facebook คุณสามารถดูตัวอย่างได้ที่นี่ .
api 3 คืออะไร
การใช้งาน
คอมโพเนนต์เริ่มต้นด้วยออบเจ็กต์การกำหนดค่า หากต้องการ สามารถส่งข้อมูลเริ่มต้นสำหรับสเปรดชีตเป็นอาร์เรย์ของแถวได้ นอกจากนี้ คุณยังสามารถส่งผ่านอาร์เรย์ที่สองที่มีชื่อคลาสสำหรับแต่ละเซลล์ ซึ่งทำให้คุณสามารถจัดสไตล์แต่ละเซลล์ได้แตกต่างกัน
var SpreadsheetComponent = require('react-spreadsheet-component'); React.render(, document.getElementsByTagName('body')); วัตถุการกำหนดค่า
var config = { // Initial number of row rows: 5, // Initial number of columns columns: 8, // True if the first column in each row is a header (th) hasHeadColumn: true, // True if the data for the first column is just a string. // Set to false if you want to pass custom DOM elements. isHeadColumnString: true, // True if the first row is a header (th) hasHeadRow: true, // True if the data for the cells in the first row contains strings. // Set to false if you want to pass custom DOM elements. isHeadRowString: true, // True if the user can add rows (by navigating down from the last row) canAddRow: true, // True if the user can add columns (by navigating right from the last column) canAddColumn: true, // Override the display value for an empty cell emptyValueSymbol: '-', // Fills the first column with index numbers (1...n) and the first row with index letters (A...ZZZ) hasLetterNumberHeads: true }; วัตถุข้อมูลเริ่มต้น
ออบเจ็กต์ข้อมูลเริ่มต้นประกอบด้วยอาร์เรย์ |_+_| ซึ่งมีอาร์เรย์สำหรับทุกแถว แต่ละดัชนีในอาร์เรย์แสดงถึงเซลล์ มันถูกใช้โดยคอมโพเนนต์เพื่อเติมข้อมูลล่วงหน้าในเซลล์ โปรดทราบว่าการป้อนข้อมูลของผู้ใช้ไม่ได้ถูกเขียนลงในวัตถุนี้ เนื่องจากจะใช้เพียงในการเริ่มต้นเพื่อเติมสถานะเท่านั้น หากคุณต้องการบันทึกการป้อนข้อมูลของผู้ใช้ อ่านด้านล่าง
rowsวัตถุคลาสเซลล์
คุณสามารถกำหนดคลาสที่กำหนดเองให้กับแต่ละเซลล์ได้ ทำตามสคีมาเดียวกันกับออบเจ็กต์ข้อมูลเริ่มต้น
var data = { rows: [ ['Key', 'AAA', 'BBB', 'CCC', 'DDD', 'EEE', 'FFF', 'GGG'], ['COM', '0,0', '0,1', '0,2', '0,3', '0,4', '0,5', '0,6'], ['DIV', '1,0', '1,1', '1,2', '1,3', '1,4', '1,5', '1,6'], ['DEV', '2,0', '2,1', '2,2', '2,3', '2,4', '2,5', '2,6'], ['ACC', '3,0', '3,1', '3,2', '3,3', '3,4', '3,5', '3,6'] ] }; วงจรชีวิตของข้อมูล
การป้อนข้อมูลของผู้ใช้ไม่ได้ถูกเขียนไปยัง |_+_| ออบเจ็กต์ เนื่องจากมันถูกใช้เพียงในการเริ่มต้นเพื่อเติมสถานะ หากคุณต้องการจับอินพุตของผู้ใช้ สมัครรับการเรียกกลับของ |_+_| และ |_+_| เหตุการณ์บนดิสแพตเชอร์
พารามิเตอร์สุดท้ายคือ |_+_| ของสเปรดชีตที่คุณต้องการสมัครรับข้อมูล
รับสถานะข้อมูลทั้งหมดหลังจากการเปลี่ยนแปลงแต่ละครั้ง
var classes = { rows: [ ['', 'specialHead', '', '', '', '', '', ''], ['', '', '', '', '', '', '', ''], ['', 'error', '', '', '', '', '', ''], ['', 'error changed', '', '', '', '', '', ''], ['', '', '', '', '', '', '', ''] ] }; รับการเปลี่ยนแปลงข้อมูลก่อนเปลี่ยนสถานะ
initialDataงานอื่นๆ ของผู้มอบหมายงาน
ผู้มอบหมายงานเสนอกิจกรรมอื่นๆ ที่คุณสามารถสมัครรับข้อมูลได้:
โปรแกรมควบคุมเครื่องนำทางคู่
- |_+_| มีการคลิกเซลล์ส่วนหัว (ส่งคืนอาร์เรย์เซลล์ |_+_|)
- |_+_| เลือกเซลล์แล้ว (ส่งคืนอาร์เรย์เซลล์ |_+_|)
- |_+_| เซลล์ถูกเบลอ (ส่งคืนอาร์เรย์เซลล์ |_+_|)
- |_+_| ผู้ใช้เริ่มแก้ไข (ส่งคืนอาร์เรย์เซลล์ |_+_|)
- |_+_| ผู้ใช้หยุดแก้ไข (ส่งคืนอาร์เรย์เซลล์ |_+_|)
- |_+_| ผู้ใช้สร้างแถวใหม่ (ส่งคืนดัชนีแถว)
- |_+_| ผู้ใช้สร้างคอลัมน์ใหม่ (ส่งคืนดัชนีแถว)
เรียกใช้ตัวอย่าง
โคลนที่เก็บจาก GitHub และเปิดโฟลเดอร์ที่สร้างขึ้น:
cellValueChangedติดตั้งแพ็คเกจ npm และคอมไพล์ JSX
dataChangedหากคุณกำลังใช้ Windows ให้รันคำสั่งต่อไปนี้แทน:
spreadsheetIdเปิดตัวอย่างใน example/index.html
good node js หนังสือ
ดาวน์โหลดรายละเอียด:
ผู้เขียน: felixrieseberg
การสาธิต: http://felixrieseberg.github.io/React-Spreadsheet-Component/
รหัสแหล่งที่มา: https://github.com/felixrieseberg/React-Spreadsheet-Component
#reactjs #react #javascript