javascript - 数据绑定(bind)到客户端的 gridview

Question

我正在尝试将数据绑定(bind)到客户端的gridview。下面是我尝试过的js。它可以工作，但是第二次单击按钮时，所有行的值都会更改。

function databind(response) {
        var xmlDoc = $.parseXML(response);
        var xml = $(xmlDoc);
        var Positions = xml.find("Table");
        var row = $("[id*=gridview] tr:last-child");
        $("[id*=gridview] tr").not($("[id*=gridview] tr:first-child")).remove();
        $.each(Positions, function () {
            var Position = $(this);
              $("td", row).eq(0).html('<a id="lkedit" style="font-weight:bold;text-decoration:underline;cursor:pointer;color:Blue; ">Edit</a>');
              $("td", row).eq(1).html('<a id="lkdelete" onclick="SingleDel(this)" style="font-weight:bold;text-decoration:underline;cursor:pointer;color:Blue; ">Delete</a>');

              $("td", row).eq(2).html('<input type="checkbox" onclick="javascript:Selectchildcheckboxes();" id="chkRow"/>');
              $("td", row).eq(3).html('<span id="lblpfid">'+Position.find("pfid").text()+'<span/>');

              $("td", row).eq(4).html('<span id="lblpfname">'+Position.find("pfname").text()+'<span/>');

              $("td", row).eq(5).html('<span id="lblposid">'+Position.find("positionid").text()+'<span/>');

              $("td", row).eq(6).html('<span id="lbldisposid">'+Position.find("disposid").text()+'<span/>');//DataItem.disposid
              $("td", row).eq(7).html('<span id="lbltype">'+Position.find("type").text()+'<span/>');      //type

              $("td", row).eq(8).html('<span id="lblcur">'+Position.find("ccy").text()+'<span/>');     //ccy
           $("[id*=gridview]").append(row);
           row = $("[id*=gridview] tr:last-child").clone(true);
        });
}

页面加载时，一个空行将添加到网格中。

我的page_load方法是，

 Sub Page_load()
      BindDummyRow
 End Sub
 Private Sub BindDummyRow()
    Dim dummy As New DataTable()

    dummy.Columns.Add("pfid")
    dummy.Columns.Add("pfname")
    dummy.Columns.Add("positionid")
    dummy.Columns.Add("disposid")
    dummy.Columns.Add("type")
    dummy.Columns.Add("ccy")
    dummy.Rows.Add()
    gridview.DataSource = dummy
    gridview.DataBind()
End Sub

我不知道错误发生在哪里。

Answer 1

进行如下更改。 您已经说过添加了额外的行，因为克隆了最后一个子项。因此将 last-child 更改为 last.command 最后一行。

function databind(response) {
    var xmlDoc = $.parseXML(response);
    var xml = $(xmlDoc);
    var Positions = xml.find("Table");
    var row = $("[id*=gridview] tr:last"); 
    $("[id*=gridview] tr").not($("[id*=gridview] tr:first-child")).remove();
    $.each(Positions, function () {
        var Position = $(this);
          $("td", row).eq(0).html('<a id="lkedit" style="font-weight:bold;text-decoration:underline;cursor:pointer;color:Blue; ">Edit</a>');
          $("td", row).eq(1).html('<a id="lkdelete" onclick="SingleDel(this)" style="font-weight:bold;text-decoration:underline;cursor:pointer;color:Blue; ">Delete</a>');

          $("td", row).eq(2).html('<input type="checkbox" onclick="javascript:Selectchildcheckboxes();" id="chkRow"/>');
          $("td", row).eq(3).html('<span id="lblpfid">'+Position.find("pfid").text()+'<span/>');

          $("td", row).eq(4).html('<span id="lblpfname">'+Position.find("pfname").text()+'<span/>');

          $("td", row).eq(5).html('<span id="lblposid">'+Position.find("positionid").text()+'<span/>');

          $("td", row).eq(6).html('<span id="lbldisposid">'+Position.find("disposid").text()+'<span/>');//DataItem.disposid
          $("td", row).eq(7).html('<span id="lbltype">'+Position.find("type").text()+'<span/>');      //type

          $("td", row).eq(8).html('<span id="lblcur">'+Position.find("ccy").text()+'<span/>');     //ccy
       $("[id*=gridview]").append(row);
      // row = $("[id*=gridview] tr:last-child").clone(true);
    });
}