<script type="text/javascript">
$(function () {
CreateTable();
$('#tt').datagrid('statistics');//sum
});
function CreateTable() {
$('#tt').datagrid({
width: 799,
height: 250,
fitColumns: false,
nowrap: false,
collapsible: true,
collapsed: false,
singleSelect: true,
showFooter: true,
pagination: false,
columns: [[
{
field: 'ListNo', title: '序號', width: 40, editor: {
type: 'validatebox',
options: {
required: true
}
}
},
{
field: 'RoadName', title: '路名', width: 120,
editor: {
type: 'validatebox',
options: {
required: true
}
}
},
{
field: 'Start', title: '起點', width: 120, sortable: false,
editor: {
type: 'validatebox',
options: {
required: true
}
}
},
{
field: 'End', title: '終點', width: 120, sortable: false,
editor: {
type: 'validatebox',
options: {
required: true
}
}
},
{
field: 'Manhole', title: '窨井', width: 100, sortable: false,
sum:true,
editor: {//設置其爲可編輯
type: 'numberbox',//設置編輯格式
options: {
required: true//設置編輯規則屬性
}
}
},
{
field: 'Well', title: '邊井', width: 100, sortable: false,
sum: true,
editor: {//設置其爲可編輯
type: 'numberbox',//設置編輯格式
options: {
required: true//設置編輯規則屬性
}
}
},
{
field: 'Shift', title: '作業班次', width: 100, sortable: false,
editor: {//設置其爲可編輯
type: 'combobox',
options: {
valueField: 'id',
textField: 'name',
data: [{ id: '白班', name: '白班' },
{ id: '晚班', name: '晚班' }],
required: true
}
}
},
{
field: 'action', title: '操作', width: 90, align: 'center',
formatter: function (value, row, index) {
if (row.editing) {
var s = '<a href="#" οnclick="saverow(' + index + ')">保存</a> ';
var c = '<a href="#" οnclick="cancelrow(' + index + ')">取消</a>';
return s + c;
} else {
var e = '<a href="#" οnclick="editrow(' + index + ')">編輯</a> ';
var d = '<a href="#" οnclick="deleterow(' + index + ')">刪除</a>';
return e + d;
}
},sum:true
}
]],
toolbar: [
"-",{
text: '增加計劃',
iconCls: 'icon-add',
handler: addrow
}
/*, "-", {
text: '保存計劃',
iconCls: 'icon-save',
handler: saveall
}, "-",{
text: '全部取消',
iconCls: 'icon-cancel',
handler: cancelall }*/
],
onBeforeEdit: function (index, row) {
row.editing = true;
$('#tt').datagrid('refreshRow', index);
editcount++;
},
onAfterEdit: function (index, row) {
row.editing = false;
$('#tt').datagrid('refreshRow', index);
editcount--;
},
onCancelEdit: function (index, row) {
row.editing = false;
$('#tt').datagrid('refreshRow', index);
editcount--;
}
});
}
var editcount = 0;
var lastIndex;
function editrow(index) {
$('#tt').datagrid('beginEdit', index);
}
function deleterow(index) {
$.messager.confirm('確認', '是否真的刪除?', function (r) {
if (r) {
$('#tt').datagrid('deleteRow', index);
$('#tt').datagrid('statistics');
}
});
}
function saverow(index) {
$('#tt').datagrid('endEdit', index);
$('#tt').datagrid('statistics');
}
function cancelrow(index) {
$('#tt').datagrid('cancelEdit', index);
$('#tt').datagrid('statistics');
}
function addrow() {
$('#tt').datagrid('endEdit', lastIndex);
var CurIndex = $('#tt').datagrid('getRows').length + 1;
if (editcount > 0) {
$.messager.alert('警告', '當前還有' + editcount + '記錄正在編輯，不能增加記錄。');
return;
}
$('#tt').datagrid('appendRow', {
ListNo: CurIndex,
RoadName: '',
Start: '',
End: '',
Manhole: 0,
Well: 0,
Shift:'白班'
});
lastIndex = $('#tt').datagrid('getRows').length - 1;
$('#tt').datagrid('selectRow', lastIndex);
$('#tt').datagrid('beginEdit', lastIndex);
}
/*
function saveall() {
$('#tt').datagrid('acceptChanges');
}
function cancelall() {
$('#tt').datagrid('rejectChanges');
}*/
//datagrid合計擴展
$.extend($.fn.datagrid.methods, {
statistics: function (jq) {
var opt = $(jq).datagrid('options').columns;
var rows = $(jq).datagrid("getRows");
var footer = new Array();
footer['sum'] = "";
for (var i = 0; i < opt[0].length; i++) {
if (opt[0][i].sum) {
footer['sum'] = footer['sum'] + sum(opt[0][i].field) + ',';
}
}
var footerObj = new Array();
if (footer['sum'] != "") {
var tmp = '{' + footer['sum'].substring(0, footer['sum'].length - 1) + "}";
var obj = eval('(' + tmp + ')');
if (obj[opt[0][0].field] == undefined) {
footer['sum'] += '"' + opt[0][0].field + '":"<b>合計:</b>"';
obj = eval('({' + footer['sum'] + '})');
} else {
obj[opt[0][0].field] = "<b>合計:</b>" + obj[opt[0][0].field];
}
footerObj.push(obj);
}
if (footerObj.length > 0) {
$(jq).datagrid('reloadFooter', footerObj);
////test
//for (var i = 0, l = footerObj.length; i < l; i++) {
// for (var key in footerObj[i]) {
// alert(key + ':' + footerObj[i][key]);
//}
//}
}
function sum(filed) {
var sumNum = 0;
for (var i = 0; i < rows.length; i++) {
sumNum += Number(rows[i][filed]);
}
return '"' + filed + '":"' + sumNum.toFixed(0) + '"';
}
}
});
</script>
HTML代碼
<table id="tt" style="margin-top:10px;" ></table>
================================================================================================
function setTotal() { var userid = $("#hd_buildUser").val(); $("#totalSum").datagrid({ url: 'MediaPaySearchHandler.ashx?optype=CostTotal&userid=' + userid, loadMsg: '數據加載中，請稍後...', showFooter: true, columns: [[ { field: '項目', align: 'center', title: '項目', width: 160, }, { field: '已付金額', sum: 'true', align: 'right', title: '已付金額', width: 100,}, ]], onLoadSuccess: function (data) { $('#totalSum').datagrid('statistics');
//合計 }, }) } $.extend($.fn.datagrid.methods, { statistics: function (jq) { var opt = $(jq).datagrid('options').columns; var rows = $(jq).datagrid("getRows"); var footer = new Array(); footer['sum'] = ""; for (var i = 0; i < opt[0].length; i++) { if (opt[0][i].sum) { footer['sum'] = footer['sum'] + sum(opt[0][i].field, 1) + ','; } } var footerObj = new Array(); if (footer['sum'] != "") { var tmp = '{' + footer['sum'].substring(0, footer['sum'].length - 1) + "}"; var obj = eval('(' + tmp + ')'); if (obj[opt[0][0].field] == undefined) { footer['sum'] += '"' + opt[0][0].field + '":"<b>合計:</b>"';
//第0列顯示爲合計 obj = eval('({' + footer['sum'] + '})'); } else { obj[opt[0][0].field] = "<b>合計:</b>" + obj[opt[0][0].field]; } footerObj.push(obj); } if (footerObj.length > 0) { $(jq).datagrid('reloadFooter', footerObj); } function sum(filed) { var sumNum = 0; var str = ""; for (var i = 0; i < rows.length; i++) { var num = rows[i][filed]; sumNum += Number(num); } return '"' + filed + '":"' + sumNum.toFixed(2) + '"'; } } });
