JQuery Easyui DataGrid click a cell to enter the editing status. After the focus is removed, save the data. jqueryeasyui

JQuery Easyui DataGrid click a cell to enter the editing status. After the focus is removed, save the data. jqueryeasyui

If you don't talk much about it, You can directly post code to everyone.

The key code is as follows:

/// The last time you used the edit row, everything was normal. /// <summary> // initialize the data container // </summary> function InitGrid () {var lastIndex; $ ("# grid "). datagrid ({url: '', loadMsg: 'loading data. Please wait ...... ', border: false, fitColumns: true, remoteSort: false, onDblClickRow: function (rowIndex, rowData) {lastIndex = rowIndex; $ ("# grid "). datagrid ('enabled', rowIndex); $ ("# grid "). datagrid ('ineinedit ', rowIndex); var oldordering = rowData. ordering; $ ("input. datagrid-editable-input "). val (oldordering ). bind ("blur", function (evt) {setOrder ($ (this ). val (), eval ("rowData. "+ actid); $ (" # grid "). datagrid ('enabled', lastIndex );}). bind ("keypress", function (evt) {if (evt. keyCode = 13) {setOrder ($ (this ). val (), eval ("rowData. "+ actid); $ (" # grid "). datagrid ('enabled', lastIndex );}}). focus (); lastIndex = rowIndex;}, frozenColumns: [[{field: 'ck ', checkbox: true}], toolbar: [{text: 'refresh', iconCls: 'icon-reload', handler: function () {reload () ;},{ text: 'add', iconCls: 'icon-add', handler: add }, {text: 'edit', iconCls: 'icon-edit', handler: edit}, {text: 'delete', iconCls: 'icon-cut ', handler: del }, {text: 'select', iconCls: 'icon-undo ', handler: function () {$ ("# grid "). datagrid ("clearSelections") ;}}], columns: [{field: actid, title: 'sequence number ', width: 17, align: 'center', sortable: true, sorter: sortId}, {field: 'jobname', title: 'recruitment position ', width: 40, align: 'center', sortable: true}, {field: 'jobkind', title: 'type', width: 60, align: 'center', sortable: true}, {field: 'requnum num', title: 'number', width: 12, align: 'center', sortable: true}, {field: 'email ', title: 'mailbox', width: 34, align: 'center', sortable: true}, {field: 'ordering', title: 'sort', width: 10, align: 'center', sortable: true, editor: {type: 'numberbox' }}, {field: 'lasttime', title: 'cutoff time', width: 40, align: 'center', sortable: true}, {field: 'act', title: 'operation', width: 40, align: 'center', formatter: act}]});}

Previous usage

/// <Summary> /// initialize the data container // </summary> function InitGrid () {var lastIndex; $ ("# grid "). datagrid ({url: '', loadMsg: 'loading data. Please wait ...... ', border: false, fitColumns: true, remoteSort: false, // double-click onDblClickRow: function (rowIndex, rowData) {var oldnum = rowData. g_num; // if (lastIndex! = RowIndex) {$ ("# grid "). datagrid ('enabled', rowIndex); $ ("# grid "). datagrid ('ineinedit ', 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 ('enabled', 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 ('enabled', lastIndex) ;}}); //} lastIndex = rowIndex ;}, frozenColumns: [[{field: 'ck ', checkbox: true}], toolbar: [{text: 'refree', iconCls: 'icon-reload', handler: function () {reload () ;},{ text: 'add', iconCls: 'icon-add', handler: add}, {text: 'edit', iconCls: 'icon-edit', handler: edit}, {text: 'delete', ico NCls: 'icon-cut ', handler: del}, {text: 'check', iconCls: 'icon-undo', handler: function () {$ ("# grid "). datagrid ("clearSelections") ;}}], columns: [{field: 'id', title: 'sequence number ', width: 40, align: 'center', sortable: true, sorter: sortId}, {field: 'G _ name', title: 'item name', width: 40, align: 'center', sortable: true }, {field: 'gt _ name', title: 'Type ', width: 40, align: 'center', sortable: true}, {field: 'G _ num ', title: 'stock', width: 40, align: 'center', sorta Ble: true, editor: {type: 'numberbox'}, {field: 'G _ isnew', title: 'New? ', width: 40, align: 'center', sortable: true, formatter: function (val) {return val = '1 '? 'Yes': 'no'; }},{ field: 'G _ ishot ', title: 'hot? Ps', width: 40, align: 'center', sortable: true, formatter: function (val) {return val = '1 '? 'Yes': 'no'; }},{ field: 'G _ status', title: 'state', width: 40, align: 'center', sortable: true, formatter: status}, {field: 'G _ addtime', title: 'add time', width: 40, align: 'center', sortable: true}, {field: 'act', title: 'operation', width: 40, align: 'center', formatter: act}]});} /// <summary> // Ajax obtains paging data // currPage => current page number // </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" pai.html (ShortPageStr (json. total); ShowPageBar () ;}, error: function (data) {alert (data. responseText) ;}}) ;}/// <summary> /// @ desc modify the inventory (warehouse receiving and picking) /// </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 ;}

The above is the reprinted content, and the following is your own verification code:

Function _ createTable (data) {// transcode Chinese characters $. each (data. data, function (I, obj) {var eventName = unescape (obj. eventName); var levelName = unescape (obj. levelName); obj. eventName = eventName; obj. levelName = levelName;}); // data processing var column = [{title: 'id', field: 'id', width: 100, align: 'left '}, {title: 'level number', field: 'levelnum', width: 100, align: 'left'}, {title: 'level name', field: 'levelname ', width: 100, align: 'left', formatter: functio N (data) {if (data = 'null') {return "" ;}else {return data ;}, editor: {type: 'text '}}, {title: 'Campaign id', field: 'eventid', width: 60, align: 'left', rowspan: 1, hidden: true}, {title: 'creator id', field: 'createuid', width: 100, align: 'left'}, {title: 'creation time', field: 'createdate', width: 150, align: 'left'}]; var root = listToDataGrid (data); var title = "avatar list"; _ getDataGrid ("eventListTable", title, 'id', column ). datagrid ('loaddata', root) ;} Function _ getDataGrid (id, aTitle, pk, columns) {var el =$ ('#' + id + ''); if (el. data ('dindinit ')! = '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: 'modify', iconCls: 'icon-cut ', handler: _ showDialog (id)},'-', {id: 'btndelete', text: 'delete', iconCls: 'icon-cancel', handler: _ removeEvent (id)}], onDblClickCell: function (rowIndex, field, value) {lastIndex = rowIndex; $ ('#' + id ). datagrid ('enabled', rowIndex); $ ('#' + id ). datagrid ('ineinedit ', 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 ('enabled', lastIndex );}). bind ("keypress", function (evt) {if (evt. keyCode = 13) {debugger; var dataArry = $ ('#' + id ). datagrid ('getselections'); eventPlayer. setLevelName ($ (this ). val (), dataArry [0]. id); $ ('#' + id ). datagrid ('enabled', lastIndex );}}). focus (); lastIndex = rowIndex ;}}); // register the paging query method var p =$ ('#' + id ). datagrid ('getpager'); $ pagination (p, {onSelectPage: function (pageNumber, pageSize1) {getEventPlayerDataList () ;}}); el. data ('dindinit', 'finished ');}

The above is a small series of jQuery Easyui DataGrid for you to click a cell to enter the editing status focus removed and save the data, I hope to help you, if you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!