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

前端技术 2023/09/06 JavaScript

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

关键代码如下所示：

/// 最近一次使用编辑行 一切正常
///<summary>
///初始化数据容器
///</summary>
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}
]]
});
}

以前使用方式

///<summary>
///初始化数据容器
///</summary>
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}
]]
});
}
///<summary>
///Ajax获取分页数据
///currPage => 当前页码
///</summary>
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);
}
});
}
///<summary>
///@desc 修改库存(出入库)
///</summary>
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点击某个单元格即进入编辑状态焦点移开后保存数据，希望对大家有所帮助,如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对phpstudy网站的支持！

本文地址：https://www.stayed.cn/item/17392

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案