使用jquery或javascript以csv格式導出表的選定行數據

Question

我需要以選定行的csv格式導出表數據。 現在，我能夠導出所有表數據。 我如何只導出特定的選定行？

<!DOCTYPE html>
<html>
<head>
    <title>Sorting</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style type="text/css">
        .fixed-table-loading{display: none;}
        span a{background-color: #eee;padding: 5px;}
    </style>
</head>
<body>
<div class="container">
    <span><a href="#" id="down">Download Csv</a></span>
</div>
<div class="container">
    <div class="row">
            <div class="col-xs-12">
                <table class="table table-hover" id="home-table" data-toggle="table">
                    <thead>
                        <th>
                            <input type="checkbox"  id="inp-chkbox1">
                        </th>
                        <th data-field="name" data-sortable="true">Name<span class="glyphicon glyphicon-sort"></span></th>
                        <th>Email</th>
                        <th>Phone No</th>
                        <th data-field="join-date"  data-sortable="true" data-sorter="dsSorter">Join Date<span class="glyphicon glyphicon-sort"></span>
                        <!--th data-field="join-date" data-sortable="true" data-sorter="dsSorter">Join Date<span class="glyphicon glyphicon-sort"></span-->
                        </th>
                        <th data-field="stage" data-sortable="true">Status<span class="glyphicon glyphicon-sort"></span></th>
                        <th data-field="approval" data-sortable="true">Approved<span class="glyphicon glyphicon-sort"></span></th>
                    </thead>
                    <tbody class="table-body">
                        <tr>
                            <td><input type="checkbox" class="inpchk1">
                            <td>john</td>
                            <td>john@mail.com</td>
                            <td>9999999999</td>
                            <td>20/03/2013</td>
                            <td>like</td>
                            <td>no</td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" class="inpchk1">
                            <td>duke</td>
                            <td>dk@exmail.com</td>
                            <td>8888888888</td>
                            <td>04/06/2010</td>
                            <td>dislike</td>
                            <td>yes</td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" class="inpchk1">
                            <td>pole</td>
                            <td>ple@mail.com</td>
                            <td>7777777777</td>
                            <td>20/12/2013</td>
                            <td>like</td>
                            <td>no</td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" class="inpchk1">
                            <td>bone</td>
                            <td>bn@exmail.com</td>
                            <td>1234567890</td>
                            <td>14/05/2016</td>
                            <td>like</td>
                            <td>yes</td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" class="inpchk1">
                            <td>woli</td>
                            <td>wl@exmail.com</td>
                            <td>0987654321</td>
                            <td>02/01/2015</td>
                            <td>dislike</td>
                            <td>no</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#inp-chkbox1").change(function(){
        $(".inpchk1").prop("checked",$(this).prop("checked"));
    });
});

//Extraxt CSV 

$(document).ready(function () {

    function exportTableToCSV($table, filename) {

            var $rows = $table.find('tr:has(td),tr:has(th)'),
            //var $rows = $table.filter('tr:has(:checkbox:checked)').find('tr:has(td),tr:has(th)'),

            tmpColDelim = String.fromCharCode(11),
            tmpRowDelim = String.fromCharCode(0),

            colDelim = '","',
            rowDelim = '"\r\n"',

            csv = '"' + $rows.map(function (i, row) {
                var $row = $(row), $cols = $row.find('td,th');

                return $cols.map(function (j, col) {
                    var $col = $(col), text = $col.text();

                    return text.replace(/"/g, '""');
                }).get().join(tmpColDelim);

            }).get().join(tmpRowDelim)
                .split(tmpRowDelim).join(rowDelim)
                .split(tmpColDelim).join(colDelim) + '"',

            csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);

            console.log(csv);

            if (window.navigator.msSaveBlob) { 
                window.navigator.msSaveOrOpenBlob(new Blob([csv], {type: "text/plain;charset=utf-8;"}), "csvname.csv")
            } 
            else {
                $(this).attr({ 'download': filename, 'href': csvData, 'target': '_blank' }); 
            }
    }

    $("#down").on('click', function (event) {

        exportTableToCSV.apply(this, [$('#home-table'), 'data.csv']);

    });
});
</script>
</body>
</html>

jsfiddle鏈接

Answer 1

您可以在映射包含選中輸入的rows之前對其進行過濾：

$rows
.filter((i, row) => $(row).find("td input:checked").length)
.map(function (i, row) {
  var $row = $(row), $cols = $row.find('td,th');

  return $cols.map(function (j, col) {
    var $col = $(col), text = $col.text();

    return text.replace(/"/g, '""');
  }).get().join(tmpColDelim);
})

或者，您可以只選擇包含選中輸入的行（以及標題行）：

var $rows = $table.find('tr:has(td:has(input:checked)),tr:has(th)')

使用jquery或javascript以csv格式導出表的選定行數據

問題描述

1 個解決方案

解決方案1
2 已采納 2016-10-20 23:44:37

使用jquery或javascript以csv格式導出表的選定行數據

問題描述

1 個解決方案

解決方案1 2 已采納 2016-10-20 23:44:37

解決方案1
2 已采納 2016-10-20 23:44:37