Home > Developer > JavaScript
JQuery EasyUI: used combobox to implement multi-level interaction in the DataGrid editing. jqueryeasyui
When designing the curriculum in the project, I need to use the multi-level interaction between the teacher and the category.
The first one is:
The following is the implementation code:
<Body> <script type = "text/javascript"> $ (function () {var editing; // determines whether the user is in the editing status var flag; // determine the ADD and modify method $ ('# set_schedule '). datagrid ({idField: 'id', fitColumns: false, url: 'scheduleaction _ loadScheduleData. action? Suresponentid = '+ $ ("# suresponentid "). val (), striped: true, loadMsg: 'the data is being loaded. Please wait... ', rownumbers: true, singleSelect: true, frozenColumns: [[{field: 'ck', checkbox: true}], columns: [[{field: 'datetime ', title: 'time', width: 100, align: 'center', editor: {type: 'datebox', options: {required: true, missingMessage: 'Time is required! ', Editable: false }}, {field: 'morningtime', title: 'Morning class time', width: 126, align: 'center', editor: {type: 'validatebox', options: {required: true, missingMessage: 'time period is required! '}},{ Field: 'morningcourse', title: 'Morning class', width: 100, editor: {type: 'validatebox', options: {required: true, missingMessage: 'The course is required! '}},{ Field: 'aa1', title: 'instructor classifier', width: 100, editor: {type: 'combobox', options: {url: 'codetypeaction _ search. action? ParentId = 0 & type = 27 ', valueField: 'id', textField: 'name', onSelect: function (data) {var row = $ (' # set_schedule '). datagrid ('getselected'); var rowIndex = $ ('# set_schedule '). datagrid ('getrowindex ', row); // obtain the row number var thisTarget = $ (' # set_schedule '). datagrid ('geteditor', {'index': rowIndex, 'field': 'aa1'{}.tar get; var value = thisTarget. combobox ('getvalue'); var target = $ ('# set_schedule '). datagrid ('geteditor' ', {'Index': rowIndex, 'field': 'bb1' character ).tar get; target. combobox ('clear'); // clear the original data var url = 'codetypeaction _ search. action? Type = 28 & parentId = '+ value; target. combobox ('reload', url); // The linked drop-down list is reloaded. }}}, {field: 'bb1', title: 'instructor detail class', width: 100, editor: {type: 'combobox', options: {url: 'codetypeaction _ search. action? Type = 28', valueField: 'id', textField: 'name', onSelect: function (data) {var row = $ ('# set_schedule '). datagrid ('getselected'); var rowIndex = $ ('# set_schedule '). datagrid ('getrowindex ', row); // obtain the row number var thisTarget = $ (' # set_schedule '). datagrid ('geteditor', {'index': rowIndex, 'field': 'bb1'{}.tar get; var value = thisTarget. combobox ('getvalue'); var target = $ ('# set_schedule '). datagrid ('geteditor', {'index': RowIndex, 'field': 'morningteacherid'{}.tar get; target. combobox ('clear'); // clear the original data var url = 'teacheraction _ search. action? TeacherTypeId2 = '+ value; target. combobox ('reload', url); // link drop-down list overload }}}, {field: 'morningteacherid', title: 'lecturer ', width: 100, editor: {type: 'combobox', options: {url: 'teacheraction _ search. action ', valueField: 'id', textField: 'name' }}, {field: 'afternoontime', title: 'Afternoon class time', width: 126, align: 'center', editor: {type: 'validatebox', options: {required: true, missingMessage: 'Time period is required! '}},{ Field: 'afternooncourse', title: 'Afternoon class', width: 100, editor: {type: 'validatebox', options: {required: true, missingMessage: 'The course is required! '}},{ Field: 'aa2', title: 'instructor classifier ', width: 100, editor: {type: 'combobox', options: {url: 'codetypeaction _ search. action? ParentId = 0 & type = 27 ', valueField: 'id', textField: 'name', onSelect: function (data) {var row = $ (' # set_schedule '). datagrid ('getselected'); var rowIndex = $ ('# set_schedule '). datagrid ('getrowindex ', row); // obtain the row number var thisTarget = $ (' # set_schedule '). datagrid ('geteditor', {'index': rowIndex, 'field': 'aa2'hangzhou.tar get; var value = thisTarget. combobox ('getvalue'); var target = $ ('# set_schedule '). datagrid ('geteditor' ', {'Index': rowIndex, 'field': 'bb2'character ).tar get; target. combobox ('clear'); // clear the original data var url = 'codetypeaction _ search. action? Type = 28 & parentId = '+ value; target. combobox ('reload', url); // link to the drop-down list for overloading }}}, {field: 'bb2', title: 'instructor detail class', width: 100, editor: {type: 'combobox', options: {url: 'codetypeaction _ search. action? Type = 28', valueField: 'id', textField: 'name', onSelect: function (data) {var row = $ ('# set_schedule '). datagrid ('getselected'); var rowIndex = $ ('# set_schedule '). datagrid ('getrowindex ', row); // obtain the row number var thisTarget = $ (' # set_schedule '). datagrid ('geteditor', {'index': rowIndex, 'field': 'bb2'{}.tar get; var value = thisTarget. combobox ('getvalue'); var target = $ ('# set_schedule '). datagrid ('geteditor', {'index': RowIndex, 'field': 'afternoonteacherid'{}.tar get; target. combobox ('clear'); // clear the original data var url = 'teacheraction _ search. action? TeacherTypeId2 = '+ value; target. combobox ('reload', url); // link drop-down list overload }}}, {field: 'afternoonteacherid', title: 'lecturer ', width: 100, editor: {type: 'combobox', options: {url: 'teacheraction _ search. action ', valueField: 'id', textField: 'name' }}, {field: 'eveningtime', title: 'Evening class time', width: 126, align: 'center', editor: {type: 'validatebox', options: {required: true, missingMessage: 'Time period is required! '}},{ Field: 'eveningcourse', title: 'Evening course', width: 100, editor: {type: 'validatebox', options: {required: true, missingMessage: 'The course is required! '}},{ Field: 'aa3', title: 'instructor classified', width: 100, editor: {type: 'combobox', options: {url: 'codetypeaction _ search. action? ParentId = 0 & type = 27 ', valueField: 'id', textField: 'name', onSelect: function (data) {var row = $ (' # set_schedule '). datagrid ('getselected'); var rowIndex = $ ('# set_schedule '). datagrid ('getrowindex ', row); // obtain the row number var thisTarget = $ (' # set_schedule '). datagrid ('geteditor', {'index': rowIndex, 'field': 'aa3'{}.tar get; var value = thisTarget. combobox ('getvalue'); var target = $ ('# set_schedule '). datagrid ('geteditor' ', {'Index': rowIndex, 'field': 'bb3' character ).tar get; target. combobox ('clear'); // clear the original data var url = 'codetypeaction _ search. action? Type = 28 & parentId = '+ value; target. combobox ('reload', url); // link to the drop-down list for overloading }}}, {field: 'bb3', title: 'instructor detail class', width: 100, editor: {type: 'combobox', options: {url: 'codetypeaction _ search. action? Type = 28', valueField: 'id', textField: 'name', onSelect: function (data) {var row = $ ('# set_schedule '). datagrid ('getselected'); var rowIndex = $ ('# set_schedule '). datagrid ('getrowindex ', row); // obtain the row number var thisTarget = $ (' # set_schedule '). datagrid ('geteditor', {'index': rowIndex, 'field': 'bb3'{}.tar get; var value = thisTarget. combobox ('getvalue'); var target = $ ('# set_schedule '). datagrid ('geteditor', {'index': RowIndex, 'field': 'eveningteacherid'{}.tar get; target. combobox ('clear'); // clear the original data var url = 'teacheraction _ search. action? TeacherTypeId2 = '+ value; target. combobox ('reload', url); // reload the linked drop-down list }}}, {field: 'eveningteacherid', title: 'lecturer ', width: 100, editor: {type: 'combobox', options: {url: 'teacheraction _ search. action ', valueField: 'id', textField: 'name' }}]], pagination: true, pageSize: 10, pageList: [5, 10, 15, 20, 50], toolbar: [{text: 'add class', iconCls: 'icon-add', handler: function () {if (editing = undefi Ned) {flag = 'add'; // 1 first cancel all selected States $ ('# set_schedule '). datagrid ('unselectall'); // 2 append a row $ ('# set_schedule '). datagrid ('appendrow', {description: ''}); // 3 get the row number editing = $ ('# set_schedule') of the current page '). datagrid ('getrows '). length-1; // 4 select and enable the editing Status $ ('# set_schedule '). datagrid ('selectrow', editing); $ ('# set_schedule '). datagrid ('ineinedit ', editing) ;}}/*, {text: 'modify class', iconCls: 'icon-edit', handler: function () {va R arr = $ ('# set_schedule'). datagrid ('getselections'); if (arr. length! = 1) {$. messager. show ({title: 'prompt information', msg: 'only one record can be selected for modification! '});} Else {if (editing = undefined) {flag = 'edit '; // obtain the index location of the row based on the row record object editing = $ ('# set_schedule '). datagrid ('getrowindex ', arr [0]); // enable the editing Status $ (' # set_schedule '). datagrid ('ineinedit ', editing) ;}}} */, {text: 'save class', iconCls: 'icon-save', handler: function () {// verify the data before saving, and then finish editing and the master edits the Status field if ($ ('# set_schedule '). datagrid ('validaterow', editing) {$ ('# set_schedule '). datagrid ('enabled', editing ); Editing = undefined ;}}, {text: 'delete class', iconCls: 'icon-delete', handler: function () {var arr = $ ('# set_schedule '). datagrid ('getselections'); if (arr. length <= 0) {$. messager. show ({title: 'prompt information', msg: 'Select Delete operation! '});} Else {$. messager. confirm ('prompt information',' Are you sure you want to delete? ', Function (r) {if (r) {var ids = ''; for (var I = 0; I <arr. length; I ++) {ids + = arr [I]. id + ',';} ids = ids. substring (0, ids. length-1); $. post ('scheduleaction _ delete. action ', {ids: ids}, function (result) {$ (' # set_schedule '). datagrid ('reload'); $. messager. show ({title: 'prompt information', msg: 'operation successful! '}) ;}) ;}Else {return ;}}}, {text: 'cancelling operation', iconCls: 'icon-cancel', handler: function () {// roll back data $ ('# set_schedule '). datagrid ('rejectchanges'); editing = undefined;}], onAfterEdit: function (index, record) {var data = $ ('# moduleform '). serialize (); $. post (flag = 'add '? 'Scheduleaction _ addSchedule. action? '+ Data: 'scheduleaction _ updateSchedule. action ', record, function (result) {var data = $. parseJSON (result); $ ('# set_schedule '). datagrid ('reload'); $. messager. show ({title: 'prompt information', msg: data. message}) ;}, 'text') ;}}) ;}); </script> <form id = "moduleform" method = "post"> <s: hidden name = "suresponentid" id = "suresponentid"> </s: hidden> <table cellspacing = "1" cellpadding = "5" class = "tb_background2" width = "100%"> <tr> <td width = "20%" class = "td_right"> total hours: </td> <td width = "28%" class = "td_left"> <s: textfield name = "totalLearnTime" id = "totalLearnTime" size = "32"/> when </td> <td width = "20%" class = "td_right"> visible: </td> <td width = "28%" class = "td_left"> <s: select list = "# {'0': 'visible ', '1 ': 'Invisible '} "cssStyle =" width: 200px; "name =" type "id =" type "> </s: select> </td> </tr> </table> </form> <table id = "set_schedule"> </table> </body>
The above section describes how to use combobox to implement multi-level interaction in the jQuery EasyUI editing DataGrid. I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
