您的位置:首页 > 产品设计 > UI/UE

easyUI datagrid可编辑行JS代码片段总结

2016-06-06 11:19 405 查看
关于easyUI datagrid可编辑行在官方的demo中有具体的demo,可以参看。我这里是独立出来的JS代码片段,仅供参考。

function loadGrid() {
var toolbar = $('#datagrid')
.datagrid(
{
iconCls : 'icon-list',
title : '提交结果',
url :
'/action!getmentJsonList.jspa?',
loadMsg : '数据远程载入中,请等待...',
singleSelect : false,
pagination : true,
nowrap : true,
height : height,
striped : true,
columns : [ [
{
field : 'applyYear',
title : '年',
width : setColumnWidth(0.05),
align : 'center',
editor: {
type:'numberbox',
options:{
required : true
}
}
},
{
field : 'applyMonth',
title : '月',
width : setColumnWidth(0.05),
align : 'center',
editor: {
type:'numberbox',
options:{
required : true
}
}
},
{
field : 'target',
title : '目标量',
width : setColumnWidth(0.12),
align : 'center',
editor: {
type:'text',
options:{
min:0,
precision:0,
required : true
}
}
}
] ],
toolbar : [
"-",
{
text : '删除选择行',
iconCls : 'icon-remove',
handler : function() {
removeit();
}
},
"-",
{
text : '保存修改',
iconCls : 'icon-save',
handler : function() {
accept();
}
},
"-",
/**将以下所需要的函数依次的添加到此处即可**/],
onClickRow: onClickRow
});
// 分页控件
/*var p = $('#datagrid').datagrid('getPager');
$(p).pagination({
pageSize : 10,
pageList : [ 10, 50, 100 ],
beforePageText : '第',
afterPageText : '页    共 {pages} 页',
displayMsg : '当前显示 {from} - {to} 条记录   共 {total} 条记录'
});*/
}


var editIndex = undefined;
function endEditing(){
if (editIndex == undefined){return true}
if ($('#datagrid').datagrid('validateRow', editIndex)){
$('#datagrid').datagrid('getRows')[editIndex]['applyYear'] = applyYear;
$('#datagrid').datagrid('getRows')[editIndex]['applyMonth'] = applyMonth;
$('#datagrid').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function onClickRow(index){
if (editIndex != index){
if (endEditing()){
$('#dg').datagrid('selectRow', index)
.datagrid('beginEdit', index);
editIndex = index;
} else {
$('#dg').datagrid('selectRow', editIndex);
}
}
}
function append(){
if (endEditing()){
$('#dg').datagrid('appendRow',{status:'P'});
editIndex = $('#dg').datagrid('getRows').length-1;
$('#dg').datagrid('selectRow', editIndex)
.datagrid('beginEdit', editIndex);
}
}
function removeit(){
if (editIndex == undefined){return}
$('#dg').datagrid('cancelEdit', editIndex)
.datagrid('deleteRow', editIndex);
editIndex = undefined;
}
function accept(){
if (endEditing()){
$('#dg').datagrid('acceptChanges');
}
}
function reject(){
$('#dg').datagrid('rejectChanges');
editIndex = undefined;
}
function getChanges(){
var rows = $('#dg').datagrid('getChanges');
alert(rows.length+' rows are changed!');
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  datagrid easyui javascript