<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cell Editing in DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<div style="margin: 20px 0;"></div>
<!-- 头部隐藏工具栏 -->
<div class="showcolumnTools"></div>
<!-- 中间数据表格 -->
<table id="dg_Multi_function" style="height: auto"></table>
<!-- 底部工具栏 -->
<div class="bottomTools">
<span style="float: right;">
<select id="ddlType_Shuilv" class="easyui-combobox"
data-options="editable : false,panelHeight:80">
<option value="0" selected="selected">选择税率</option>
<option value="0.03">普通税率(3%)</option>
<option value="0.17">增值税(17%)</option>
<option value="0.06">服务税(6%)</option>
</select>
<a id="buttonLoadDraft" href="javascript:FoldBill();" class="easyui-linkbutton floatRight" data-options="iconCls:'icon-save'">调入草稿</a>
<a id="buttonSaveDraft" href="javascript:AddSave(193);" class="easyui-linkbutton floatRight" data-options="iconCls:'icon-save'">存入草稿</a>
<a id="buttonSave" href="javascript:ProviderDatagrid();" class="easyui-linkbutton floatRight" data-options="iconCls:'icon-save'">保存入库</a>
</span>
</div>
<script type="text/javascript">
$.extend($.fn.datagrid.methods, {
editCell: function (jq, param) {
return jq.each(function () {
var opts = $(this).datagrid('options');
var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));
for (var i = 0; i < fields.length; i++) {
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor1 = col.editor;
if (fields[i] != param.field) {
col.editor = null;
}
}
$(this).datagrid('beginEdit', param.index);
var ed = $(this).datagrid('getEditor', param);
if (ed) {
if ($(ed.target).hasClass('textbox-f')) {
$(ed.target).textbox('textbox').focus();
} else {
$(ed.target).focus();
}
}
for (var i = 0; i < fields.length; i++) {
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor = col.editor1;
}
});
},
enableCellEditing: function (jq) {
return jq.each(function () {
var dg = $(this);
var opts = dg.datagrid('options');
opts.oldOnClickCell = opts.onClickCell;
opts.onClickCell = function (index, field) {
if (opts.editIndex != undefined) {
if (dg.datagrid('validateRow', opts.editIndex)) {
dg.datagrid('endEdit', opts.editIndex);
opts.editIndex = undefined;
} else {
return;
}
}
dg.datagrid('selectRow', index).datagrid('editCell', {
index: index,
field: field
});
opts.editIndex = index;
opts.oldOnClickCell.call(this, index, field);
}
});
},
//列显示隐藏逻辑
showHidecolumns: function (jq) {
//初次加载就把含税和大单位隐藏
$("#dg_Multi_function").datagrid('hideColumn', 'tb_ddw_hs'); //大单价（含税）
$("#dg_Multi_function").datagrid('hideColumn', 'tb_shuilv'); //税率
$("#dg_Multi_function").datagrid('hideColumn', 'tb_shuie'); //税额
$("#dg_Multi_function").datagrid('hideColumn', 'tb_dj_hs'); //单价（含税）
$("#dg_Multi_function").datagrid('hideColumn', 'tb_je_hs'); //金额（含税）
$("#dg_Multi_function").datagrid('hideColumn', 'tb_ddw_ws'); //大单价（未税）
$("#dg_Multi_function").datagrid('hideColumn', 'tb_ddw'); //大单位
$("#dg_Multi_function").datagrid('showColumn', 'tb_xdw'); //小单位
$("#dg_Multi_function").datagrid('showColumn', 'tb_dj_ws'); //单价（未税）
$("#dg_Multi_function").datagrid('showColumn', 'tb_je_ws'); //金额（未税）
var opts = $.data(jq[0], 'datagrid').options;
var dg = $(jq[0]); //获取到当前表格
var arr = opts.hidecolumns; //隐藏列
//勾选隐藏逻辑啊a[0]:表示编号，a[1]:表示名称
for (i = 0; i < arr[0].length; i++) {
$(".showcolumnTools").append('<input type="checkbox" id="' + arr[0][i] + '" /><label>' + arr[1][i] + '</label>'); //添加check元素
dg.datagrid('hideColumn', arr[0][i]); //初次加载先隐藏
//$(".showcolumnTools").append('<input type="checkbox" id="' + arr[0][i] + '" /><label>显示' + arr[1][i] + '</label>');
$("#" + arr[0][i]).click(function () {
var self = $(this);
var id = self.attr('id');
console.log(id);
if (id == 'yongdadanwei' || id == 'hanshui') {//含税，用大单位，特殊逻辑
var ddw_self = $("#yongdadanwei");//大单位check对象
var hs_self = $("#hanshui");//含税check对象
//大单位:tb_ddw,小单位:tb_xdw ,大单位（含税）:tb_ddw_hs ,大单位（未税）:tb_ddw_ws
//金额（含税）：tb_jehs ,金额（未税）:tb_je_ws ，tb_shuilv tb_shuie
if (hs_self.is(':checked') == true) { //含税+大单位
if (ddw_self.is(':checked') == true) {
//用大单位+含税（显示：大单位（含税），税率，税额；隐藏：小单位，单价（未税），金额（未税））
$("#dg_Multi_function").datagrid('showColumn', 'tb_ddw_hs');//大单价（含税）
$("#dg_Multi_function").datagrid('showColumn', 'tb_shuilv');//税率
$("#dg_Multi_function").datagrid('showColumn', 'tb_shuie');//税额
$("#dg_Multi_function").datagrid('hideColumn', 'tb_dj_hs'); //单价（含税）
$("#dg_Multi_function").datagrid('showColumn', 'tb_je_hs'); //金额（含税）
$("#dg_Multi_function").datagrid('hideColumn', 'tb_ddw_ws'); //大单价（未税）
$("#dg_Multi_function").datagrid('showColumn', 'tb_ddw');//大单位
$("#dg_Multi_function").datagrid('hideColumn', 'tb_xdw');//小单位
$("#dg_Multi_function").datagrid('hideColumn', 'tb_dj_ws');//单价（未税）
$("#dg_Multi_function").datagrid('hideColumn', 'tb_je_ws');//金额（未税）
} else {//含税+小单位
$("#dg_Multi_function").datagrid('hideColumn', 'tb_ddw_hs'); //大单价（含税）
$("#dg_Multi_function").datagrid('showColumn', 'tb_shuilv');//税率
$("#dg_Multi_function").datagrid('showColumn', 'tb_shuie');//税额
$("#dg_Multi_function").datagrid('showColumn', 'tb_dj_hs'); //单价（含税）
$("#dg_Multi_function").datagrid('showColumn', 'tb_je_hs'); //金额（含税）
$("#dg_Multi_function").datagrid('hideColumn', 'tb_ddw_ws'); //大单价（未税）
$("#dg_Multi_function").datagrid('hideColumn', 'tb_ddw');//大单位
$("#dg_Multi_function").datagrid('showColumn', 'tb_xdw');//小单位
$("#dg_Multi_function").datagrid('hideColumn', 'tb_dj_ws');//单价（未税）
$("#dg_Multi_function").datagrid('hideColumn', 'tb_je_ws');//金额（未税）
}
}
else {//不含税+大单位
if (ddw_self.is(':checked') == true) {
$("#dg_Multi_function").datagrid('hideColumn', 'tb_ddw_hs');//大单价（含税）
$("#dg_Multi_function").datagrid('hideColumn', 'tb_shuilv');//税率
$("#dg_Multi_function").datagrid('hideColumn', 'tb_shuie');//税额
$("#dg_Multi_function").datagrid('hideColumn', 'tb_dj_hs'); //单价（含税）
$("#dg_Multi_function").datagrid('hideColumn', 'tb_je_hs'); //金额（含税）
$("#dg_Multi_function").datagrid('showColumn', 'tb_ddw_ws'); //大单价（未税）
$("#dg_Multi_function").datagrid('showColumn', 'tb_ddw');//大单位
$("#dg_Multi_function").datagrid('hideColumn', 'tb_xdw');//小单位
$("#dg_Multi_function").datagrid('showColumn', 'tb_dj_ws');//单价（未税）
$("#dg_Multi_function").datagrid('showColumn', 'tb_je_ws');//金额（未税）
} else {//不含税+小单位
$("#dg_Multi_function").datagrid('hideColumn', 'tb_ddw_hs');//大单价（含税）
$("#dg_Multi_function").datagrid('hideColumn', 'tb_shuilv');//税率
$("#dg_Multi_function").datagrid('hideColumn', 'tb_shuie');//税额
$("#dg_Multi_function").datagrid('hideColumn', 'tb_dj_hs'); //单价（含税）
$("#dg_Multi_function").datagrid('hideColumn', 'tb_je_hs'); //金额（含税）
$("#dg_Multi_function").datagrid('hideColumn', 'tb_ddw_ws'); //大单价（未税）
$("#dg_Multi_function").datagrid('hideColumn', 'tb_ddw');//大单位
$("#dg_Multi_function").datagrid('showColumn', 'tb_xdw');//小单位
$("#dg_Multi_function").datagrid('showColumn', 'tb_dj_ws');//单价（未税）
$("#dg_Multi_function").datagrid('showColumn', 'tb_je_ws');//金额（未税）
}
}
} else {
self.is(':checked') == true ? $("#dg_Multi_function").datagrid('showColumn', id) : $("#dg_Multi_function").datagrid('hideColumn', id);
}
});
}
}
});
$(function () {
$('#dg_Multi_function').datagrid().datagrid('enableCellEditing');
})
//数据网格加载
$('#dg_Multi_function').datagrid({
columns: [[
{ field: 'Goods_Code', title: '编码', 80, align: 'right', halign: 'center', editor: 'text' },
{ field: 'Goods_Name', title: '名称', 150, align: 'right', halign: 'center', editor: 'text' },
{ field: 'Goods_Aear', title: '产地', 80, align: 'right', halign: 'center', editor: { type: 'numberbox', options: { precision: 2 } } },
{ field: 'tb_guige', title: '规格', 60, align: 'right', halign: 'center', editor: 'text' },
{ field: 'tb_Type', title: '型号', 60, align: 'right', halign: 'center', editor: 'text' },
{ field: 'tb_sjkc', title: '实际库存', 80, align: 'right', halign: 'center', editor: 'text' },
{ field: 'tb_ddw', title: '大单位', 50, align: 'right', halign: 'center', editor: 'text' },
{ field: 'tb_xdw', title: '小单位', 50, align: 'right', halign: 'center', editor: 'text' },
{ field: 'tb_Number', title: '数量', 50, align: 'right', halign: 'center', editor: 'text' },
{ field: 'tb_dj_ws', title: '单价(未税)', 80, align: 'right', halign: 'center', editor: 'text' },
{ field: 'tb_dj_hs', title: '单价(含税)', 80, align: 'right', halign: 'center', editor: 'text' },
{ field: 'tb_ddw_hs', title: '大单价(含税)', 100, align: 'right', halign: 'center', editor: { type: 'numberbox', options: { precision: 2 } } },
{ field: 'tb_ddw_ws', title: '大单价(未税)', 100, align: 'right', halign: 'center', editor: { type: 'numberbox', options: { precision: 2 } } },
{ field: 'tb_je_hs', title: '金额(含税)', 80, align: 'right', halign: 'center', editor: 'text' },
{ field: 'tb_je_ws', title: '金额(未税)', 80, align: 'right', halign: 'center', editor: 'text' },
{ field: 'tb_shuilv', title: '税率', 50, align: 'right', halign: 'center', editor: { type: 'numberbox', options: { precision: 2 } } },
{ field: 'tb_shuie', title: '税额', 50, align: 'right', halign: 'center', editor: 'text' },
{ field: 'tb_zhekou', title: '折扣', 50, align: 'right', halign: 'center', editor: 'text' },
{ field: 'tb_zkje', title: '折扣金额', 80, align: 'right', halign: 'center', editor: 'text' },
{ field: 'tb_jsje', title: '结算金额', 80, align: 'right', halign: 'center', editor: { type: 'numberbox', options: { precision: 2 } } },
{ field: 'tb_beizhu', title: '备注', 120, align: 'right', halign: 'center', editor: 'text' },
{ field: 'operation', title: '操作', 60, align: 'center', halign: 'center', formatter: addOperationRow },
{ field: 'yongdadanwei', title: '用大单位', hide: true },
{ field: 'hanshui', title: '含税', hide: true }
]],
showFooter: true, //尾行显示
onLoadSuccess: function (data) {
var length = $('#dg_Multi_function').datagrid('getRows').length;
for (var i = 0; i < 6 - length; i++) {
addRow();//添加空白行
}
formatMoney();
},
fixed: true,
rownumbers: true,
hidecolumns: [
['tb_guige', 'tb_Type', 'Goods_Aear', 'tb_beizhu', 'yongdadanwei', 'hanshui'],
['显示规格', '显示型号', '显示产地', '显示备注', '用大单位', '含税']]//隐藏列配置
});
//添加数据表格操作列
function addOperationRow(val, row, index) {
return '<div style="margin-top:4px"><a href="javascript:void(0);" onclick="addRow()">' +
'<img src="./Images/add.png" width="16px" height="16px" alt="添加" title="添加"/></a> ' +
'<a href="javascript:void(0);" onclick="delRow(' + index + ')">' +
'<img src="./Images/del.png" width="16px" height="16px" alt="删除" title="删除"/></a></div>';
}
$('#dg_Multi_function').datagrid('showHidecolumns'); //显示and隐藏列功能
var addRow = function () {
$('#dg_Multi_function').datagrid('appendRow', {});
};
var delRow = function (index) {
$('#dg_Multi_function').datagrid('deleteRow', index);
};
//自动求and格式化（求和列：tb_je_hs，tb_je_ws，tb_Number,tb_sjkc）
function formatMoney() {
var rows = $('#dg_Multi_function').datagrid('getRows');
var tb_je_hs_total = 0;
var tb_je_ws_total = 0;
var tb_Number_total = 0;
var tb_sjkc_total = 0;
for (var i = 0; i < rows.length; i++) {
tb_je_hs_total += isNaN(parseFloat(rows[i]["tb_je_hs"])) ? 0 : parseFloat(rows[i]["tb_je_hs"]);
tb_je_ws_total += isNaN(parseFloat(rows[i]["tb_je_ws"])) ? 0 : parseFloat(rows[i]["tb_je_ws"]);
tb_Number_total += isNaN(parseFloat(rows[i]["tb_Number"])) ? 0 : parseFloat(rows[i]["tb_Number"]);
tb_sjkc_total += isNaN(parseFloat(rows[i]["tb_sjkc"])) ? 0 : parseFloat(rows[i]["tb_sjkc"]);
}
var footRows = $('#dg_Multi_function').datagrid('getFooterRows');
footRows[0].tb_je_hs = toDecimal2(tb_je_hs_total);
footRows[0].tb_je_ws = toDecimal2(tb_je_ws_total);
footRows[0].tb_Number = tb_Number_total;
footRows[0].tb_sjkc = tb_sjkc_total;
$('#dg_Multi_function').datagrid('reloadFooter', footRows);
};
//制保留2位小数，如：2，会在2后面补上00.即2.00
function toDecimal2(x) {
var f = parseFloat(x);
if (isNaN(f)) {
return 0.00;
}
var f = Math.round(x * 100) / 100;
var s = f.toString();
var rs = s.indexOf('.');
if (rs < 0) {
rs = s.length;
s += '.';
}
while (s.length <= rs + 2) {
s += '0';
}
return s;
};
//选择税率后修改表单
$("#ddlType_Shuilv").combobox({
onSelect: function (rec) {
console.log(rec.value);
var obj = $("#dg_Multi_function").datagrid('getData').rows;
console.log(obj);
for (var i = 0; i < obj.length; i++) {
if (obj[i].Goods_Code != "" && "Goods_Code" in obj[i]) {
$("#dg_Multi_function").datagrid('updateRow', {
index: i,
row: {
tb_shuilv: rec.value
}
});
}
}
}
});
//格式化获取表单值
function ProviderDatagrid() {
console.log(11);
var obj = $("#dg_Multi_function").datagrid('getData').rows;
var str = "";
for (var i = 0; i < obj.length; i++) {
for (var j in obj[i]) {//不使用过滤
// console.log(j, ":", obj[i][j]);
if (obj[i].Goods_Code != "") {
str += obj[i][j] + ",";
}
}
str += "|";
}
console.log(str);
$("#datagridValue").val(str);
return true;
}
/* 加载测试数据star */
var ceshidata = {
total: 1,
rows: [{ Goods_Code: "", Goods_Name: "", Goods_Aear: "", tb_guige: "", tb_Type: "", tb_sjkc: "", tb_ddw: "", tb_dj_hs: "", tb_dj_ws: "", tb_xdw: "", tb_Number: "", tb_ddw_hs: "", tb_ddw_ws: "", tb_je_hs: "", tb_je_ws: "", tb_shuilv: "", tb_shuie: "", tb_zhekou: "", tb_zkje: "", tb_jsje: "", tb_beizhu: "" }],
footer: [{ Goods_Name: "总计", tb_Number: "", id: "-1" }]
};
setTimeout(function () {
$('#dg_Multi_function').datagrid('loadData', ceshidata)
}
, 100); //将数据绑定到datagrid
/* 加载测试数据end */
//列编辑功能
setTimeout(function () {
var dg = $("#dg_Multi_function");
var arrHideCol = ['tb_zhekou', 'tb_zkje', 'tb_jsje']; //隐藏折扣，折扣金额，结算金额;
for (var i = 0; i < arrHideCol.length; i++) {
dg.datagrid('hideColumn', arrHideCol[i]); //列隐藏逻辑
}
//单列编辑
dg.datagrid({
onAfterEdit: function (rowIndex, rowData, changes) {
var colname = ""; //操作的单元格key
for (var p1 in changes) {
colname = p1;
}
if (colname === "tb_Number") {//修改数目，计算金额
//console.log(changes[colname]);
var shumu = changes[colname];
var dj = 10;
var rowObj = new Object();
// rowObj.tb_Number = rowData["tb_Number"];
rowObj.tb_dj_ws = dj;
rowObj.tb_je_ws = shumu * dj;
dg.datagrid('updateRow', {
index: rowIndex,
row: rowObj
});
}
formatMoney();
}
});
}, 101);
</script>
</body>
</html>
