我正在努力查看在哪里收到“行数据未定义”错误？当我运行脚本并按删除按钮时。我正在使用 jqxwidgets 网格:
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>
最佳答案
您在没有正确参数的情况下调用deleterow() :)
签名:
deleterow: function (rowid, rowdata) {}
调用:
delbutton.click(function () {
$('#jqxgrid').jqxGrid('deleterow', id /* Missing argument */ );
});
您应该添加行数据作为参数。我不认为这段代码被认为是非常安全的..(无论如何都可以重写，跳过“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("");
}
如您所见，您可以通过这种方式轻松扩展参数。
关于javascript - 行数据未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11591315/