rowdata未定义

我很努力地看到我得到'rowdata未定义'的错误？当我运行我的脚本并按下删除按钮。我使用jqxwidgets格：rowdata未定义

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm

如果有人可以帮帮忙，新的用户或我怎么能在Firebug 1.9解决，我将不胜感激。我已经包含了我的代码供您检查。谢谢。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> 
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css" /> 
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqx-all.js"></script> 
    <script type="text/javascript" src="../../scripts/gettheme.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      // prepare the data 
      var source = 
      { 
       datatype: "json", 
       datafields: [ 
      { name: 'id'}, 
        { name: 'type'}, 
        { name: 'service'}, 
        { name: 'quantity'}, 
        { name: 'department'}, 
        { name: 'date', type: 'date', format: 'yyyy-MM-dd HH:mm:ss'}, 
       ], 
       url: 'data.php', 
     updaterow: function (rowid, rowdata) { 
      // synchronize with the server - send update command 
        var data = "update=true&type=" + rowdata.type + "&service=" + rowdata.service + "&quantity=" + rowdata.quantity; 
      data = data + "&department=" + rowdata.department + "&date=" + rowdata.date; 
      data = data + "&id=" + rowdata.id; 

      $.ajax({ 
       dataType: 'json', 
       url: 'data.php', 
       data: data, 
       success: function (data, status, xhr) { 
       // update command is executed. 
       //alert(rowdata); 
       } 
      });  
       }, 
     deleterow: function (rowid, rowdata) { 
      // synchronize with the server - send update command 
        var data = "delete=true&type=" + rowdata.type + "&service=" + rowdata.service + "&quantity=" + rowdata.quantity; 
      data = data + "&department=" + rowdata.department + "&date=" + rowdata.date; 
      data = data + "&id=" + rowdata.id; 

      $.ajax({ 
       dataType: 'json', 
       url: 'data.php', 
       data: data, 
       success: function (data, status, xhr) { 
       // update command is executed. 
       //alert(rowid); 
       console.log(rowid); 
       } 
      });  
       } 
      }; 

      var dataAdapter = new $.jqx.dataAdapter(source); 


      $("#jqxgrid").jqxGrid(
      { 
       source: source, 
       theme: 'classic', 
     width: 900, 
     altrows: true, 
     pageable: true, 
     sortable: true, 
     filterable: true, 
     autoheight: true, 
     pagesizeoptions: ['10', '20', '30', '40'], 
     editable: true, 
     ready: function() { 
      var button = $("<input type='button' value='Add' id='myButton'/>"); 
      button.jqxButton({ height: 20 }); 
      button.click(function() { 
      $("#jqxgrid").jqxGrid('addrow', null, []); 

      }); 
      $(".jqx-grid-pager > div:first").append(button); 

      }, 
     ready: function() { 
     //var value = $('#jqxrid').jqxGrid('deleterow', rowid); 
      var delbutton = $("<input type='button' value='Delete' id='DelButton'/>"); 
      delbutton.jqxButton({ height: 20 }); 
      delbutton.click(function() { 
      $('#jqxgrid').jqxGrid('deleterow', id); 

      }); 
      $(".jqx-grid-pager > div:first").append(delbutton); 
     }, 
       columns: [ 
      { text: 'id', editable: false, datafield: 'id', width: 100 }, 
        { text: 'Type', datafield: 'type', width: 150}, 
        { text: 'Service', datafield: 'service', width: 150 }, 
        { text: 'Quantity', datafield: 'quantity', width: 180 }, 
        { text: 'Department', datafield: 'department', width: 90 }, 
        { text: 'Date', datafield: 'date', columntype: 'datetimeinput', cellsformat: 'dd/MM/yyyy HH:mm:ss', width: 230, showCalendarButton: false } 
       ] 
      });   
     }); 
    </script> 
</head> 
<body class='default'> 
    <div id='content'> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       var theme = 'classic'; 
       // Create a jqxDateTimeInput 
       $("#jqxWidget").jqxDateTimeInput({ width: '250px', height: '25px', theme: theme, formatString: 'dd/MM/yyyy HH:mm:ss' }); 
      }); 
     </script> 
     <div id='jqxWidget'> 
     </div> 
    </div> 


    <div id="jqxgrid"></div> 
</body> 
</html>

来源

2012-07-21 user1532468

尽量将您的问题缩小为较小的代码示例，人们不太可能尝试阅读并理解您的130行代码。 – lanzz 2012-07-21 10:20:17

我以为我有？ '删除按钮'。谢谢 – user1532468 2012-07-21 10:41:59

我也加了一些关于data属性的代码;） – EricG 2012-11-26 10:09:09

你没有正确的参数调用deleterow（）:)

签名：

deleterow: function (rowid, rowdata) {}

调用：

delbutton.click(function() { 
    $('#jqxgrid').jqxGrid('deleterow', id /* Missing argument */); 
});

您应该添加rowdata作为参数。我不认为这个代码被认为是非常安全的..（它可以改写，跳过“data = data +”，见下文）。

var data = "delete=true&type=" + rowdata.type + "&service=" + rowdata.service + "&quantity=" + rowdata.quantity; 
    data = data + "&department=" + rowdata.department + "&date=" + rowdata.date; 
    data = data + "&id=" + rowdata.id;

可以按如下方式获得行（ 你应该要求确认，第一！）：

delbutton.click(function() { 

    var rows = $('#grid').jqxGrid('getrows'), 
     selectedRowIndex = $('#grid').jqxGrid('getselectedrowindex'), 
     selectedRow = rows[ selectedRowIndex ]; 

    if(confirm("Are you sure you wish to delete the row with index '" + selectedRowIndex + "'?") { 

     $('#jqxgrid').jqxGrid('deleterow', selectedRowIndex, selectedRow); 
    } 
});

这将是更具可读性和可用性：

var data = [ 
    "delete=",  "true", 
    "&type=",  rowdata.type, 
    "&service=", rowdata.service, 
    "&quantity=", rowdata.quantity, 
    "&department=", rowdata.department, 
    "&date=",  rowdata.date, 
    "&id=",   rowdata.id 
].join("");

其实我觉得有以下可能使它更复杂和更容易出错，而且更容易使用：

// Another solution 
var customDataProperties = { 
    "delete": "true" 
    // ,"another": 2 
} 

var rowdataProperties = [ 
    "type", 
    "service", 
    "quantity", 
    "department", 
    "date", 
    "id" 
]; 

function getData(rowdataObject) { 
    // Add additional 
    var data = []; 

    function createParameterSetString(property, value) { 

     return [ "&", property, "=", value ].join(""); 
    } 

    for(var propertyName in customDataProperties) { 
     data.push(createParameterSetString(propertyName, customDataProperties[ propertyName ])); 
    } 

    for(var i = 0, ln = rowdataProperties.length; i < ln; i++) { 
     var property = rowdataProperties[i]; 
     data.push(createParameterSetString(property, rowdataObject[ property ])); 
    } 

    if(data.length != 0) { data.pop(0); } 

    return data.join(""); 
}

正如你所看到的，你可以轻松地扩展参数这种方式。

来源

2012-07-21 13:19:22 EricG

回答

相关问题