废话不多说了，直接给大家贴代码了。
关键代码如下所示：
///初始化数据容器
///
function InitGrid(){
var lastIndex;
$("#grid").datagrid({
url:'',loadMsg:'数据加载中,请稍后......',border:false,fitColumns:true,remoteSort:false,onDblClickRow:function(rowIndex,rowData){
lastIndex=rowIndex;
$("#grid").datagrid('endEdit',rowIndex);
$("#grid").datagrid('beginEdit',rowIndex);
var oldordering = rowData.ordering;
$("input.datagrid-editable-input").val(oldordering).bind("blur",function(evt){
setOrder($(this).val(),eval("rowData."+actid));
$("#grid").datagrid('endEdit',lastIndex);
}).bind("keypress",function(evt){
if(evt.keyCode==13){
setOrder($(this).val(),lastIndex);
}
}).focus();
lastIndex=rowIndex;
},frozenColumns:[[
{field:'ck',checkBox:true}
]],toolbar:[
{text:'刷新',iconCls:'icon-reload',handler:function(){
Reload();
}},{text:'添加',iconCls:'icon-add',handler:add},{text:'编辑',iconCls:'icon-edit',handler:edit},{text:'删除',iconCls:'icon-cut',handler:del},{text:'清选',iconCls:'icon-undo',handler:function(){
$("#grid").datagrid("clearSelections");
}}
],columns:[[
{field:actid,title:'序号',width:17,align:'center',sortable:true,sorter:sortId},{field:'jobName',title:'招骋职位',width:40,sortable:true},{field:'jobKind',title:'类型',width:60,{field:'requireNum',title:'人数',width:12,{field:'email',title:'邮箱',width:34,{field:'ordering',title:'排序',width:10,editor:{type:'numberBox'}},{field:'lastTime',title:'截止时间',{field:'act',title:'操作',formatter:act}
]]
});
}
以前使用方式
///初始化数据容器
///
function InitGrid(){
var lastIndex;
$("#grid").datagrid({
url:'',//双击变有可编辑状态
onDblClickRow:function(rowIndex,rowData){
var oldnum = rowData.g_num;
//if(lastIndex!=rowIndex){
$("#grid").datagrid('endEdit',rowIndex);
var num = rowData.g_num;
$("input.datagrid-editable-input").val("+");
$("input.datagrid-editable-input").bind("blur",function(evt){
var input = $(this).val()?eval($(this).val()):0;
var result = SetNum(input,rowData.id,oldnum);
var item = result.split("||");
$(this).val(item[1]);
$("#grid").datagrid('endEdit',lastIndex);
});
$("input.datagrid-editable-input").bind("keypress",function(evt){
if(evt.keyCode==13){
var input = $(this).val()?$(this).val():0;
var result = SetNum(input,lastIndex);
}
});
//}
lastIndex=rowIndex;
},columns:[[
{field:'id',{field:'g_name',title:'商品名称',{field:'gt_name',title:'所属类型',{field:'g_num',title:'库存',{field:'g_isnew',title:'是否新品',formatter:function(val){
return val=='1'?'是':'否';
}},{field:'g_ishot',title:'是否热品',{field:'g_status',title:'状态',formatter:status},{field:'g_addtime',title:'添加时间',formatter:act}
]]
});
}
///
///Ajax获取分页数据
///currPage => 当前页码
///
function GetData(currPage){
var pageSize = getPageSize();// 15;
var where=$("#where").val();
var levels=$("#pt").val();
$.ajax({
url:url+'/AjaxData',type:'post',dataType:'text',data:'currPage='+currPage+'&pageSize='+pageSize+''+'&where='+where+'&pt='+levels,beforeSend:function(){
$("#grid").datagrid("loading");
},success:function(json){
$("#grid").datagrid("loaded");
json=decodeURIComponent(json);
if(json.length<=20){
$("#grid").datagrid("loadData",{total:0,rows:[]});
return;
}
json = eval('('+json+')');
$("#grid").datagrid("loadData",json);
$("#currPage").val(currPage);
$("#pageCount").val(Math.ceil(json.total/pageSize));
$("#pageStr").html(ShortPageStr(json.total));
ShowPageBar();
},error:function(data){
alert(data.responseText);
}
});
}
///
///@desc 修改库存(出入库)
///
function SetNum(count,id,oldnum){
var result = 'error||'+oldnum;
$.ajax({
url:url+'/SetNum',data:'count='+count+'&sx='+id,async:false,success:function(data){
result = data;
},error:function(data){
result='error||'+oldnum;
}
});
return result;
}
名称',field:'levelName',align:'left',formatter:function(data){
if(data == 'null'){
return "";
}else{
return data;
}
},editor:{type:'text'}
},{title:'活动id',field:'eventId',rowspan:1,hidden:true},{title:'创建人id',field:'createUid',{title:'创建时间',field:'createDate',width:150,align:'left'}
];
var root = listToDataGrid(data);
var title = "头像列表";
_getDataGrid("eventListTable",title,'id',column).datagrid('loadData',root);
}
function _getDataGrid(id,aTitle,pk,columns){
var el = $('#' + id + '');
if (el.data('datagridInit') !== 'finished'){
var lastIndex;
el.datagrid({
columns:[columns],title:aTitle,width:1000,nowrap: false,idField:pk,rownumbers:true,striped:true,singleSelect: true,collapsible:true,sortName: 'levelNum',pagination:false,pageSize: pageSize,sortOrder: 'asc',remoteSort: false,idField:'id',toolbar:[{
id:'btnmodify',text:'修改',handler:_showDialog(id)
},'-',{
id:'btnremove',text:'删除',iconCls:'icon-cancel',handler:_removeEvent(id)
}],onDblClickCell:function(rowIndex,field,value){
lastIndex=rowIndex;
$('#'+id).datagrid('endEdit',rowIndex);
$('#'+id).datagrid('beginEdit',rowIndex);
var oldordering = value;
$("input.datagrid-editable-input").val(oldordering).bind("blur",function(evt){
debugger;
var dataArry = $('#'+id).datagrid('getSelections');
eventPlayer.setLevelName($(this).val(),dataArry[0].id);
$('#'+id).datagrid('endEdit',function(evt){
if(evt.keyCode==13){
debugger;
var dataArry = $('#'+id).datagrid('getSelections');
eventPlayer.setLevelName($(this).val(),lastIndex);
}
}).focus();
lastIndex=rowIndex;
}
});
//注册分页查询方法
var p = $('#' + id).datagrid('getPager');
$pagination(p,{
onSelectPage: function(pageNumber,pageSize1){
getEventPlayerDataList();
}
});
el.data('datagridInit','finished');
}
以上所述是小编给大家介绍的jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据，希望对大家有所帮助,如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程之家网站的支持！
原文链接：https://www.f2er.com/jquery/46587.html