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

前端之家收集整理的这篇文章主要介绍了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(),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点击某个单元格即进入编辑状态焦点移开后保存数据,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对编程之家网站的支持

猜你在找的jQuery相关文章