Question

我是HandsOnTable的新手

我有一个页面可以将MySQL数据库表中的数据加载到网格中。我还有一个功能，可以在单击“已保存”按钮时将任何已更改的数据保存回数据库。这个si工作正常，直到我添加重新排列列和行的能力。如果我拖动列或行，数据仍然保存，但重新排列的顺序将丢失。

例如下面：

当前网格：

FirstName | MI | Lastname | City
----------------------------------------
John      |    | Smith    | Los Angeles
----------------------------------------
Joe       | Q  | Public   | New Year

拖动City成为第一列后，我希望如此：

City         |  FirstName | MI | Lastname 
----------------------------------------
Los Angeles  |  John      |    | Smith    
----------------------------------------
New Year     |  Joe       | Q  | Public

实际结果：

City         |  FirstName        | MI     | Lastname |   
--------------------------------------------------------
Smith        |  Los Angeles      | John   | Smith    |  
--------------------------------------------------------
Public       |  New Year         |  Joe   | Q        | Public

代码：

//Create HOT placeholder table
var placeholder = [
  ["", "", "", "", "", "", "", ""],
  ["", "", "", "", "", "", "", ""],
  ["", "", "", "", "", "", "", ""],
  ["", "", "", "", "", "", "", ""],
  ["", "", "", "", "", "", "", ""],
  ["", "", "", "", "", "", "", ""],
  ["", "", "", "", "", "", "", ""],
  ["", "", "", "", "", "", "", ""]
]; 
var container = document.getElementById('hot_container');
var hot = new Handsontable(container, 
{
    startRows: 8,
    startCols: 8,
    minRows: 8,
    minCols: 8,
    rowHeaders: true,
    colHeaders: true,
    renderAllRows: true,
    filters: true,
    dropdownMenu: true,
    persistentState : true,
    manualColumnResize: true,
    manualRowResize: true,
    manualColumnMove: true,
    manualRowMove: true,
    colHeaders: ["First Name", "Mi", "Last Name", "City"]
});     

//Replace placeholder with existing data if available
loadContent(script);

//Ajax call to retrieve table data from the database and load into HOT table
function loadContent(script)
{
    //alert("here!");

    $.ajax(
    {
        url: script,
        dataType: 'json',
        asynch: false,
        success: function(result)
        {

            //Set up empty array to hold table cell values later
            var table_array = [];   


            //These are all of the cell values in string form
            arr = result.split('],');


            //Convert cell string to multidimensional array
            var i = 0;
            $.each(arr, function( key, value ) 
            {
                //strip out brackets and quotes
                value = value.replace("[[", "");
                value = value.replace("[", "");
                value = value.replace("]]", "");
                value = value.replace("]", "");
                value = value.replace('"', "");

                //Cycle through each value and split at the comma to get subvalues
                //And then iterate through each subvalue and add to array
                table_array[i] = [];
                var v = value.split(",");
                $.each(v, function( key, value )
                {
                    value = value.replace('"', '');
                    value = value.replace("'", '');
                    if(value == '"')
                        value = null;

                    table_array[i][key] = value;
                });

                //Increment counter
                i = i+1;
            }); 

            //alert(table_array);
            hot.loadData(table_array);
        }

    }); 
}


//When save button is clicked, save table changes
$("#save_tracker").click(function()
{       
    //URL for ajax call
    var script = [url goes here]
    //Get existing content
    var data = hot.getData();


    //Ajax call to save data to database
    $.ajax(
    {
        type: 'POST',
        url: script,
        data: {table: JSON.stringify(data)},
        success: function(result){
            var response = result.response;
            //alert(result);
            //alert(response);
        }
    }); 
});

数据库中的数据保存在数组的字符串化版本中。示例：[[“abc”，“def”，“xyz”]，[“kkk”，“hhh”，“”]]

我正在审核文档。我认为这可以通过onchange钩子完成，但我仍然不清楚。任何帮助将不胜感激。

HandsonTable - 保存重新排列的列和行顺序

0 个答案: