如何让我的动态表用AJAX更新共享点列表?

时间:2016-05-16 16:11:16

标签: jquery json ajax sharepoint

我几乎已经完成了它,虽然在第一个之后它不会添加任何行。这是我的剧本:

     $('#submitdataAccounts').click(function(){
          $('#tableAc tbody tr').each(function(){


          var productType = $(".productType").val();
          var selectorNSC = $(".selectNsc").val();
          var accountNumber= $(".accountNumber").val();
          var spFirstNameVal= $(".spFirstName").val();
          var spSurnameVal = $(".spSurname").val();
          var spMobileVal = $(".spMobile").val();

    var data = {
            __metadata: { 'type': 'SP.Data.Accounts_x005f_ListListItem' },
    "OData__x0065_c91": productType,
    "tsyh": selectorNSC,
    "OData__x0075_dm6": accountNumber,
    "fddm": spFirstNameVal,
    "n72h": spSurnameVal,
    "OData__x0066_r77": spMobileVal,

       };
         $.ajax({
                   url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Accounts_List')/items",
                   method: "POST",
                                 data: JSON.stringify(data),

                            headers: { 
              "Accept": "application/json;odata=verbose", 
              "Content-Type": "application/json;odata=verbose", 
              "X-RequestDigest": $("#__REQUESTDIGEST").val(), 
            },
                   success: function (data) {
                              alert('Item added successfully');
                  },
                  error: function (error) {
                      alert("Error: "+ JSON.stringify(error));
                 }
          });

});


});  

我正在使用一个在脚本中添加了行的表,如下所示:

document.getElementById("tableAc").insertRow(-1).innerHTML ='<td class="style1a">' +
'<select name="productType" class="btn btn-default dropdown-toggle Select1" style="width:150px"><option value="" selected=""><option value="1">1</option><option value="2">2</option></select>
<div class="divhidden" ><i><br />2nd Party Surname<i/><br /><input type="text" class="form-control" style="width: 150px" /></div></td><td class="style1a"><input type="text" class="form-control" style="width: 150px"/><div class="divhidden" ><i><br />2nd Party Mobile<i/><br /><input type="text" class="form-control" style="width: 150px" /></div></td><td class="style1a"><input type="checkbox" style="width: 150px" class="checkboxAC"/></td><td><a class="btn btn-danger" onclick="SomeDeleteRowFunction(this);" ><i class="fa fa-trash-o" title="Delete" aria-hidden="true"></i><span class="sr-only">Delete</span></a></td>';

它模仿与实际表格相同的布局,因此它只是在按下AddRow按钮时复制第一行。

在我的sharepoint列表中,我只看到为我填写的行数添加了相同的第一行。

有什么想法吗?

另外,我必须指出我在每个单元格中的两个字段分别到达不同的地方

感谢

编辑:

现在看起来像这样但仍然不起作用:

             $('#submitdataAccounts').on('click',function(){
                $('table tr').each(function(){


var productType = $(this).find(".productType").val();
var selectorNSC = $(this).find(".selectNsc").val();
var accountNumber= $(this).find(".accountNumber").val();
var spFirstNameVal= $(this).find(".spFirstName").val();
var spSurnameVal = $(this).find(".spSurname").val();
var spMobileVal = $(this).find(".spMobile").val();

    var data = {
            __metadata: { 'type': 'SP.Data.Accounts_x005f_ListListItem' },
    "OData__x0065_c91": productType,
    "tsyh": selectNSC,
    "OData__x0075_dm6": accountNumber,
    "fddm": spFirstName,
    "n72h": spSurname,
    "OData__x0066_r77": spMobile,
       };
         $.ajax({
                   url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Accounts_List')/items",
                   method: "POST",
                   data: JSON.stringify(data),
                   headers: { 
              "Accept": "application/json;odata=verbose", 
              "Content-Type": "application/json;odata=verbose", 
              "X-RequestDigest": $("#__REQUESTDIGEST").val(), 
            },
                   success: function (data) {
                              alert('Item added successfully');
                  },
                  error: function (error) {
                      alert("Error: "+ JSON.stringify(error));
                 }
          });
  });

});

2 个答案:

答案 0 :(得分:1)

例如,如果您的表包含5行。

如果你写这个:$(".productType").val();

,在循环中通过所有TR元素

此JQuery将选择整个页面中具有productType类的所有元素。

但它只会返回具有此类的第一个元素的值。

但如果你这样写:$(this).find('.productType').val();

在这种情况下,$(this)表示当前的TR元素。

因此,您只能将搜索范围缩小到当前TR元素中具有productType类的元素。

要查看差异,请尝试以下代码:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
        <script>
        $(document).ready(function(){
            $('#MyButton').on('click',function(){
                $('table tr').each(function(){
                    console.log($(this).find(".mySelect").val());
                    console.log($(".mySelect").val());
                });
            });
        });
        </script>
    </head>
    <body>
        <button id="MyButton">Test</button>
        <table id="mytable">
            <tr>
                <td><select class="mySelect"><option value="a">a</option><option value="b">b</option><option value="c">c</option></select></td>
            </tr>
            <tr>
                <td><select class="mySelect"><option value="a">a</option><option value="b">b</option><option value="c">c</option></select></td>
            </tr>
            <tr>
                <td><select class="mySelect"><option value="a">a</option><option value="b">b</option><option value="c">c</option></select></td>
            </tr>
        </table>
    </body>
</html>

答案 1 :(得分:1)

您总是从循环中获取第一项。

用下面的代码替换变量赋值

var productType = $(this).find(".productType").val();
var selectorNSC = $(this).find(".selectNsc").val();
var accountNumber= $(this).find(".accountNumber").val();
var spFirstNameVal= $(this).find(".spFirstName").val();
var spSurnameVal = $(this).find(".spSurname").val();
var spMobileVal = $(this).find(".spMobile").val();

看看是否有帮助。