编辑状态打开mysql表_jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据...

废话不多说了，直接给大家贴代码了。

关键代码如下所示：

/// 最近一次使用编辑行 一切正常

///

///初始化数据容器

///

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(),eval("rowData."+actid));

$("#grid").datagrid('endEdit',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,align:'center',sortable:true},

{field:'jobKind',title:'类型',width:60,align:'center',sortable:true},

{field:'requireNum',title:'人数',width:12,align:'center',sortable:true},

{field:'email',title:'邮箱',width:34,align:'center',sortable:true},

{field:'ordering',title:'排序',width:10,align:'center',sortable:true,editor:{type:'numberbox'}},

{field:'lastTime',title:'截止时间',width:40,align:'center',sortable:true},

{field:'act',title:'操作',width:40,align:'center',formatter:act}

]]

});

}

以前使用方式

///

///初始化数据容器

///

function InitGrid(){

var lastIndex;

$("#grid").datagrid({

url:'',

loadMsg:'数据加载中,请稍后......',

border:false,

fitColumns:true,

remoteSort:false,

//双击变有可编辑状态

onDblClickRow:function(rowIndex,rowData){

var oldnum = rowData.g_num;

//if(lastIndex!=rowIndex){

$("#grid").datagrid('endEdit',rowIndex);

$("#grid").datagrid('beginEdit',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,rowData.id,oldnum);

var item = result.split("||");

$(this).val(item[1]);

$("#grid").datagrid('endEdit',lastIndex);

}

});

//}

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:'id',title:'序号',width:40,align:'center',sortable:true,sorter:sortId},

{field:'g_name',title:'商品名称',width:40,align:'center',sortable:true},

{field:'gt_name',title:'所属类型',width:40,align:'center',sortable:true},

{field:'g_num',title:'库存',width:40,align:'center',sortable:true,editor:{type:'numberbox'}},

{field:'g_isnew',title:'是否新品',width:40,align:'center',sortable:true,formatter:function(val){

return val=='1'?'是':'否';

}},

{field:'g_ishot',title:'是否热品',width:40,align:'center',sortable:true,formatter:function(val){

return val=='1'?'是':'否';

}},

{field:'g_status',title:'状态',width:40,align:'center',sortable:true,formatter:status},

{field:'g_addtime',title:'添加时间',width:40,align:'center',sortable:true},

{field:'act',title:'操作',width:40,align:'center',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',

type:'post',

dataType:'text',

data:'count='+count+'&sx='+id,

async:false,

success:function(data){

result = data;

},

error:function(data){

result='error||'+oldnum;

}

});

return result;

}

以上为转载内容，以下为自己验证代码：

function _createTable(data){

//对汉字进行转码

$.each(data.data, function(i, obj){

var eventName = unescape(obj.eventName);

var levelName = unescape(obj.levelName);

obj.eventName = eventName;

obj.levelName = levelName;

});

//数据处理

var column = [

{title:'ID',field:'id',width:100,align:'left'},

{title:'级别编号',field:'levelNum',width:100,align:'left'},

{title:'级别名称',field:'levelName',width:100,align:'left',

formatter:function(data){

if(data == 'null'){

return "";

}else{

return data;

}

},editor:{type:'text'}

},

{title:'活动id',field:'eventId',width:60,align:'left',rowspan:1, hidden:true},

{title:'创建人id',field:'createUid',width:100,align:'left'},

{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',

rownumbers:true,

toolbar:[{

id:'btnmodify',

text:'修改',

iconCls:'icon-cut',

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',lastIndex);

}).bind("keypress",function(evt){

if(evt.keyCode==13){

debugger;

var dataArry = $('#'+id).datagrid('getSelections');

eventPlayer.setLevelName($(this).val(), dataArry[0].id);

$('#'+id).datagrid('endEdit',lastIndex);

}

}).focus();

lastIndex=rowIndex;

}

});

//注册分页查询方法

var p = $('#' + id).datagrid('getPager');

$pagination(p, {

onSelectPage: function(pageNumber, pageSize1){

getEventPlayerDataList();

}

});

el.data('datagridInit', 'finished');

}

以上所述是小编给大家介绍的jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据，希望对大家有所帮助,如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！