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

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.