When jQuery Easyui datagrid editor is combobox, specify the data source instance, jqueryeasyui

When jQuery Easyui datagrid editor is combobox, specify the data source instance, jqueryeasyui

It is very convenient to introduce combobox when adding and editing operations to the internal application of the datagrid row. When introducing combobox, I will make a summary of the data source, A problem encountered during the demo process is that when you select the value in the drop-down box and click Save, the value is displayed instead of the text value, and the formatting function is used to solve this problem.

Var Address = [{"value": "1", "text": "CHINA" },{ "value": "2", "text": "USA "}, {"value": "3", "text": "Koren"}]; function unitformatter (value, rowData, rowIndex) {if (value = 0) {return ;} for (var I = 0; I <Address. length; I ++) {if (Address [I]. value = value) {return Address [I]. text ;}} function GetTable () {var editRow = undefined; $ ("# Student_Table "). datagrid ({height: 300, width: 45 0, 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, formatter: unitformatter, align: 'center', editor: {type: 'combobox', options: {data: Address, valueField: "value", textField: "text" }}]], 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 );}}});}

:

 

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