|
Figure 1 : Spreadsheet Form Element Properties - UI - Custom Settings
รูปที่ 1: คุณสมบัติองค์ประกอบแบบฟอร์มสเปรดชีต - UI - การตั้งค่าแบบกำหนดเอง |
In Figure 1, we can add in more spreadsheet properties available in the library documentation. The configuration here is formatted as JSON. Usually for simple configurations, a single object and value in Custom Settings would suffice. But for more complex ones, this configuration can be used in combination with a Custom HTML form element to complete a functionality. Do scroll down below for a few examples referenced from the documentation.
|
ตัวอย่างที่ 1 - จำกัด การเลือกเซลล์ |
https://handsontable.com/docs/6.2.2/Options.html#selectionMode Use case: Limit the cell(s) that can be selected to only single cell.
|
Copy & paste this code snippet into Custom Settings.
คัดลอกและวางข้อมูลโค้ดนี้ลงในการตั้งค่าที่กำหนดเอง |
{ selectionMode: 'single' } |
ตัวอย่าง 2 - สไตล์เซลล์ที่ไม่ถูกต้องที่กำหนดเอง |
https://handsontable.com/docs/6.2.2/Options.html#invalidCellClassName Use case: Change the appearance of a cell if values does not match regex validation (regex configurable in spreadsheet properties).
|
First, use a Custom HTML form element to write a simple class style. Do use the !important notation only if the style is being overridden.
ก่อนอื่นให้ใช้องค์ประกอบฟอร์ม HTML ที่กำหนดเองเพื่อเขียนสไตล์คลาสแบบง่าย ใช้สัญลักษณ์! สำคัญถ้าสไตล์จะถูกเขียนทับ |
<style> .invalidCellCustom { background:pink !important; } </style> |
Then, copy & paste this code snippet into Custom Settings.
จากนั้นคัดลอกและวางข้อมูลโค้ดนี้ลงในการตั้งค่าแบบกำหนดเอง |
{ invalidCellClassName: 'invalidCellCustom' } |
ตัวอย่างที่ 3 - รับอินสแตนซ์สเปรดชีตที่ทำด้วยมือได้โดยใช้ ID องค์ประกอบของฟอร์ม |
https://handsontable.com/docs/6.2.2/Core.html Use case: Get the spreadsheet handsontable instance to use core functions.
|
First, copy & paste this code snippet into Custom Settings.
ก่อนอื่นให้คัดลอกและวางส่วนย่อยของรหัสนี้ในการตั้งค่าแบบกำหนดเอง |
{ "afterInit" : function() { var hot = this; $(hot.rootElement).data("hot", hot); } } |
Then, use a Custom HTML form element to get the 'hot' instance. After that, you are able to perform core functions on your specified spreadsheet element.
จากนั้นใช้องค์ประกอบรูปแบบ Custom HTML เพื่อรับอินสแตนซ์ 'ร้อน' หลังจากนั้นคุณสามารถทำหน้าที่หลักในองค์ประกอบสเปรดชีตที่คุณระบุ |
<script> $(function(){ var hot = FormUtil.getField("_yourSpreadsheetFormElementIdHere_").data("hot"); //console.log(hot.getSettings()); //hot.setDataAtRowProp(0, '_yourcellColumnIdHere_', '_myNewValue_'); }); </script> |
After performing example 3 above, we can use the script below to programmatically add new rows into the speadsheet.
<script> var col = hot.countRows(); hot.alter('insert_row', col, 1); hot.setDataAtCell(col, 0, '-Name-'); hot.setDataAtCell(col, 1, '-Surname-'); hot.setDataAtCell(col, 2, '-Age-') </script> |
Reference: https://jsfiddle.net/ck4859zm/