jQWidgets jqxGrid endrowedit() 方法(1)

📌 相关文章

📜 jQWidgets jqxGrid endrowedit() 方法(1)

📅 最后修改于: 2023-12-03 15:32:17.756000 🧑 作者: Mango

jQWidgets jqxGrid endrowedit() 方法

简介

endrowedit() 方法是 jQWidgets jqxGrid 组件中的一个方法。该方法用于结束当前行的编辑状态并保存已修改的数据。在 jqxGrid 组件中，用户可以通过触发行编辑事件进入行编辑模式，对表格中的数据进行修改。当完成修改后，用户需要点击保存按钮或者使用 endrowedit() 方法将修改的数据保存并退出编辑模式。

使用方法

endrowedit() 方法可以在 jqxGrid 实例中调用，它没有参数。一般情况下，调用该方法会触发 "cellendedit" 事件，并将修改的数据提交到服务器。

$("#jqxgrid").jqxGrid('endrowedit');

实例演示

下面是一个示例演示了如何使用 endrowedit() 方法结束当前行的编辑状态。

<!DOCTYPE html>
<html>
<head>
    <title>jqxGrid endrowedit() 方法示例</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css" type="text/css" />
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = generateData(10);

            // initialize the jqxGrid
            $("#jqxgrid").jqxGrid({
                source: new $.jqx.dataAdapter({
                    datatype: "array",
                    datafields: [
                        { name: 'id', type: 'number' },
                        { name: 'name', type: 'string' },
                        { name: 'age', type: 'number' },
                        { name: 'address', type: 'string' }
                ],
                localdata: data}),
                columns: [
                      { text: 'ID', datafield: 'id', width: 100 },
                      { text: 'Name', datafield: 'name', width: 250 },
                      { text: 'Age', datafield: 'age', width: 100 },
                      { text: 'Address', datafield: 'address', width: 350 }
                ],
                editable: true,
                editmode: 'click',
            });

            // handle the grid's cellendedit event
            $("#jqxgrid").on('cellendedit', function (event) {
                var args = event.args;
                var column = args.datafield;
                var value = args.value;
                var row = args.rowindex;
                var oldvalue = args.oldvalue;
                var data = $("#jqxgrid").jqxGrid('getrowdata', row);

                // save changes to the server
                $("#jqxgrid").jqxGrid('endrowedit');
            });
        });

        function generateData(rowscount) {
            // generate some random data
            var data = new Array();
            for (var i = 0; i < rowscount; i++) {
                var row = {};
                row["id"] = i + 1;
                row["name"] = "Name " + i;
                row["age"] = Math.floor(Math.random() * 100);
                row["address"] = "Address " + i;
                data[i] = row;
            }
            return data;
        }
    </script>
</head>
<body>
    <div id="jqxgrid"></div>
</body>
</html>

在上面的示例中，我们创建了一个可编辑的 jqxGrid，当用户修改表格中的数据时，会自动触发 'cellendedit' 事件，并调用 endrowedit() 方法保存修改的数据。