44maru

tech_memo / JQuery

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