关于Easyui 可编辑的数据表格中的计算
2016-08-24 17:16
232 查看
最近项目中遇到的问题,在网上找了很多资料,现在也把我遇到的问题和解决方案存下来
代码如下:
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").datagr
4000
id('endEdit', editRow);
}
if (editRow == undefined) {
$("#dk").datagrid('beginEdit', rowIndex);
editRow = rowIndex;
}
},
//在用户点击一行的时候触发
onClickRow: function (rowIndex, rowData) {
if (editRow != undefined) {
$("#dk").datagrid('endEdit', editRow);
}
}
})
代码如下:
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").datagr
4000
id('endEdit', editRow);
}
if (editRow == undefined) {
$("#dk").datagrid('beginEdit', rowIndex);
editRow = rowIndex;
}
},
//在用户点击一行的时候触发
onClickRow: function (rowIndex, rowData) {
if (editRow != undefined) {
$("#dk").datagrid('endEdit', editRow);
}
}
})
相关文章推荐
- 关于从后台获取数据List<User>转化为JSON格式在前台用easyui以表格显示
- 关于easyui-datagrid数据表格, 分页取出数据
- 关于easyui 可编辑表格使用心得
- easyui 关于编辑按钮 传数据的记录
- 使用easyui实现数据表格行内编辑以及将表中数据传到后台的一系列操作
- easyui 数据表格行内编辑(编辑、保存、删除)
- jQuery EasyUI API 中文文档 - 数据表格(DataGrid)
- 关于ITable表格的编辑要不要开启编辑流程
- gridview取编辑时模板列表格数据:出现未将对象引用设置到对象的实例
- 数据结构关于叶子的计算
- 用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
- 使用Jquery实现可编辑的表格 并使用AJAX提交到服务器修改数据
- 可编辑的table. 添加数据,修改数据。稍加修改就可以部署到ajax 动态表格中
- 关于在VFP中用表格控件浏览数据表时的分页浏览
- jQuery EasyUI API 中文文档 - 数据表格(DataGrid)
- jQuery EasyUI API 中文文档 - DataGrid数据表格
- 关于HTML数据在线编辑
- Swt/Jface tableViewer入门教程三(加入在表格上直接编辑数据)
- 关于WEB标准中使用表格存放数据的问题和单元格背景的变色
- sharepoint 关于 在数据表中编辑 share point server 2003 在数据表中编辑 未安装与 Windows SharePoint Services 兼容的数据表组件。