首页 > 编程 > JavaScript > 正文

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

2019-11-20 09:14:38
字体:
来源:转载
供稿:网友

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

关键代码如下所示:

/// 最近一次使用编辑行 一切正常///<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点击某个单元格即进入编辑状态焦点移开后保存数据,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表