个人中心
gpt4 book ai didi

javascript - jquery 将可排序列表(用户排序)导出到 csv？

转载 作者：行者123 更新时间：2023-11-30 00:32:58 24 4
gpt4 key购买 nike

所以我有两个可排序的列表，用户可以将项目拖出和拖入第三个列表，他们希望可以将该列表导出到可下载的 csv 文件。我有多个可选择和可排序的部分在这个 jsfiddle 上工作正常, 但现在需要包含导出到 csv 的功能。

有人可以帮忙吗？

这是我试图通过 jsfiddle 实现的截图: enter image description here到目前为止，这是我的代码:

    <html>
<meta charset="utf-8" />
<title>jQuery UI Sortable with Selectable</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
$(function() {
//

$('body').selectable({
    filter: 'li'
    //filter: '#album2 > li'
});

$('.connectedSortable').sortable({
    connectWith: ".connectedSortable",
    delay: 100,
    start: function(e, ui) {
        var topleft = 0;

        // if the current sorting LI is not selected, select
        $(ui.item).addClass('ui-selected');

        $('.ui-selected div').each(function() {

            // save reference to original parent
            var originalParent = $(this).parent()[0];
            $(this).data('origin', originalParent);

            // position each DIV in cascade
            $(this).css('position', 'absolute');
            $(this).css('top', topleft);
            $(this).css('left', topleft);
            topleft += 20;

        }).appendTo(ui.item); // glue them all inside current sorting LI

    },
    stop: function(e, ui) {
        $(ui.item).children().each(function() {

            // restore all the DIVs in the sorting LI to their original parents
            var originalParent = $(this).data('origin');
            $(this).appendTo(originalParent);

            // remove the cascade positioning
            $(this).css('position', '');
            $(this).css('top', '');
            $(this).css('left', '');
        });

        // put the selected LIs after the just-dropped sorting LI
        $('#album .ui-selected').insertAfter(ui.item);

        // put the selected LIs after the just-dropped sorting LI
        $('#album2 .ui-selected').insertAfter(ui.item);
    }
});




//
});


<style>
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#album {
    list-style: none;
    float: left;
    width: 20%;
    border: 1px solid blue;
}
#album2 {
    list-style: none;
    float: left;
    width: 20%;
    border: 1px solid blue;
}
#album li  {
    float: left;
    margin: 5px;
}

#album2 li  {
    float: left;
    margin: 5px;
}


#album div {
    width: 100px;
    height: 100px;
    border: 1px solid #CCC;

    background: #F6F6F6;    
}
#album2 div {
    width: 100px;
    height: 100px;
    border: 1px solid #CCC;

    background: #F6F6F6;    
}
#album .ui-sortable-placeholder {
    border: 1px dashed #CCC;
    width: 100px;
    height: 100px;
    background: none;
    visibility: visible !important;
}
#album2 .ui-sortable-placeholder {
    border: 1px dashed #CCC;
    width: 100px;
    height: 100px;
    background: none;
    visibility: visible !important;
}

#album .ui-selecting div, 
#album .ui-selected div {
    background-color: #3C6;
}

#album2 .ui-selecting div, 
#album2 .ui-selected div {
    background-color: #3C6;
}

#anotheralbum {
    list-style: none;
    float: left;
    width: 20%;
    height: 800px;
    border: 1px solid green;
}
</style>


<body>

<ul id="album" class="connectedSortable">
    <li id="li1"><div>1- First</div></li>
    <li id="li2"><div>2- Second</div></li>
    <li id="li3"><div>3- Third</div></li>
    <li id="li4"><div>4- Fourth</div></li>
    <li id="li5"><div>5- Fifth</div></li>
    <li id="li6"><div>6- Sixth</div></li>
    <li id="li7"><div>7- Seventh</div></li>
    <li id="li8"><div>8- Eighth</div></li>
</ul>

<ul id="album2" class="connectedSortable">
    <li id="li1"><div>1- 1</div></li>
    <li id="li2"><div>2- 2</div></li>
    <li id="li3"><div>3- 3</div></li>
    <li id="li4"><div>4- 4</div></li>
    <li id="li5"><div>5- 5</div></li>
    <li id="li6"><div>6- 6</div></li>
    <li id="li7"><div>7- 7</div></li>
    <li id="li8"><div>8- 8</div></li>
</ul>
<div id="anotheralbum" class="connectedSortable">
This is a list of what to export to csv
</div>

<br style="clear:both">
</body>
</html>

最佳答案

最大的问题是检测浏览器支持。如果你需要它在 x-browser 上工作，你想知道哪些浏览器支持 download 属性。

您最大的问题就在这里:为了检测它，您退回到保存数据的动态 iframe。 IE 有数据 url 限制，实际上只支持图像。简而言之，会出现误报，对于支持它的人，将立即触发下载。

也就是说，我不相信你可以在不检测用户代理的情况下使用 x-browser。

function addDataUri(){
    var csvData = convertJsonToCsv('<%= JsonResults %>'),
        dataUri = 'data:text/csv;charset=utf-8,' + escape(csvData),
        exportLink = $('.exportLink a');

    if (exportLink.length) {
        // if browser is unsupported, fallback to flash
        if (isIe()) {
            getDownloadify(function () {
                setupDownloadify(csvData, exportLink);
            });
        } else {
            exportLink.prop({
                href: dataUri,
                target: '_blank',
                download: 'export_' + +(new Date()) + '.csv'
            });
        }
    }
}

function convertJsonToCsv(json) {
    var objArray = json, array = JSON.parse(objArray), str = '', line, i = 0;
    for (; i < array.length; i++) {
        line = '';

        for (var index in array[i]) {
            line += array[i][index] + ',';
        }

        line.slice(0, line.length - 1);
        str += line + '\r\n';
    }

    return str;
}

因此在您的示例中，convertJsonToCsv() 应该有所不同。如评论中所述，大致如下:

function convertJQueryToCsv(){
    var arr = [];
    $.each($yourObj, function(){
        arr.push($(this).text());
    });
    return arr.join(',');
}

如果您对我如何设置 Flash 回退感兴趣，请告诉我。

关于javascript - jquery 将可排序列表(用户排序)导出到 csv？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28503653/

24 4 0
文章推荐： mysql - 警告消息不显示
文章推荐： mysql - 根据同一列的多行值获取计数
文章推荐： php - i18n Smarty 变量转换为 lang()
文章推荐： javascript - knockout -ES5 不工作
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com