// 初始化数据列表
function initDatagrid() {
$('#dg').datagrid({
loadMsg: '数据加载中请稍后……',
striped: true,
url: '/api/Attendance',
sortName: 'ID',
sortOrder: 'desc',
method: "get",
striped: true,
border: true,
selectOnCheck: false,
checkOnSelect: false,
remoteSort: true,
singleSelect: true,
idField: 'ID',
pagination: true,
rownumbers: false,
pageSize: 100, // 每页显示的记录条数,默认为100
pageList: [20, 50, 100, 200, 500], // 设置可选的每页记录条数的列表
fitColumns: true,
columns: [[
{
field: 'Num', title: "编号", width: 34, sortable: false
},
{
field: 'Employee', title: "人员", width: 64, sortable: true
},
{
field: 'Extra', title: "加班<br>(天)", width: 50, sortable: true,
// 只有添加了editor的列才是可编辑的
editor: {
type: 'numberbox',
options: {
precision: 3,
onChange: function () {
var rowIndex = getRowIndex(this);
updateEstimatedDays(rowIndex);
}
}
}
},
{
field: 'UnpaidVacate', title: "请假<br>(天)", width: 50, sortable: true,
editor: {
type: 'numberbox',
options: {
precision: 3,
onChange: function () {
var rowIndex = getRowIndex(this);
updateEstimatedDays(rowIndex);
}
}
}
},
// 此处省略部分列...
{
field: 'Year', title: "年份", width: 37, sortable: false
},
{
field: 'Month', title: "月份", width: 34, sortable: false
},
{
field: 'Remark', title: "备注", width: 260, sortable: false,
editor: {
type: 'textbox'
}
}
]],
// 添加工具栏
toolbar: [
{
text: "生成基础数据",
iconCls: "icon-add", // 定义图标样式
handler: function () {
var year = $('#queryYear').numberbox('getValue');
var month = $('#queryMonth').numberbox('getValue');
$.get('/api/Attendance?year=' + year + '&month=' + month, function (data) {
if (!data.State) {
$.messager.alert('警告', data.Data, 'info');
} else {
$('#dg').datagrid('reload');
}
});
}
},
{
text: "保存",
iconCls: "icon-save",
// 批量提交多条已修改数据到后台
handler: function () {
// 关闭最后一个当前编辑行,否则最后一行的数据不会被getChanges方法捕获到
$('#dg').datagrid('endEdit', editRow);
// 修改过的行突出显示
if (editRow > 0) {
var element = document.getElementById("datagrid-row-r1-2-" + editRow);
element.style.backgroundColor = "#d6e486";
}
// 如果有数据修改过才进行提交
if ($('#dg').datagrid('getChanges').length) {
// 获取已修改的数据
var updated = $('#dg').datagrid('getChanges', "updated");
var effectRow = new Object();
if (updated.length) {
effectRow["updated"] = JSON.stringify(updated);
}
// 后台处理数据时先显示一个提示框,防止用户多次点击【保存】重复提交数据
$.messager.progress({
title: '提示',
msg: '正在保存,请稍候……',
});
var year = parseInt($('#queryYear').numberbox('getValue'));
var month = parseInt($('#queryMonth').numberbox('getValue'));
$.ajax({
type: "put",
dataType: "json",
data: effectRow,
url: "/api/Attendance?year=" + year + "&month=" + month,
success: function (data) {
if (!data.State) {
$.messager.alert('警告', data.Data, 'info');
} else {
$('#dg').datagrid('reload');
editRow = -1;
}
$.messager.progress('close');
$('#dg').datagrid('unselectAll');
},
error: function () {
$.messager.alert('警告', data.Data, 'info');
$.messager.progress('close');
$('#dg').datagrid('unselectAll');
}
});
}
}
},
{
text: "取消",
iconCls: "icon-cancel",
handler: function () {
endEdit(editRows);
$('#dg').datagrid('reload');
$('#dg').datagrid('unselectAll');
editRow = -1;
}
}
],
onBeforeLoad: function (params) {
params.employeeID = $("#queryEmployee").combobox("getValue");
params.year = $("input[name='queryYear']").val() != "" ? $("input[name='queryYear']").val() : -1;
params.month = $("input[name='queryMonth']").val() != "" ? $("input[name='queryMonth']").val() : -1;
params.sortField = sortField;
params.sortOrder = sortOrder;
},
// 鼠标单击某一行是开启该行的编辑状态
onClickRow: function (rowIndex, rowData) {
if (canEdit == true) {
$('#dg').datagrid('endEdit', editRow);
if (rowIndex > 0) {
$('#dg').datagrid("beginEdit", rowIndex);
}
// 修改过的行突出显示
if (editRow > 0) {
var element = document.getElementById("datagrid-row-r1-2-" + editRow);
element.style.backgroundColor = "#d6e486";
}
editRows.push(rowIndex);
editRow = rowIndex;
}
}
});
}
Easyui datagrid 多行编辑
最新推荐文章于 2024-05-17 11:40:25 发布