Skip to content

Instantly share code, notes, and snippets.

@anzfactory

anzfactory/index.html

Last active November 16, 2015 04:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anzfactory/b841ce8ad5cd70b2de8c to your computer and use it in GitHub Desktop.
Save anzfactory/b841ce8ad5cd70b2de8c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.20.0/handsontable.full.min.css">
<style>
#wrapper {
display: -webkit-box;
display: -moz-box;
display: box;
}
#logs {
list-style: none;
padding: 0;
margin: 0;
width: 20%;
}
#logs li {
margin: 0;
padding: 0 0.5em;
font-size: 80%;
border-bottom: 1px solid #DDD;
}
</style>
</head>
<body>
<h1>HandsOnTable Sample</h1>
<div>
<input type="text" id="text-insert"><button id="btn-insert">選択セルにテキスト挿入</button>
<button id="btn-consoledata">現在のデータをコンソールへ</button>
</div>
<div id="wrapper">
<div id="grid"></div>
<ol id="logs"></ol>
</div>
<quote>
<a href="http://maouyusya2828.web.fc2.com/">via 魔王「この我のものとなれ、勇者よ」勇者「断る！」</a>
</quote>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.20.0/handsontable.full.min.js"></script>
<script>
$(function() {
var logs = $('#logs'),
gridContainer = document.getElementById('grid'),
selectedRow = 0,
selectedCol = 0,
log = function(text) {
$('<li>').text(text).prependTo(logs);
}
gridTable = new Handsontable(gridContainer, {
data: getData(),
width: function() {
// なにか動的に指定したい場合はメソッド形式で
return 800;
},
height: 600,
colWidths: function (index) {
var width = 100;
if (index > 0) {
width = 600;
}
return width;
},
minSpareRows: 1,
colHeaders: ['名前', 'セリフ'],
columns: [
{"readOnly": true},
{"readOnly": false}
],
rowHeaders: true,
contextMenu: true,
cells: function (row, col, prop) {
// ここで編集不可とかを指定できる（row とか col とかで判定しつつ）
// セルが選択される度によばれることに注意（作成時だけではない）
// なにかプロパティをセットして返すことで制御ができる
var cellProperties = {}
if (row % 2 == 0) {
// cellProperties.readOnly = true; // たとえば偶数行を読み取り専用とか
}
return cellProperties;
},
afterChange: function(changes, source) {
// changes は array で
// [[row, col, pretext, aftertext]] というかんじ
// コピペとかで 複数行 一気に編集した場合にも対応してるっぽい
// あと編集状態から確定したら呼ばれるだけで、実際にテキストに変更があったかどうかは感知していない
// どうしてもひつようなら、 pretextとaftertextで要チェック
// 画面上で操作した場合は基本的には source が edit が指定さｒてる
// 初期表示時に変更されたときは loadData が
// 自分で setDataAtCell() を使って変更するときは、 source　に任意の文字列を指定できるので
// システムで変更したのかどうか判定が可能
if (source == 'edit') {
for (var i = 0; i < changes.length; i++) {
var rowChange = changes[i];
log(source + ' : ' + rowChange[2] + ' -> ' + rowChange[3]);
}
} else {
log(source);
}
},
/*
これは選択セルが変更されたときによばれる（キー移動でもマウス移動でも）
start と end もあることから範囲選択にも対応している
r selection start row
c selection start column
r2 selection end row
c2 selection end column
*/
afterSelection: function (r, c, r2, c2) {
// 現在選択中のセルを1つっていうことになると end の方を中心に考えるのがしぜんかな
log('moved : ' + r2 + '-' + c2);
// ボタンとかおしてフォーカスがGridから離れると
// getSelected() では取れなくなるので、
// このタイミングで常に保持しておいたほうが無難
// 追記 - start
// outsideClickDeselectsをfalseに設定したらフォーカスロストした時も
// 選択状態を維持できるので、それだけのためなら自前で保持する必要なし
// 追記 - end
selectedRow = r2,
selectedCol = c2;
}
});
// 各種クリック
$(document).on('click', '#btn-consoledata', function (e) {
// getData() で現在の全データが取得可能
// 画面で編集したものも常に反映されている模様
console.log(gridTable.getData());
}).on('click', '#btn-insert', function (e) {
// 最後の引数が afterChange の際に、ユーザー操作かシステム操作による変更なのか判別するキーになる
// この場合だと afterChange(changes, source) の source に system が渡る感じ
// 指定セルがReadOnlyならするー
if (gridTable.getCellMeta(selectedRow, selectedCol).readOnly) {
log('cannot edit cell...because readonly');
return;
}
gridTable.setDataAtCell(selectedRow, selectedCol, $('#text-insert').val(), 'system');
});
});
var getData = function () {
return [
["メイド長","まおーさま……？"],
["魔王","良い気分だ"],
["",""],
["メイド長","まおーさま？"],
["魔王","どうしたんだー？　メイド長－。きょとんとした顔をして"],
["",""],
["メイド長","まおー、様？"],
["魔王","おなかも減った、疲れた。まったく酷い目にあった"],
["",""],
["メイド長","……"],
["",""],
["魔王","ふふん。もう大丈夫だ。戻ろう"],
["",""],
["メイド長","どこへ？"],
["",""],
["魔王","――戦場へ"],
["","（にたぁり）"],
["",""],
["メイド長","うわぁぁぁっ！！"],
["","（ザシュッ！）"],
["",""],
["魔王","くぅっ！　主人に手を挙げるとは、\nしつけがなっていないぞ雌犬めっ"],
["",""],
["メイド長","わたしのまおー様は！　まおー様はっ！\n　魔王なんかじゃ、ないっ！！"],
["","（ヒュバッ！）"],
["",""],
["","（キンッ！　キンッ！　ギキンッ！）"],
["",""],
["魔王","どこから出した、その長剣……"],
["",""],
["メイド長","わたしのまおー様は、そんな下卑た、物欲しげで\n　下品に笑ったりはしませんっ！"],
["",""],
["魔王","それは残念、可哀想に。これからはこの表情で笑うのだ"],
["",""],
["メイド長","せりゃぁぁっ！！"],
["","（ザッ！　シュバっ！　ヒュインッ！）"],
["",""],
["魔王","上級魔族並みか。\n“技”とはすごいな、獣鬼にまさる我が筋力さえも凌ぐのか"],
["",""],
["メイド長","まおー様っ！　まおー様っ！！"],
["",""],
["魔王","ええいっ！　間抜けな呼び方で我が名前を連呼するなっ！"],
["",""],
["メイド長","あなたなどの名を呼ぶつもりはないっ。\n　わたしのまおー様は、マイマスターはただ1人っ"],
["",""],
["魔王","こざかしいっ！"],
["","（ドシュっ！）"],
["",""],
["メイド長","まおー様はっ。賢くて、聡明で、理知的で、\n　合理的で、冷静で、シニカルで、嫌って云うほど現実的なのに\n　はにかんだ笑顔は可愛らしいマイマスターっ。\n　だらしなくて着替えも洗濯もいやがって、\n　掃除も料理もろくに出来ない、わたしの選んだわたしの運命っ！"]
];
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment