ฟรี JavaScript ชิ้นส่วนสเปรดชีตสําหรับการแสดงผลและการประมวลผลที่รวดเร็ว
ส่วนประกอบ Spreadsheet JavaScript ฟรีช่วยให้การแสดงผลที่รวดเร็วจัดการแถวการอนุญาตคอลัมน์การจัดการเซลล์และอื่น ๆ
คอมโพเนนต์ JavaScript ตาราง /สเปรดชีตที่รวดเร็วมากช่วยให้ผู้พัฒนาซอฟต์แวร์สามารถสร้างกริดที่อุดมไปด้วยด้วยการควบคุมและการแสดงผลแบบกําหนดเอง ส่วนประกอบสนับสนุนการแสดงผลเสมือนซึ่งช่วยให้ผู้ใช้สามารถทํางานร่วมกับหลายร้อยหลายพันรายการโดยไม่ต้องหยดใด ๆ ในการทํางาน ซึ่งหมายความว่า SlickGrid มีความสามารถในการจัดการตารางที่มี 100 แถวหรือ 100 พันแถวโดยไม่ลดประสิทธิภาพ ก่อนหน้านี้มันใช้เพื่อสนับสนุน jQuery I Themes แต่จาก SlickGrid 3.0.0 ทีมได้ลบรหัสที่เกี่ยวข้องทั้งหมดและแทนที่ด้วย SortableJS. ที่ทันสมัยมากขึ้น
ส่วนประกอบ SlickGrid สามารถปรับแต่งได้อย่างเต็มที่และให้ความเร็วในการแสดงผลที่รวดเร็วมาก ส่วนประกอบได้รวมคุณสมบัติที่สําคัญหลายประการสําหรับการจัดการสเปรดชีตเช่นสเปรดชีตการแสดงผลพื้นหลังการเรนเดอร์สําหรับเซลล์ที่ร่ํารวยยิ่งขึ้นการนําทางด้วยแป้นพิมพ์การซ่อนคอลัมน์แถวการเพิ่ม / คอลัมน์การซ่อนแถว มันเข้ากันได้กับกรอบข้อมูลที่เน้นและกับ Bootstrap
เริ่มต้นด้วย SlickGrid
วิธีที่แนะนําในการติดตั้ง SlickGrid, คือการใช้ num, การติดตั้ง SlickGrid, เพียงแค่เพิ่มแท็กสคริปต์ต่อไปนี้ในเบราว์เซอร์.
ติดตั้ง SlickGrid ผ่าน num
npm install slickgrid คุณสามารถดาวน์โหลดไลบรารีที่ใช้ร่วมกันที่คอมไพล์แล้วจากที่เก็บ GitHub และติดตั้ง
วิธีการผสานเซลล์โดยใช้ JavaScript API?
การรวมเซลล์ภายในสเปรดชีตเป็นคุณสมบัติที่มีประโยชน์มากซึ่งมักใช้เพื่อศูนย์กลางข้อความในแถวหรือคอลัมน์หลายแถวและสามารถเป็นประโยชน์ในการรวมสายข้อมูลของสองเซลล์หรือมากกว่า วัตถุประสงค์หลักคือการทําให้ข้อมูลสามารถนําเสนอและอ่านได้สําหรับผู้ใช้ปลายทาง ส่วนประกอบ Open Source SlickGrid JavaScript ช่วยให้ผู้พัฒนาซอฟต์แวร์สามารถรวมหลายเซลล์แถวหรือคอลัมน์ภายในแอพพลิเคชัน JavaScript ตัวเองได้
สเปรดชีตเซลล์ผสานผ่าน JavaScript API
function VerCellMergedFormatter(row, cell, value, columnDef, dataContext) {
var options = window._renderOptions;
if (options.lastRendering != 1) {
return;
}
var items = window.getRenderDataItmes();
var fieldName = columnDef.field;
var rowsLength = items.length;
var currentItem = items[row];
var nextRowIndex = row + 1;
if (nextRowIndex < rowsLength){
var nextValue = items[nextRowIndex][fieldName];
if (value == nextValue) {
if (!options.changedCells[row]) {
options.changedCells[row] = {};
}
options.changedCells[row][fieldName] = "noneline-bottom";
options.isNextMerged = 1;
return value;
}
else {
if (options.isNextMerged == 1) {
options.isNextMerged = 0;
return;
}
}
}
return value;
}
แก้ไข Spreadsheet คอลัมน์, รอสและเซลล์ผ่าน S
ส่วนประกอบ SlickGrid ช่วยให้ผู้พัฒนาซอฟต์แวร์สามารถจัดการกับเซลล์สเปรดชีตได้หลายวิธีภายในแอปพลิเคชัน JavaScript ของพวกเขา ไลบรารีได้ให้คุณสมบัติที่สําคัญหลายประการสําหรับการจัดการเซลล์สเปรดชีตคอลัมน์และแถวเช่นการใส่เซลล์ใหม่การแก้ไขเซลล์ที่มีอยู่ลบเซลล์ที่ไม่พึงประสงค์ นอกจากนี้ยังให้การสนับสนุนสําหรับคอลัมน์การปรับขนาดอัตโนมัติ, ที่อยู่อาศัย, การแสดงผล, การแสดง, และการซ่อนคอลัมน์และแถวโดยใช้คําสั่ง JavaScript
เพิ่มแถวใหม่และคลิกเพื่อแก้ไขเซลล์ผ่าน JavaScript API
var d = $scope.$grid.grid.getData();
$scope.$grid.grid.invalidateRow(d.length);
//Adds the new row as the first row.
d.unshift(item);
$scope.$grid.grid.updateRowCount();
$scope.$grid.grid.setData(d);
$scope.selectedRows = [];
$scope.selectedRows = [0];
//Sets the first row and first column as editable by clicking on it
$scope.$grid.grid.setActiveCell($scope.selectedRows,0);
//$scope.$grid.grid.gotoCell(0,0,true);
var grid = $scope.$grid.grid;
var row = $scope.selectedRows[0];
var col = 0;
grid.setActiveCell(row, col);
grid.editActiveCell(Slick.Acsiom.Editors.Text);
การต่อคอลัมน์อัตโนมัติผ่าน JavaScript API
ส่วนประกอบของโอเพนซอร์ส SlickGrid มีคุณลักษณะที่มีประโยชน์มากสําหรับการใช้การปรับขนาดคอลัมน์อัตโนมัติภายใน JavaScript การใช้งาน ให้คอลัมน์ที่ได้รับอนุญาต API ที่ช่วยให้ตารางเพื่อให้การเลือกอัจฉริยะเกี่ยวกับความกว้างของคอลัมน์ตามเนื้อหาของเซลล์ของส่วนหัวและแถว โปรดจําไว้ว่าข้อมูลจะต้องให้สําหรับการอนุญาตและต้องมีข้อมูลที่จะทดสอบสําหรับขนาดเพราะมันยากมากสําหรับอัลกอริทึมการปรับขนาดอัตโนมัติที่จะทํางานโดยไม่มีข้อมูลใด ๆ
