一、定义datagrid
<table id="grid"></table>
二、datagrid设置
重点事件:
$('#grid').datagrid({
iconCls: 'icon-forward',
fit: true,
border: false,
rownumbers: true,
striped: true,
pageList: [2, 5, 10, 30, 50, 100],
pagination: true,
toolbar: toolbar,
url: "/staff/query.action",
idField: 'id',
columns: columns,
onCancelEdit:doCanceEdit,//取消编辑行触发
onAfterEdit:doAfterEdit,//完成编辑行触发
onDblClickRow: doDblClickRow,//双击行触发
onBeforeEdit:doBeginEdit//编辑行时触发
});
三、columns设置
重点属性:
var columns = [[{
field: 'id',
checkbox: true,
}, {
field: 'name',
editor:{
type:'text',//文本类型
options: {
required: true //是必填项
}},
title: '姓名',
width: 120,
align: 'center'
},{
field: 'telephone',
editor: {
type:'numberbox',//数字类型
options: {
required: true ,//是必填项
validType:'mobile'//验证方式,mobile为自定义验证
}},
title: '手机号',
width: 120,
align: 'center'
}, {
field: 'haspda',
editor: {
type: 'checkbox', //复选框类型
options: {
on: '1', //选中时所代表的值
off: '0' //未选中时所代表的值
}
},
title: '是否有PDA',
width: 120,
align: 'center',
formatter: function (data, row, index) {
if (data == "1") {
return "有";
} else {
return "无";
}
}
}, {
field: 'deltag',
editor: {type: 'checkbox', options: {on: '0', off: '1'}},
title: '是否作废',
width: 120,
align: 'center',
formatter: function (data, row, index) {
if (data == "0") {
return "已作废";
} else {
return "正常使用"
}
}
}, {
field: 'standard',
editor:{
type:'text',//文本类型
options: {
required: true //是必填项
}},
title: '取派标准',
width: 120,
align: 'center'
}, {
field: 'station',
editor: {
type:'text',//文本类型
options: {
required: true //是必填项
}},
title: '所谓单位',
width: 200,
align: 'center'
}]];
四、toolbar设置
var toolbar = [{
id: 'button-view',
text: '查询',
iconCls: 'icon-search',
handler: doView
}, {
id: 'button-add',
text: '增加',
iconCls: 'icon-add',
handler: doAdd
}, {
id: 'button-delete',
text: '作废',
iconCls: 'icon-cancel',
handler: doDelete
}, {
id: 'button-save',
text: '还原',
iconCls: 'icon-save',
handler: doRestore
},{
id: 'button-edit',
text: '保存',
disabled:true,//行编辑控制按钮默认失效
iconCls: 'icon-save',
handler: saverow
},{
id: 'button-clear',
text: '返回',
disabled:true,//行编辑控制按钮默认失效
iconCls: 'icon-back',
handler: cancelrow
}];
五、行编辑js实现
//================================ 1 =================================
var editIndex = undefined;//全局的行编辑索引(文档中copy)
//编辑索引的记录方法(文档中copy)
function endEditing() {
if (editIndex == undefined) {
return true
}
if ($('#grid').datagrid('validateRow', editIndex)) {
var ed = $('#grid').datagrid('getEditor', {index: editIndex, field: 'productid'});
var productname = $(ed.target).combobox('getText');
$('#grid').datagrid('getRows')[editIndex]['productname'] = productname;
$('#grid').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
//================================ 2 =================================
//双击开启行编辑(文档中copy)(会触发onBeforeEdit事件)
function doDblClickRow(index) {
if (editIndex != index) {
if (endEditing()) {
$('#grid').datagrid('selectRow', index)
.datagrid('beginEdit', index);
editIndex = index;
} else {
$('#grid').datagrid('selectRow', editIndex);
}
}
}
//================================ 3 =================================
//行编辑保存按钮的功能实现
function saverow(){
//验证行编辑是否通过
var flag = $("#grid").datagrid("validateRow",editIndex);
if(!flag){
$.messager.alert("错误操作","无法通过验证的修改!请重新输入或返回","error");
return;
}
//结束行编辑(会触发onAfterEdit事件)
$('#grid').datagrid('endEdit', editIndex);
editIndex = undefined;
}
function cancelrow(){
//返回行编辑(会触发onCancelEdit事件)
$('#grid').datagrid('cancelEdit', editIndex);
editIndex = undefined;
}
//================================ 4 =================================
//onBeforeEdit事件对应函数(双击行开始行编辑触发)
function doBeginEdit() {
//行编辑按钮生效
$("#button-edit").linkbutton("enable");
$("#button-clear").linkbutton("enable");
}
//onCancelEdit事件对应函数(返回按钮结束行编辑触发)
function doCanceEdit(index,row) {
//行编辑按钮失效
$("#button-edit").linkbutton("disable");
$("#button-clear").linkbutton("disable");
}
//onAfterEdit事件对应函数(保存按钮结束行编辑并且验证通过触发)
function doAfterEdit(index,row){//row为编辑之后保存的行数据
//行编辑按钮失效
$("#button-edit").linkbutton("disable");
$("#button-clear").linkbutton("disable");
//发送ajax请求完成后台处理
$.ajax({
url: "${pageContext.request.contextPath}/staff/edit.action",
type: "post",
contentType: "application/json;charset=utf-8",
data: JSON.stringify(row)
});
}