关于Easyui 可编辑的数据表格中的计算
来源:互联网 发布:网络暴力议论文 编辑:程序博客网 时间:2024/05/17 03:13
最近项目中遇到的问题,在网上找了很多资料,现在也把我遇到的问题和解决方案存下来
代码如下:
html:
<table id="dk"></table>
JS:
$("#dk").datagrid('endEdit', editRow);
var rows = $("#dk").datagrid('getChanges');
var $dk = $('#dk');
var editRow = undefined;
$("#dk").datagrid({
onClickRow: function (rowIndex, rowData) {
$(this).datagrid('unselectRow', rowIndex);
},
columns: [[
{ field: 'asda', title: '名称', width: 120, checkbox: true },
{
field: 'ProClassId',
title: '大类',
width: 100,
formatter: unitformatter,
editor: {
type: 'combobox',
options: {
data: productType,
valueField: 'ProClassId',
textField: 'ProClassName',
editable: false,
}
}
},
{
field: 'ProductBrand',
title: '品牌',
width: 120,
editor: {
type: 'text',
options: {
},
}
},
{ field: 'ProductName', title: '名称', width: 120, editor: { type: 'text', options: {}, } },
{ field: 'Ordercount', title: '数量', width: 60, editor: { type: 'numberbox', options: { min: 0 } } },
{ field: 'SuggestPrice', title: '建议价格', width: 80, editor: { type: 'numberbox', options: { min: 0, precision: 2 } } },
{ field: 'Orderprice', title: '实际价格', width: 80, editor: { type: 'numberbox', options: { min: 0, precision: 2 } } },
{
field: 'Subtotal', title: '小计', width: 80, editor: { type: 'numberbox', options: { min: 0, precision: 2 } }
},
{ field: 'CostPrice', title: '成本价', width: 80, editor: { type: 'numberbox', options: { min: 0, precision: 2 } } },
]],
toolbar: [{
text: '添加', iconCls: 'icon-add', handler: function () {
if (editRow != undefined) {
$("#dk").datagrid('endEdit', editRow);
}
if (editRow == undefined) {
$("#dk").datagrid('insertRow', {
index: 0,
row: {}
});
$("#dk").datagrid('beginEdit', 0);
editRow = 0;
obj = document.getElementsByName("checkbox");
var oText = document.getElementById("isd");
check_val = [];
for (k in obj) {
if (obj[k].checked)
check_val.push(obj[k].value);
}
oText.value = check_val.join(",");
}
//获取第一行 *关键代码*
var editors = $('#dk').datagrid('getEditors', 0);
var priceEditor = editors[3];
var amountEditor = editors[5];
var costEditor = editors[6];
priceEditor.target.bind('change', function () {
calculate();
});
amountEditor.target.bind('change', function () {
calculate();
});
// 计算方法
function calculate() {
var cost = priceEditor.target.val() * amountEditor.target.val();
$(costEditor.target).numberbox('setValue', cost);
}
}
},
{
text: '删除', iconCls: 'icon-remove', handler: function () {
$('#dk').datagrid('cancelEdit', editRow);
var row = $('#dk').datagrid('getSelected');
if (row) {
$.messager.confirm("警告", "你将删除一行", function (r) {
if (r) {
var rowIndex = $('#dk').datagrid('getRowIndex', row);
$('#dk').datagrid('deleteRow', rowIndex);
}
})
} else {
$.messager.alert("提示", "请先选择一行再点击删除")
}
editRow = undefined;
$('#dk').datagrid('uncheckAll');
}
}],
//在用户完成编辑一行的时候触发
onAfterEdit: function (rowIndex, rowData, changes) {
editRow = undefined;
},
//在用户双击一个单元格的时候触发。
onDblClickRow: function (rowIndex, rowData) {
if (editRow != undefined) {
$("#dk").datagrid('endEdit', editRow);
}
if (editRow == undefined) {
$("#dk").datagrid('beginEdit', rowIndex);
editRow = rowIndex;
}
},
//在用户点击一行的时候触发
onClickRow: function (rowIndex, rowData) {
if (editRow != undefined) {
$("#dk").datagrid('endEdit', editRow);
}
}
})
- 关于Easyui 可编辑的数据表格中的计算
- EasyUI-可编辑的表格
- 关于easyui 可编辑表格使用心得
- easyui 可编辑表格
- jquery-easyui 中将表格变为可编辑的
- jQuery-easyUI的使用:datagrid实现可编辑表格
- easyUI可编辑表格编辑器添加事件
- easyui可编辑表格编辑器设置值
- 可编辑的表格
- 可编辑的表格
- easyUI的可编辑树
- 可在线编辑的表格
- jquery 可编辑的表格
- jquery 可编辑的表格
- JQuery【可编辑的表格】
- 实现可编辑的表格
- 实现可编辑的表格
- JQuery可编辑的表格
- root账户远程管理
- L2-001. 紧急救援-PAT团体程序设计天梯赛GPLT(Dijkstra算法)
- 机器人走方格(dp)
- ViewPager滑动跟随的指示器
- C#封装程序集自定义类方法注释提示
- 关于Easyui 可编辑的数据表格中的计算
- window7安装mongoDB扩展
- 回溯算法经典应用之—迷宫问题 (Java)
- Linux /dev目录详解
- Quartz任务不执行问题
- Spring jackson message converter解析多余属性出错
- Eclipse 远程调试
- android手机获取手机号
- 欢迎使用CSDN-markdown编辑器