迅速なレンダリングと処理のための無料のJavaScriptスプレッドシートコンポーネント
オープンソースフリーJavaScript スプレッドシートコンポーネントは、スピーディなレンダリング、行の管理、列のオーサライズ、セルの処理などを可能にします。
非常にスピーディーでオープンなソースJavaScriptグリッド/スプレッドシートコンポーネントにより、ソフトウェア開発者はカスタムコントロールとディスプレイで豊富なグリッドを生成することができます。 コンポーネントは、ユーザーがパフォーマンスを低下させることなく、数百万個のアイテムで動作することを可能にする仮想レンダリングをサポートしています。 つまり、SlickGridは、パフォーマンスを損なうことなく100行または100万行のグリッドを扱うことができます。 以前は、jQuery Iテーマをサポートするために使用しましたが、SlickGrid 3.0.0から、チームはすべての関連するコードを削除し、より近代的なSortableJSに置き換えました。
SlickGridコンポーネントは完全にカスタマイズ可能で、非常に高速なレンダリング速度を提供します。 コンポーネントは、スプレッドシートのレンダリング、背景のポストレンダリングなどのスプレッドシートを管理するための重要な機能がいくつか含まれています。豊富なセル、キーボードのナビゲーション、列の復元、レンダリング列、表示/非表示の列や行、新しい行のインサート、新しい行の編集、undo/redoサポート付きのマルチフィールドエディタ、フォーマットやスタイルの追加など。 データセンターのフレームワークとBootstrapと互換性があります
始めるSlickGrid
SlickGridをインストールするための推奨方法は、num、SlickGridをインストールするには、ブラウザに次のスクリプトタグを追加するだけです。
num で SlickGrid をインストール
npm install slickgrid
GitHub リポジトリからコンパイル済みの共有ライブラリをダウンロードしてインストールできます。
JavaScript APIを使用してセルをマージする方法?
スプレッドシート内のセルをマージするのは、複数の行や列を渡るテキストを集中するのによく使用される非常に便利な機能で、2つ以上のセルのデータ文字列を組み合わせるのに役立ちます。 その主な目的は、エンドユーザーのために提示可能かつ読みやすいデータを作ることです。 オープンソース 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;
}
スプレッドシートの列を編集します。, ロス & セルを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を承認する列を提供します。 データが承認のために提供されなければならないことを忘れないでください。自動サイジングアルゴリズムがデータなしで動作するのは非常に難しいため、サイズをテストするためにデータが存在する必要があります。