jQuery模倣Excelテーブル編集機能実装 code_jquery

ドラッグやコピー、Ctrl C、Ctrl V など、Excel で実行できるほぼすべての操作を Web 上で実行できます。

また、ブラウザのサポートに関しては、IE7、FF、Chrome、Safari、Opera のブラウザをサポートしています。

使用方法:
まず、jQuery フレームワークと、Handsontable プラグインの関連する JS ファイルと CSS ファイルをページに導入します。以下に挙げる 2 つは必須であり、その他は必要に応じてオプションです。必要に応じて関数を追加します (デモを参照)。

コードをコピー コードは次のとおりです:

次に、Excel 編集テーブルをレンダリングするための DIV レイヤー を追加します。

コードをコピー コードは次のとおりです:

最後に初期化できます

コードをコピー コードは次のとおりです:

//データ
var data = [
{id: 1, name: "Ted", isActive: true, color: "orange"},
{id: 2, name : "ジョン"、isActive: false、色: "黒"},
{id: 3, 名前: "アル"、isActive: true、色: "赤"},
{id: 4, 名前: "Ben"、isActive: false、color: "blue"}
];
//黄色渲染方法
var yellowRenderer = function (instance, td, row,col, prop, value, cellProperties) {
Handsontable.TextCell.renderer.apply(this, argument);
$(td).css({
背景: ' yellow'
});
};
//绿色渲染方法
var greenRenderer = function (instance, td, row,col, prop, value, cellProperties) {
Handsontable.TextCell.renderer.apply(this, argument);
$(td ).css({
背景: 'green'
});
};
//初期化
var $container = $("#example1");
$container .handsontable({
data: data,
startRows: 5,
colHeaders: true,
minSpareRows: 1,
列: [
{data: "id"},
{data: "name", type: {renderer: yellowRenderer}}, //黄色渲染
{data: "isActive", type: Handsontable.CheckboxCell}, //多选框
{data : "color",
type: Handsontable.AutocompleteCell, //自動完了
source: [" yellow"、" red"、 " orange"、 " green"、 " blue"、 " grey "、 " black" , "white"] //データソース
}
],
セル: 関数 (行, 列, プロパティ) {
if (行 === 0 && 列 === 0) {
return {type: {renderer: greenRenderer}};
}
}
});

div コンテナはロード後に初期化されることに注意してください:

デモコード:

コードをコピー コードは次のとおりです: