tech_memo
Datatable (テーブルをフィルタ、ソート、検索等色々) †
ファイルアップロード †
- ドラッグ&ドロップのみでアップロード(決定ボタン等なし)
BlockUI (半透明レイヤでロード画面を簡単表示) †
- 参考 : http://kojikoji75.hatenablog.com/entry/2014/03/20/230355
- 公式サイト(ダウンロード) : http://malsup.com/jquery/block/
- サンプル
<script type="text/javascript" src="/Scripts/jquery.js"></script>
<script type="text/javascript" src="/Scripts/jquery.blockUI.js"></script>
<script type="text/javascript">
$(function() {
$('#test').click(function() {
$.blockUI({
message: 'Now Loading',
css: {
border: 'none',
padding: '10px',
backgroundColor: '#333',
opacity: .5,
color: '#fff'
},
overlayCSS: {
backgroundColor: '#000',
opacity: 0.6
}
});
setTimeout($.unblockUI, 10000);
});
});
</script>
$.ajaxでJSONデータを取得 †
- 参考 : https://itsakura.com/jquery-ajax
- ajaxの引数dataTypeに、"json"を指定すると、JSON型データとして戻りを受け取る。
<form>
<input id="save" type="button" value="Save">Test</input>
</form>
<script src="./jquery-3.2.1.min.js"></script>
<script>
$(function() {
$('#save').click(function() {
$.ajax('/cgi-bin/return_json_data.py',
{
type: 'post',
dataType: 'json',
}
).done(function(data) { // 戻りはdata変数に格納されている
alert(data["test_key"]); // JSONデータのkeyを指定して値を取得
});
});
</script>
Handsontable (Excelのようにテーブル編集) †
Memo †
<html>
<head>
</head>
</head>
<body>
<table id="table" border="1">
<tr>
<td>123</td><td>345</td><td>aaa</td>
</tr>
</table>
<div id="test"></div>
<form>
<input id="save" type="button" value="Save">aaa</input>
<input id="load" type="button" value="Load">aaa</input>
</form>
<script src="./jquery-3.2.1.min.js"></script>
<script src="./jquery.tabletoCSV.js"></script>
<script>
$(function() {
$('#save').click(function() {
$.ajax('/cgi-bin/test.py',
{
type: 'post',
data: { id: "test-id", table: $('#table').html() },
}
).done(function(data) {
$('p').text(data);
});
});
$('#load').click(function() {
$('#table').load('save-tabs/test-id.txt');
});
});
</script>
</body>
</html>
- python cgi
#!/usr/bin/python
import cgi
from datetime import datetime
print("Content-Type: text/html")
print("")
form = cgi.FieldStorage()
id = form["id"].value
content = form["table"].value
date = datetime.now().strftime("%Y%m%d-%H%M%S")
f = open("/var/www/html/jquery/save-tabs/%s.txt" % date, "w")
f.write(content)
f.close();
print "OK"
最新の20件
2023-01-26
2022-11-11
2022-03-02
2022-02-03
2021-11-18
2021-11-11
2021-10-27
2021-10-04
2021-09-30
2021-08-24
2021-04-01
2021-02-25
2020-08-13
2020-05-22
2020-04-16
2020-04-15
2020-03-23
2020-03-12
2020-02-27
今日の20件
- counter: 475
- today: 2
- yesterday: 1
- online: 1