Jquery 将XLS读入web数据网格_Jquery_Spreadsheet_Xls

Jquery 将XLS读入web数据网格

jquery

Jquery 将XLS读入web数据网格,jquery,spreadsheet,xls,Jquery,Spreadsheet,Xls,我正在寻找一个很好的解决方案：在web表单上的复选框中选择项目该复选框将动态读取csv 从XLS文件读取设置要在选项中选择的列将数据放入具有多个列和标题的datagrid中合计最后一行上的数据。有没有一个简单的解决方案可以通过jquery或某种基于web的电子表格来实现这一点？如有任何建议，我们将不胜感激 <!DOCTYPE html> <html> <head> <script src="media/js/jquery.js" type="

我正在寻找一个很好的解决方案：

在web表单上的复选框中选择项目该复选框将动态读取csv 从XLS文件读取设置要在选项中选择的列将数据放入具有多个列和标题的datagrid中合计最后一行上的数据。有没有一个简单的解决方案可以通过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>

我不确定是否有任何一体化的解决方案。但这就是我要做的。我修改了来自的答案，并为此添加了jquery datatable支持。我已经在datatable中硬编码了头，但是可以很容易地使其成为动态的

示例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

看看这个。谢谢你的建议。我仍然在寻找一体化的解决方案。我在执行这项任务时遇到了一些问题。它仅仅是html和文本文件吗？您必须包括DataTable jquery插件和所需的css。包含到页面中。我在代码中使用此路径为什么不设置文本的样式？图像和颜色似乎都呈现出来了。文本没有。我得仔细看看。把你完整的HTML和csv文件贴出来。我去看看。

<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>