本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于
Panel(面板)、Resizeable(调整大小)、LinkButton(按钮)、Pageination(分页)组件。
一. 修改删除功能
//双击进入编辑状态
onDblClickRow : function (rowIndex, rowData) {
$('#save').show();
$('#redo').show();
if (obj.editRow != undefined) {
$('#box').datagrid('endEdit', obj.editRow);
}
if (obj.editRow == undefined) {
$('#box').datagrid('beginEdit', rowIndex);
obj.editRow = rowIndex;
}
},
//选中编辑
edit : function () {
var rows = $('#box').datagrid('getSelections');
if (rows.length == 1) {
$('#save').show();
$('#redo').show();
if (this.editRow != undefined) {
$('#box').datagrid('endEdit', this.editRow);
}
if (this.editRow == undefined) {
var index = $('#box').datagrid('getRowIndex', rows[0]);
$('#box').datagrid('beginEdit', index);
this.editRow = index;
}
} else {
$.messager.alert(' 警 告 ! ',' 修 改 时 需 要 或 只 能 选 择 一 行 ! ',
'warning');
}
},
//增加编号,并设置为复选按钮
{
field : 'id',
title : '编号',
sortable : true,
checkbox : true,
width : 100,
},
//选中删除
remove : function () {
var rows = $('#box').datagrid('getSelections');
if (rows.length > 0) {
$.messager.confirm('确定操作', '您确定要删除当前的记录吗?',
function (flag) {
if (flag) {
var ids = [];
for (var i = 0; i < rows.length; i ++) {
ids.push(rows[i].id);
}
console.log(ids.join(','));
}
});
} else {
$.messager.alert('警告!', '请选择要删除的记录', 'warning');
}
},