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


Posted in Javascript onAugust 15, 2016

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

关键代码如下所示:

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

Javascript 相关文章推荐
javascript 常用关键字列表集合
Dec 04 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
Sep 27 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
微信小程序 页面跳转如何实现传值
Apr 05 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 #Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 #Javascript
关于动态执行代码(js的Eval)实例详解
Aug 15 #Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
Aug 15 #Javascript
对js eval()函数的一些见解
Aug 15 #Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
Aug 15 #Javascript
js HTML5 Canvas绘制转盘抽奖
Sep 13 #Javascript
You might like
php按百分比生成缩略图的代码分享
2014/05/10 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
Python基类函数的重载与调用实例分析
2015/01/12 Python
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
linux 下selenium chrome使用详解
2020/04/02 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
医学生职业规划范文
2014/01/05 职场文书
面试后感谢信
2014/02/01 职场文书
父亲的菜园教学反思
2014/02/13 职场文书
五水共治捐款倡议书
2014/05/14 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
go开发alertmanger实现钉钉报警
2021/07/16 Golang