文章/答案/技术大牛

发布

社区首页 >问答首页 >未定义rowdata

问未定义rowdata
EN

Stack Overflow用户

提问于 2012-07-21 18:16:49

回答 1查看 4.2K关注 0票数 0

我正在努力查看我在哪里得到了一个错误'rowdata is undefined'？当我运行脚本并按下delete按钮时。我正在使用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>

jquery

jqxgrid

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-07-21 21:19:22

您正在调用没有正确参数的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("");
}

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

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11591315

复制

相似问题

问未定义rowdata
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未定义rowdataEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未定义rowdata
EN