📜  jQWidgets jqxGrid endcelledit() 方法(1)

📅  最后修改于: 2023-12-03 14:43:23.727000             🧑  作者: Mango

jQWidgets jqxGrid endcelledit() 方法介绍

简介

jQWidgets jqxGrid 是一款功能强大的网格控件,它提供了 endcelledit() 方法用于结束单元格编辑并将编辑的结果提交给服务器。

方法参数

endcelledit() 方法没有参数。

方法返回值

endcelledit() 方法没有返回值。

方法使用

要使用 endcelledit() 方法,需要先创建一个 jQWidgets jqxGrid 实例,并设置编辑选项。在某个单元格处编辑完成后,调用 endcelledit() 方法即可结束编辑并提交数据。

以下是一个示例:

var data = [
  { name: "John", age: 30 },
  { name: "Mary", age: 25 },
  { name: "Peter", age: 40 }
];

var source = {
  datafields: [
    { name: "name", type: "string" },
    { name: "age", type: "number" }
  ],
  datatype: "array",
  localdata: data
};

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

$("#jqxgrid").jqxGrid({
  source: dataAdapter,
  editable: true,
  columns: [
    { text: "Name", datafield: "name", width: 150 },
    { text: "Age", datafield: "age", width: 150 }
  ],
  ready: function() {
    $("#jqxgrid").on("celleditended", function(event) {
      $("#jqxgrid").jqxGrid("endcelledit", event.args.rowindex, event.args.datafield);
    });
  }
});
方法说明

在上面的示例中,我们创建了一个包含三个人员信息的数据源,并将其作为 jQWidgets jqxGrid 的数据源。我们设置了 editabletrue,以便我们可以在单元格中进行编辑。

当单元格编辑完成后,我们通过监听 celleditended 事件来调用 endcelledit() 方法,提交数据并结束编辑。

注意事项

当调用 endcelledit() 方法提交数据时,jqxGrid 控件会自动根据数据源中的字段名与编辑单元格的 datafield 属性值匹配,将新的值更新到数据源中。

总结

jQWidgets jqxGrid 提供了 endcelledit() 方法,使得程序员可以方便地结束单元格编辑并将编辑的结果提交给服务器。本文介绍了该方法的参数、返回值、使用方法以及注意事项,希望能对使用 jQWidgets jqxGrid 的程序员有所帮助。