jQuery Easyui DataGrid點(diǎn)擊某個(gè)單元格即進(jìn)入編輯狀態(tài)焦點(diǎn)移開后保存數(shù)據(jù)
更新時(shí)間：2016年08月15日 10:29:49 作者：綠竹痕
這篇文章主要介紹了jQuery Easyui DataGrid點(diǎn)擊某個(gè)單元格即進(jìn)入編輯狀態(tài)焦點(diǎn)移開后保存數(shù)據(jù)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
廢話不多說了，直接給大家貼代碼了。
關(guān)鍵代碼如下所示：
/// 最近一次使用編輯行 一切正常
///<summary>
///初始化數(shù)據(jù)容器
///</summary>
function InitGrid(){
var lastIndex;
$("#grid").datagrid({
url:'',
loadMsg:'數(shù)據(jù)加載中,請(qǐng)稍后......',
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:'序號(hào)',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:'人數(shù)',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:'截止時(shí)間',width:40,align:'center',sortable:true},
{field:'act',title:'操作',width:40,align:'center',formatter:act}
]]
});
}
以前使用方式
///<summary>
///初始化數(shù)據(jù)容器
///</summary>
function InitGrid(){
var lastIndex;
$("#grid").datagrid({
url:'',
loadMsg:'數(shù)據(jù)加載中,請(qǐng)稍后......',
border:false,
fitColumns:true,
remoteSort:false,
//雙擊變有可編輯狀態(tài)
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:'序號(hào)',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:'狀態(tài)',width:40,align:'center',sortable:true,formatter:status},
{field:'g_addtime',title:'添加時(shí)間',width:40,align:'center',sortable:true},
{field:'act',title:'操作',width:40,align:'center',formatter:act}
]]
});
}
///<summary>
///Ajax獲取分頁數(shù)據(jù)
///currPage => 當(dāng)前頁碼
///</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;
}
以上為轉(zhuǎn)載內(nèi)容，以下為自己驗(yàn)證代碼：
function _createTable(data){
//對(duì)漢字進(jìn)行轉(zhuǎn)碼
$.each(data.data, function(i, obj){
var eventName = unescape(obj.eventName);
var levelName = unescape(obj.levelName);
obj.eventName = eventName;
obj.levelName = levelName;
});
//數(shù)據(jù)處理
var column = [
{title:'ID',field:'id',width:100,align:'left'},
{title:'級(jí)別編號(hào)',field:'levelNum',width:100,align:'left'},
{title:'級(jí)別名稱',field:'levelName',width:100,align:'left',
formatter:function(data){
if(data == 'null'){
return "";
}else{
return data;
}
},editor:{type:'text'}
},
{title:'活動(dòng)id',field:'eventId',width:60,align:'left',rowspan:1, hidden:true},
{title:'創(chuàng)建人id',field:'createUid',width:100,align:'left'},
{title:'創(chuàng)建時(shí)間',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;
}
});
//注冊(cè)分頁查詢方法
var p = $('#' + id).datagrid('getPager');
$pagination(p, {
onSelectPage: function(pageNumber, pageSize1){
getEventPlayerDataList();
}
});
el.data('datagridInit', 'finished');
}
以上所述是小編給大家介紹的jQuery Easyui DataGrid點(diǎn)擊某個(gè)單元格即進(jìn)入編輯狀態(tài)焦點(diǎn)移開后保存數(shù)據(jù)，希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
使用jquery選擇器如何獲取父級(jí)元素、同級(jí)元素、子元素
這篇文章主要介紹了使用jquery選擇器如何獲取父級(jí)元素、同級(jí)元素、子元素,需要的朋友可以參考下2014-05-05
JQuery異步加載無限下拉框級(jí)聯(lián)功能實(shí)現(xiàn)示例
這篇文章主要介紹了JQuery異步加載無限下拉框級(jí)聯(lián)功能的實(shí)現(xiàn),需要的朋友可以參考下2014-02-02
15款優(yōu)秀的jQuery導(dǎo)航菜單插件分享
這篇文章收集了15款優(yōu)秀的jQuery導(dǎo)航菜單插件分享給大家。jQuery 是一個(gè)非常優(yōu)秀的 JavaScript 框架，使用簡(jiǎn)單靈活，同時(shí)還有許多成熟的插件可供選擇，jQuery 讓網(wǎng)站有更好的可用性和用戶體驗(yàn)，給訪問者對(duì)網(wǎng)站留下非常好的印象。2011-07-07
jQuery插件開發(fā)發(fā)送短信倒計(jì)時(shí)功能代碼
最近項(xiàng)目開發(fā)中遇到這樣的功能:1.點(diǎn)擊按鈕的時(shí)候，可以進(jìn)行倒計(jì)時(shí)，倒計(jì)時(shí)自定義.2.當(dāng)接收短信失敗后，倒計(jì)時(shí)停止，可點(diǎn)擊重新發(fā)送短信.3.點(diǎn)擊的元素支持一般標(biāo)簽和input標(biāo)簽?？此坪軓?fù)雜其實(shí)實(shí)現(xiàn)代碼很簡(jiǎn)單，下面小編給大家分享下實(shí)現(xiàn)代碼，需要的朋友參考下吧2017-05-05
本文給大家介紹的是一款移動(dòng)端下的jQuery插件Hammer.js，他是一個(gè)開源的，輕量級(jí)的javascript庫，它可以在不需要依賴其他東西的情況下識(shí)別觸摸，鼠標(biāo)事件支持各種手機(jī)事件，比如縮放，qq左滑動(dòng)刪除，放大，旋轉(zhuǎn)等2015-07-07
利用jquery實(shí)現(xiàn)驗(yàn)證輸入的是否是數(shù)字、小數(shù)，包含保留幾位小數(shù)
本文主要介紹了利用jquery實(shí)現(xiàn)驗(yàn)證輸入的是否是數(shù)字、小數(shù)，包含保留幾位小數(shù)，代碼清晰，容易理解。有需要的朋友可以參考下2016-12-12
jQuery學(xué)習(xí)之prop和attr的區(qū)別示例介紹
prop和attr的區(qū)別你知道嗎？在本文有些不錯(cuò)的示例對(duì)兩者詳細(xì)介紹，感興趣的朋友不要錯(cuò)過2013-11-11
jQuery實(shí)現(xiàn)圖片信息的浮動(dòng)顯示實(shí)例代碼
圖片信息的浮動(dòng)顯示的效果，在網(wǎng)頁應(yīng)用中還是比較流行的，下面為大家詳細(xì)介紹下使用jquery是如何實(shí)現(xiàn)的，喜歡的朋友可以參考下2013-08-08
jQuery基礎(chǔ)的工廠函數(shù)以及定時(shí)器的經(jīng)典實(shí)例分析
下面小編就為大家?guī)硪黄猨Query基礎(chǔ)的工廠函數(shù)以及定時(shí)器的經(jīng)典實(shí)例分析。小編覺得挺不錯(cuò)的，現(xiàn)在2016-05-05
關(guān)于jquery form表單序列化的注意事項(xiàng)詳解
這篇文章主要給大家介紹了關(guān)于jquery form表單序列化的注意事項(xiàng)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08