最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - tabulator issue with importing and exporting data when using a handle for moveable rows - Stack Overflow

programmeradmin2浏览0评论

I am using table.download to export and table.import for saving and retrieving the data to my table. All is well until I utilize

moveableRows: true,
rowHeader:{headerSort:false, rowHandle: true, formatter:"handle"},

It's only when using the handle that shows with 'formatter: "handle"' AND try and import that I run into issues. I can still move the rows without the handle and all is OK, but I like the handle on the left side of the row, and it appears to be the use of the handle configuration that causes errors when reading a csv file into the table.

The actual error I am seeing is that the first field in the rows is missing when the csv data is read into the table.

Any pointers would be appreciated.

My setup is below;

var tableCues = new Tabulator("#cueTable", {
    rowHeight: 30,
    movableRows: true,
    rowHeader:{headerSort:false, resizable: false, minWidth:30, width:30, rowHandle:true, formatter:"handle"},
    selectableRows: true,
    placeholder: "Awaiting Data, Please Load File",
            columns: [
            { title: "Name", field: "name", width: 150, editor:"input" },
            { title: "Item", field: "item", editor:"input"},
            { title: "ABS Move", field: "absmove", editor:"input"},
            { title: "Speed", field: "speed", editor: "input"},
            { title: "Accel", field: "accell", editor: "input"},
            { title: "Decel", field: "decel", editor: "input"},
            { title: "Position", field: "posnow", editor: "input"},
            { title: "Progress", field: "progress", formatter: "progress", sorter: "number" },
            { title: "Done", field: "car", hozAlign: "center", editor: true, formatter:
                "tickCross", formatterParams: { crossElement: false },
                headerSort: false, editable: true },
            { formatter:"buttonCross", align:"center", title:"del", headerSort:false, cellClick:function(e, cell){
                if(confirm('Are you sure you want to delete this entry?'))
                cell.getRow().delete();
                }
            }


            ],


});

//trigger download of data.csv file
document.getElementById("download-csv").addEventListener("click", function(){
    tableCues.download("csv", "data.csv");
    });

//trigger AJAX load on "Load Data via AJAX" button click
document.getElementById("file-load-trigger").addEventListener("click", function () {
    tableCues.import("csv", "buffer");
});

Update: I can get the csv file to load properly if I start each line with a blank field - two quotes and a comma - or if set autoColumns to true (in which case I lose other formatting ability). Now I will attempt to find how I can get the table.download function to add an extra empty field...

I am using table.download to export and table.import for saving and retrieving the data to my table. All is well until I utilize

moveableRows: true,
rowHeader:{headerSort:false, rowHandle: true, formatter:"handle"},

It's only when using the handle that shows with 'formatter: "handle"' AND try and import that I run into issues. I can still move the rows without the handle and all is OK, but I like the handle on the left side of the row, and it appears to be the use of the handle configuration that causes errors when reading a csv file into the table.

The actual error I am seeing is that the first field in the rows is missing when the csv data is read into the table.

Any pointers would be appreciated.

My setup is below;

var tableCues = new Tabulator("#cueTable", {
    rowHeight: 30,
    movableRows: true,
    rowHeader:{headerSort:false, resizable: false, minWidth:30, width:30, rowHandle:true, formatter:"handle"},
    selectableRows: true,
    placeholder: "Awaiting Data, Please Load File",
            columns: [
            { title: "Name", field: "name", width: 150, editor:"input" },
            { title: "Item", field: "item", editor:"input"},
            { title: "ABS Move", field: "absmove", editor:"input"},
            { title: "Speed", field: "speed", editor: "input"},
            { title: "Accel", field: "accell", editor: "input"},
            { title: "Decel", field: "decel", editor: "input"},
            { title: "Position", field: "posnow", editor: "input"},
            { title: "Progress", field: "progress", formatter: "progress", sorter: "number" },
            { title: "Done", field: "car", hozAlign: "center", editor: true, formatter:
                "tickCross", formatterParams: { crossElement: false },
                headerSort: false, editable: true },
            { formatter:"buttonCross", align:"center", title:"del", headerSort:false, cellClick:function(e, cell){
                if(confirm('Are you sure you want to delete this entry?'))
                cell.getRow().delete();
                }
            }


            ],


});

//trigger download of data.csv file
document.getElementById("download-csv").addEventListener("click", function(){
    tableCues.download("csv", "data.csv");
    });

//trigger AJAX load on "Load Data via AJAX" button click
document.getElementById("file-load-trigger").addEventListener("click", function () {
    tableCues.import("csv", "buffer");
});

Update: I can get the csv file to load properly if I start each line with a blank field - two quotes and a comma - or if set autoColumns to true (in which case I lose other formatting ability). Now I will attempt to find how I can get the table.download function to add an extra empty field...

Share Improve this question edited Jan 18 at 15:12 David Banning asked Jan 18 at 4:27 David BanningDavid Banning 131 silver badge3 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 0

So here is my work-around. Before I download to a csv file, I add a column, and following the save, I make the column invisible. If I save again the same data it does not add another column, probably because the column is the same name.

Solution is not ideal but unless someone can come up with something cleaner, it works! Code for download change is below;

document.getElementById("download-csv").addEventListener("click", function(){
    tableCues.addColumn({title:"id", field:"id"},true);
    tableCues.download("csv", "data.csv");
    tableCues.hideColumn("id");
    });

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论