Question

大家好，我有一个html程序，其中我使用jQuery将项目从一个多选择列表移动到另一个列表中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title> upload </title>
</head>

<script>
$(function () { 

    function moveItems(origin, dest) {
        $(origin).find(':selected').appendTo(dest);
    }

    function moveAllItems(origin, dest) {
        $(origin).children().appendTo(dest);
    }

    $('#left').click(function () {
        moveItems('#sbTwo', '#sbOne');
    });

    $('#right').on('click', function () {
        moveItems('#sbOne', '#sbTwo');
    });

    $('#leftall').on('click', function () {
        moveAllItems('#sbTwo', '#sbOne');
    });

    $('#rightall').on('click', function () {
        moveAllItems('#sbOne', '#sbTwo');
    });
});

</script>

<body>
<div class="container">
    <h1>Large Data Generation</h1>      
</div>
 <h2>Move Items From One List to Another</h2>
    <select id="sbOne" multiple="multiple">
        <option value="1">Alpha</option>
        <option value="2">Beta</option>
        <option value="3">Gamma</option>
        <option value="4">Delta</option>
        <option value="5">Epsilon</option>
    </select>

    <select id="sbTwo" multiple="multiple">
        <option value="6">Zeta</option>
        <option value="7">Eta</option>
    </select>
    <br />
    <input type="button" id="left" value="<" />
    <input type="button" id="right" value=">" />
    <input type="button" id="leftall" value="<<" />
    <input type="button" id="rightall" value=">>" />
</body>
</html>

在这种情况下，我可以将项目从一个多重选择移到另一个，但我不想对我希望它通过csv文件读取的项目名称进行硬编码，并采用csv文件 这是csv文件：

with open("Data_Large2.csv", "rt") as f:
        reader = csv.reader(f)
        HeaderName = next(reader)
        print("HeaderName-",HeaderName)

输出：

['Asset_Id',
 'Asset Family',
 'Asset Name',
 'Location',
 'Asset Component']

这是我要代替Alpha，Beta填充的Header列名称。不存在我已获取的值有没有办法从jquery的CSV文件中获取列的标题，请帮助我提前..thnx

Answer 1

我不知道您要搜索的内容是什么，但我认为您正在从网络中读取一个csv文件，并且您还可以选择多个csv文件，为此我做了一些更改在您的程序中：注意：在这里，我将“ sbone”更改为“ sourceHeaderFields”，将“ sbTwo”更改为“ targetHeaderFields”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title> upload </title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <link href="https://bootswatch.com/4/solar/bootstrap.min.css" rel="stylesheet" type="text/css">

</head>
<script>

$(function () { 

    function moveItems(origin, dest) {
        $(origin).find(':selected').appendTo(dest);
    }

    function moveAllItems(origin, dest) {
        $(origin).children().appendTo(dest);
    }

    $('#left').click(function () {
        moveItems('#targetHeaderFields', '#sourceHeaderFields');
    });

    $('#right').on('click', function () {
        moveItems('#sourceHeaderFields', '#targetHeaderFields');
    });

    $('#leftall').on('click', function () {
        moveAllItems('#targetHeaderFields', '#sourceHeaderFields');
    });

    $('#rightall').on('click', function () {
        moveAllItems('#sourceHeaderFields', '#targetHeaderFields');
    });

    $('#populateHeaderFields').on('click', function () {

        alert("Inside populate list");

        var files = ('#source_fileName').files;
        alert("Files Count - "+ files);
    });

    $('#upload-form').on('change', function(evt) {

        var filesCount = evt.target.files.length;
        for (i = 0; i < filesCount; i++) {
            var file = evt.target.files[i];   
            if (file) {
             var reader = new FileReader();

              // Read our file to an ArrayBuffer
                reader.readAsArrayBuffer(file);

                // Handler for onloadend event.  Triggered each time the reading operation is completed (success or failure) 
                reader.onloadend = function (evt) {
                    // Get the Array Buffer
                    var data = evt.target.result;

                    // Grab our byte length
                    var byteLength = data.byteLength;

                    // Convert to conventional array, so we can iterate though it
                    var ui8a = new Uint8Array(data, 0);

                    // Used to store each character that makes up CSV header
                    var headerString = '';

                    // Iterate through each character in our Array
                    for (var i = 0; i < byteLength; i++) {
                        // Get the character for the current iteration
                        var char = String.fromCharCode(ui8a[i]);

                        // Check if the char is a new line
                        if (char.match(/[^\r\n]+/g) !== null) {

                            // Not a new line so lets append it to our header string and keep processing
                            headerString += char;

                        } else {
                            // We found a new line character, stop processing
                            break;
                        }
                    }
                    //Iterate through the list and populate the select element..
                    $.each(headerString.split(","), function(i,e){
                        $("#sourceHeaderFields").append($("<option>", {
                            text: e,
                            value: e
                        }));
                    });
                    console.log(headerString);
                    console.log("Next Read");
                };
            } else { 
              alert("Failed to load file");
            }
        }

    });
});

</script>

<body>
<div class="container">
    <h1>Large Data Generation</h1>      
</div>

<form id = "upload-form" action="{{ url_for('upload') }}" method="POST" enctype="multipart/form-data">
        <div id="file-selector">
            <p> 
                <strong>Input File: </strong>
                <input id="source_fileName" type="file" name="source_fileName" accept="csv/*" multiple >
                </p> 
        </div>

    <h2>Move Items From One List to Another</h2>
    <select id="sourceHeaderFields" multiple="multiple">
    </select>
<select id="targetHeaderFields" multiple="multiple">
</select>
<br />
    <input type="button" id="left" value="<" />
    <input type="button" id="right" value=">" />
    <input type="button" id="leftall" value="<<" />
    <input type="button" id="rightall" value=">>" />
</body>
</html>

我认为这将帮助您获得所需的东西

如何读取jquery中的csv Header列/将列表从python填充到jquery

1 个答案: