jqgrid行编辑列表中计算两列的和放在另外一列
时间: 2024-03-12 07:49:21 浏览: 110
在 jqGrid 中,可以使用 `editfunc` 属性为表格的行编辑列绑定事件,并且计算两列的和放在另外一列。代码如下:
```javascript
// 定义表格的列模型
var colModel = [
{ name: 'col1', index: 'col1', edittype: 'text', editable: true },
{ name: 'col2', index: 'col2', edittype: 'text', editable: true },
{ name: 'col3', index: 'col3', edittype: 'text', editable: false },
];
// 定义表格的编辑选项
var editOptions = {
oneditfunc: function() {
// 获取当前行的第一列和第二列的值
var col1 = parseFloat($("#" + this.id + "_col1").val());
var col2 = parseFloat($("#" + this.id + "_col2").val());
// 计算两列的和
var sum = col1 + col2;
// 将计算结果放入第三列
$("#" + this.id + "_col3").val(sum);
}
};
// 创建 jqGrid
$("#grid").jqGrid({
url: 'data.json',
datatype: 'json',
colModel: colModel,
editOptions: editOptions,
});
```
上述代码中,我们首先定义了表格的列模型,其中每一列都具有 `editable` 属性,表示该列可以编辑。然后定义了表格的编辑选项 `editOptions`,其中的 `oneditfunc` 属性指定了编辑时的事件处理函数。当用户开始编辑单元格时,该事件处理函数会被触发,我们在其中获取当前行的第一列和第二列的值,计算两列的和,并将计算结果放入第三列中。
最后,我们使用 `jqGrid()` 方法创建了 jqGrid,并指定了数据源为 `data.json`。注意,这里的 `data.json` 是一个 JSON 格式的数据文件,其中包含了表格的数据。如果需要从服务端获取数据,可以将 `url` 属性指定为服务端接口的 URL。
阅读全文