jQuery Easyui DataGrid點(diǎn)擊某個(gè)單元格即進(jìn)入編輯狀態(tài)焦點(diǎn)移開后保存數(shù)據(jù)
廢話不多說了,直接給大家貼代碼了。
關(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:'庫(kù)存',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獲取分頁(yè)數(shù)據(jù) ///currPage => 當(dāng)前頁(yè)碼 ///</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 修改庫(kù)存(出入庫(kù)) ///</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è)分頁(yè)查詢方法 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-05JQuery異步加載無限下拉框級(jí)聯(lián)功能實(shí)現(xiàn)示例
這篇文章主要介紹了JQuery異步加載無限下拉框級(jí)聯(lián)功能的實(shí)現(xiàn),需要的朋友可以參考下2014-02-0215款優(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-07jQuery插件開發(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利用jquery實(shí)現(xiàn)驗(yàn)證輸入的是否是數(shù)字、小數(shù),包含保留幾位小數(shù)
本文主要介紹了利用jquery實(shí)現(xiàn)驗(yàn)證輸入的是否是數(shù)字、小數(shù),包含保留幾位小數(shù),代碼清晰,容易理解。有需要的朋友可以參考下2016-12-12jQuery學(xué)習(xí)之prop和attr的區(qū)別示例介紹
prop和attr的區(qū)別你知道嗎?在本文有些不錯(cuò)的示例對(duì)兩者詳細(xì)介紹,感興趣的朋友不要錯(cuò)過2013-11-11jQuery實(shí)現(xiàn)圖片信息的浮動(dòng)顯示實(shí)例代碼
圖片信息的浮動(dòng)顯示的效果,在網(wǎng)頁(yè)應(yīng)用中還是比較流行的,下面為大家詳細(xì)介紹下使用jquery是如何實(shí)現(xiàn)的,喜歡的朋友可以參考下2013-08-08jQuery基礎(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