0

私は良い解決策を探しています:

  • Web フォームのチェックボックスでアイテムを選択します (チェックボックスは csv を動的に読み取ります)。
  • XLS ファイルから読み取る
  • オプションで選択する列を設定する
  • 複数の列とヘッダーを持つデータグリッドにデータを配置します
  • 最終行のデータを合計します。

jqueryまたはある種のWebベースのスプレッドシートでこれを達成する簡単な解決策はありますか? どんな提案でも大歓迎です。

<!DOCTYPE html>
<html>
<head>
<script src="media/js/jquery.js" type="text/javascript"></script> 
<script src="media/js/jquery.dataTables.js" type="text/javascript"></script> 

... js table code provided in answer ...

<link href="media/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="demo"></div> 
</body>
</html>
4

1 に答える 1

0

これに対するオールインワンのソリューションがあるかどうかはわかりません。しかし、それは私がすることです。How to read data From *.CSV file using javascript?の回答を修正しました。これに jquery データテーブルのサポートを追加しました。データテーブルのヘッダーをハードコーディングしましたが、簡単に動的にすることができます。

サンプル CSV ファイル(data.txt ファイルとして保存)

heading1,heading2,heading3,heading4,heading5
value1_1,value2_1,value3_1,value4_1,value5_1
value1_2,value2_2,value3_2,value4_2,value5_2

HTML

<div id="demo"></div>    
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "data.txt",
            dataType: "text",
            success: function (data) {
                processData(data);
            }
        });


        function processData(allText) {
            var allTextLines = allText.split(/\r\n|\n/);
            var headers = allTextLines[0].split(',');
            var lines = [];

            for (var i = 1; i < allTextLines.length; i++) {
                var data = allTextLines[i].split(',');
                if (data.length == headers.length) {

                    var tarr = [];
                    for (var j = 0; j < headers.length; j++) {
                        tarr.push(data[j]);
                    }
                    lines.push(tarr);
                }
            }


            $('#demo').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');
            $('#example').dataTable({
                "aaData": lines,
                "aoColumns": [
                    { "sTitle": "heading1" },
                    { "sTitle": "heading2" },
                    { "sTitle": "heading3" },
                    { "sTitle": "heading4" },
                    { "sTitle": "heading5" }
                ]
            });


        }
    });



</script>
于 2012-10-17T00:57:35.900 に答える