如何使用新数据更新 Bootgrid 选定的行

Question

我正在使用 jquery-bootgrid 位于此处。 http://www.jquery-bootgrid.com/GettingStarted

我创建了一个 bootgrid，其中有一个我想编辑的字段，所以我所做的就是在格式化程序中指定它。

 formatters: 
    {
       "fieldval": function(column, row)
        {
           return formatterForFieldval(column, row);
        }
    }
   })

函数。

 function formatterForFieldval(column, row)
{

        return '<input type="text" class="form-control" id="usr" '
           +     'value="'+row.fieldval+'"'
           +     '>' ;


}

这有效，它创建了一个我可以在运行时编辑的文本框。

现在下一步是保存修改后的数据。

我使用以下脚本获取用户修改的选定行。

  function getSelectedRowsAsJson(tableId)
{

    var selectedRowsArray =[];
    var selectedRowsJsonArray = "";

    var rows = $(tableId).bootgrid("getSelectedRows");

    var arrayLength = rows.length;

    for (var i = 0; i < arrayLength; i++) 
    {
       var rowsc = $(tableId).bootgrid("getCurrentRows");

       var arrayLengthCurrent = rowsc.length;
       for (var ii = 0; ii < arrayLengthCurrent; ii++) 
       {

           if(rows[i]===rowsc[ii].id)
           {
                selectedRowsArray.push(rowsc[ii])
           }
       }

    }

    selectedRowsJsonArray = JSON.stringify(selectedRowsArray);
    console.log(selectedRowsJsonArray);
    return selectedRowsJsonArray;

}

我的问题是 var rowsc = $(tableId).bootgrid("getCurrentRows"); 没有更新到我在文本框中输入的修改后的数据。它仍然显示我修改文本框之前的旧数据（加载的数据）。

因此，当将行数组发送到数据库时，它会更新为相同的值。

修改文本框后如何更新 var rowsc = $(tableId).bootgrid("getCurrentRows");？还是我做错了？

Answer 1

首先，根据我的经验（截至撰写本文时），getSelectedRows 仅 returns 所选列的主键。

我已经解决了你的问题。以下是您需要进行的修改： 1. 假设您的数据标识符列名称是 "pkcolumn":

function formatterForFieldval(column, row)
{
    return '<input type="text" class="form-control" id="pk' + row.pkcolumn + '" value="'+ row.fieldval + '">'; //Notice I have prefixed the id with an arbitrary litteral "pk";
}

在上面的代码片段中，我们为每一行输入赋予了唯一的 ID。

2.getSelectedRowsAsJson 应该这样重构：

function getSelectedRowsAsJson()
{
    var ids = $('#yourTableId').bootgrid('getSelectedRows');  //Here, remember that getSelectedRows only returns the values of the selected data-identifier columns (meaning, only the values of the selected pkcolumn (in this example) will be returned). 

    var myDataArray = [];   //Create an array that will store the edited objects (key-value pairs)
    $(ids).each(function (index, data) {
        var editedData = {};    //Create an object to store the selected key-value pairs that have been edited.
        editedData.key = data;
        editedData.editedValue = $('#pk' + data).val(); //so here we retrieve the value of the input whose id equals "pkxxxx". In your example above, it could be "pk35630", and so on.
        myDataArray.push(editedData);
    });

    //If myDataArray has data then proceed. Otherwise, return
    if(myDataArray.length === 0)
        return;
    //At this point, myDataArray will look like this: [{key: 'pk35630', editedValue: 'blue bla blue'}, {key: 'pk35635', editedValue: 'bla bla bla'}]
    //Next, you can use myDataArray to post it through ajax and update your database accordingly, thereafter refresh the bootgrid.

    var postdata = JSON.stringify(myDataArray);
    $.ajax({
        url: your-url,
        data: postdata,
        type: 'post'
    }).done(function (data, textStatus, jqXHR) {
        //do your own stuff. for example, refresh/reload the bootgrid.
    });
}

希望以上内容能帮助您解决问题。

如何使用新数据更新 Bootgrid 选定的行

How to update Bootgrid selected rows with new data

javascript

jquery

jquery-bootgrid