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

我不确定是否有任何一体化解决方案。但这就是我会做的。我已经修改了如何使用 javascript 从 *.CSV 文件中读取数据的答案？并为此添加了 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 回答