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实现在标题栏上显示当前日期的方法
Mar 19 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
jQuery焦点图插件SaySlide
Dec 21 Javascript
最常见和最有用的字符串相关的方法详解
Feb 06 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 Javascript
详解基于angular-cli配置代理解决跨域请求问题
Jul 05 Javascript
使用JavaScript中的lodash编写双色球效果
Jun 24 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 Javascript
微信小程序swiper禁止用户手动滑动代码实例
Aug 23 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 Javascript
解决Vue大括号字符换行踩的坑
Nov 09 Javascript
ES2020让代码更优美的运算符 (?.) (??)
Jan 04 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的正则处理函数总结分析
2008/06/20 PHP
url decode problem 解决方法
2011/12/26 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
2017/06/13 Javascript
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
js实现导航跟随效果
2018/11/17 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
jquery添加div实现消息聊天框
2020/02/08 jQuery
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
python运行其他程序的实现方法
2017/07/14 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
基于python使用tibco ems代码实例
2019/12/20 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
《美丽的公鸡》教学反思
2014/02/25 职场文书
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
企业形象策划方案
2014/05/29 职场文书
2014年学校工作总结
2014/11/20 职场文书
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
pandas中对文本类型数据的处理小结
2021/11/01 Python
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL