Question

我正在使用jQuery + webservice向表中添加新行。我只是感兴趣的是用数据填充最后插入的行的好方法是什么？

我想到了三个选择：

重装整页？听起来不合逻辑
使用updatepanel？
以某种方式使用返回的成功数据集//不知道该怎么做

我感谢任何帮助

Answer 1

您希望Web服务方法返回要插入的字符串数组<td>s，或者您希望返回一个POCO，其属性将为您提供一个可以使用的JSON对象。

例如，使用字符串数组方法，如果在名为WebService.asmx的文件中有以下Web服务方法：

[WebMethod]
public static string[] GetNewRow() {
    var listOfItems = new List<string>();
    // populate the listOfItems here
    listOfItems.Add("100");
    // more here
    return listOfItems.ToArray();
}

然后假设您的页面上存在id为“table1”的表，您的jQuery可能如下所示：

$.ajax({
    async: true,
    type: 'POST',
    url: 'WebService.asmx/GetNewRow',
    data: "{}",
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function(response) {
        var $table1 = $('#table1');
        var contents = response.d; // store the returned array in a variable
        // loop through the array and build up the HTML for the new row.
        // there are much better ways to do this, but I can't think of them right now...
        var html = '';
        for (var i = 0; i < contents.length; i++) {
           html += '<td>' + contents[i] + '</td>';   
        }
        // add the new row to the table
        var $newRow = $('<tr></tr>').append(html).appendTo($table1);
    },
    error: function(msg) {
        // notify the user of the error
        // e.g. by adding it to the table with a special error class
        var $table1 = $('#table1');
        var $newRow = $('<tr></tr>').addClass('errorRow').append('<td></td>').find('td').text(msg.responseText);
        $table1.append($newRow);
    }
});

还有一堆其他方法可以做到。

注意：我的所有代码都没有经过测试，接下来几天我不会在办理登机手续。

我建议你看一下令人惊叹的Dave Ward网站http://encosia.com - 它有很多关于从.jQuery代码调用.Net中的Web服务的有用帖子。

祝你好运！

在jQuery ajax插入后呈现新表行

1 个答案: