Question

所以我有两个可排序列表，用户可以将项目拖出第三个列表，然后可以将该列表导出到可下载的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>

Answer 1

最大的问题是检测浏览器支持。如果您需要它来使用x-browser，您想知道哪些浏览器支持download属性。

那里有你最大的问题：为了检测它，你会回到一个保存数据的动态iframe。 IE有数据网址限制，实际上只支持图像。简而言之，会出现误报，对于那些支持它的人，会立即触发下载。

那就是说，我不相信你可以在没有检测到使用者的情况下做x浏览器。

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(',');
}

如果您对如何设置闪回后备感兴趣，请与我们联系。

jquery导出可排序列表（用户排序）到csv？

1 个答案: