JQuery Easyui the datagrid implements add, edit, move up, move down, And jqueryeasyui in the row.

JQuery Easyui the datagrid implements add, edit, move up, move down, And jqueryeasyui in the row.

A few days ago, the project encountered a requirement to use Easyui initrd to add and edit data in the row and move the data up and down in the row. Therefore, we would like to summarize these functions.

1. First, let's talk about the main methods used in these functions. Adding data in the row is mainly about adding the editor attribute of the column. In-row editing, beginEdit (), endEdit (), at the same time, the key is to get the current operation row index editIndex.

2. rejectChanges () is used for revocation ().

3. Use getRows () or getChanges () for saving (). getChanges () is mainly used to obtain the added or edited data. getRows () obtains all the data on this page, mainly used in combination with the [Move Up] [Move Down] method.

4. In this function, I used a serialized foreground object component [json. js], this component can easily convert the foreground object into a json string, and then upload it to the background, it is very convenient for me to shine, you need to know that before this function, I also manually process arrays and use join () to spell strings. When this component is found, the speed is improved a few times.

5. I encountered problems when using these methods in this function. At the beginning, I checked the official demo of easyui. I found that after adding data, I saved it, I cannot obtain the data when I click it again. After testing, I found that it was caused by the call of acceptChanges.

Function GetTable () {var editRow = undefined; $ ("# Student_Table "). datagrid ({height: 300, width: 450, title: 'student table', collapsible: true, singleSelect: true, url: '/Home/StuList', idField: 'id ', columns: [[{field: 'id', title: 'id', width: 100}, {field: 'name', title: 'name', width: 100, editor: {type: 'text', options: {required: true }}, {field: 'age', title: 'age', width: 100, align: 'center ', Editor: {type: 'text', options: {required: true }}, {field: 'address', title: 'address', width: 100, align: 'center', editor: {type: 'text', options: {required: true }}], toolbar: [{text: 'add', iconCls: 'icon-add', handler: function () {if (editRow! = Undefined) {$ ("# Student_Table "). datagrid ('enabled', editRow);} if (editRow = undefined) {$ ("# Student_Table "). datagrid ('insertrow', {index: 0, row :{}}); $ ("# Student_Table "). datagrid ('ineinedit ', 0); editRow = 0 ;}},'-', {text: 'save', iconCls: 'icon-save', handler: function () {$ ("# Student_Table "). datagrid ('enabled', editRow); // if you call acceptChanges (), you cannot use getChanges () to obtain the edited and new data. // Serialize the datarow object in JSON format and send it to the background. Var rows = $ ("# Student_Table "). datagrid ('getchanges'); var rowstr = JSON. stringify (rows); $. post ('/Home/create', rowstr, function (data) {}) ;},'-', {text: 'unit', iconCls: 'icon-redo ', handler: function () {editRow = undefined; $ ("# Student_Table "). datagrid ('objectchanges'); $ ("# Student_Table "). datagrid ('unselectall') ;}}, '-', {text: 'delete', iconCls: 'icon-delete', handler: function () {var Row = $ ("# Student_Table "). datagrid ('getselections') ;}}, '-', {text: 'modify', iconCls: 'icon-edit', handler: function () {var row = $ ("# Student_Table "). datagrid ('getselected'); if (row! = Null) {if (editRow! = Undefined) {$ ("# Student_Table "). datagrid ('enabled', editRow);} if (editRow = undefined) {var index = $ ("# Student_Table "). datagrid ('getrowindex ', row); $ ("# Student_Table "). datagrid ('beginedit', index); editRow = index; $ ("# Student_Table "). datagrid ('unselectall') ;}} else {}}, '-', {text: 'move up', iconCls: 'icon-up', handler: function () {MoveUp () ;}}, '-', {text: 'move downward ', iconCls: 'icon-dow N', handler: function () {MoveDown () ;}}], onAfterEdit: function (rowIndex, rowData, changes) {editRow = undefined;}, onDblClickRow: function (rowIndex, rowData) {if (editRow! = Undefined) {$ ("# Student_Table "). datagrid ('enabled', editRow);} if (editRow = undefined) {$ ("# Student_Table "). datagrid ('ineinedit ', rowIndex); editRow = rowIndex ;}}, onClickRow: function (rowIndex, rowData) {if (editRow! = Undefined) {$ ("# Student_Table"). datagrid ('enabled', editRow );}}});}

<Br> // move up function MoveUp () {var row = $ ("# Student_Table "). datagrid ('getselected'); var index = $ ("# Student_Table "). datagrid ('getrowindex ', row); mysort (index, 'up', 'student _ table');} // Move Down function MoveDown () {var row = $ ("# Student_Table "). datagrid ('getselected'); var index = $ ("# Student_Table "). datagrid ('getrowindex ', row); mysort (index, 'low', 'student _ table');} function mysort (index, type, Gridname) {if ("up" = type) {if (index! = 0) {var toup = $ ('#' + gridname ). datagrid ('getdata '). rows [index]; var todown = $ ('#' + gridname ). datagrid ('getdata '). rows [index-1]; $ ('#' + gridname ). datagrid ('getdata '). rows [index] = todown; $ ('#' + gridname ). datagrid ('getdata '). rows [index-1] = toup; $ ('#' + gridname ). datagrid ('refreshrow', index); $ ('#' + gridname ). datagrid ('refreshrow', index-1); $ ('#' + gridname ). datagrid ('selectrow ', Index-1) ;}} else if ("down" = type) {var rows =$ ('#' + gridname ). datagrid ('getrows '). length; if (index! = Rows-1) {var todown = $ ('#' + gridname ). datagrid ('getdata '). rows [index]; var toup = $ ('#' + gridname ). datagrid ('getdata '). rows [index + 1]; $ ('#' + gridname ). datagrid ('getdata '). rows [index + 1] = todown; $ ('#' + gridname ). datagrid ('getdata '). rows [index] = toup; $ ('#' + gridname ). datagrid ('refreshrow', index); $ ('#' + gridname ). datagrid ('refreshrow', index + 1); $ ('#' + gridname ). datagrid ('selectrow', index + 1 );}}}

[HttpPost] public ActionResult Create () {string result = Request. Form [0]; // deserialize the string obtained in the background. Handle var list = JsonConvert. DeserializeObject <List <Student> (result); return Json (true );}

:

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.