How to add, modify, and delete a datagrid in the JQuery EasyUI tutorial. jqueryeasyui

How to add, modify, and delete a datagrid in the JQuery EasyUI tutorial. jqueryeasyui

For details about how to add, modify, and delete learning notes in the datagrid of JQueryEasyUI, refer to the notes in this document and delete them in batches. Double-click the form modification and select the row to modify, add lines for modification, and then extend the editor method. You do not need to talk nonsense and directly go to the code. The comments in the Code are very detailed.

<Script type = "text/javascript" charst = "UTF-8"> var editFlag = undefined; // when the layout framework points to href, only take the part in the middle of the html page body, so this page can be written in this way // The datagrid contains many attributes, so try to use js to initialize the datagrid framework $ (function () {$ ("# dg "). datagrid ({url: "GetJson. ashx ", // points to a general processing program or a controller. The returned data must be in Json format. You can directly assign values to Json format data. I will use Json data in demo as an example, I will not write the background code, but I will explain the precautions returned by the background: iconCls: "icon-add", fitColumns: false, // if it is set to true, the column is automatically adapted to the table width to prevent horizontal scrolling. If it is set to false, the column size is automatically matched // Toolbar sets the toolbar at the top of the table and sets idField: 'id' as an array. // The id column is generally set to id, which may be case sensitive. Please note that loadMsg: "loading data for you", // The statement pagination: true displayed to the user when loading data, // display the lowest paging toolbar rownumbers: true, // display rows 1, 2, 3, 4... pageSize: 10, // The number of pages to read, that is, the value pageList: [10, 20, 30] passed to the background when reading data. // you can adjust the data displayed on each page, that is to say, adjust pageSize the data when you request data from the background every time. // because the datagrid has too many attributes, I will not introduce them all. If necessary, you can see its APIsortName: "name ", // when initializing the table, the sort field must be the same as the field name in the database. sortOrder: "asc", // columns in the forward direction: [[{field: 'Code', title: 'code', width: 100, editor: {// set it to editable type: 'validatebox', // set the built-in style of the editing style to text, textarea, checkbox, numberbox, validatebox, datebox, combobox, and combotree can be expanded by options :{}}, {field: 'name', title: 'name', width: 100, sortable: true, editor :{// set it to editable type: 'validatebox', // set the editing format options: {required: true // set the editing rule attributes }}}, // sortable: true when you click this column, you can change the ascending/descending order {field: 'addr ', title: 'addr', width: 100, editor: {// Set it to editable type: 'datetimebox', // here we will perform a datetimebox extension options: {required: true // set edit rule attributes }}]], // here there are two square brackets because they can be made into a crystal report. For details, see demotoolbar: [{// Add the button text: "add", iconCls: "icon-add", handler: function () {if (editFlag! = Undefined) {$ ("# dg "). datagrid ('enabled', editFlag); // end the editing and pass in the edited row.} if (editFlag = undefined) {// prevent too many rows from being added at the same time $ ("# dg "). datagrid ('insertrow', {// Add data to the specified row. appendRow is used to add data index: 0 to the last row. // row: {code: '', name: 'enter the name', addr:''}); $ ("# dg "). datagrid ('ineinedit ', 0); // enable editing and input the row editFlag = 0 ;}}},'-', {// '-' is to add a vertical line in the middle of the two buttons, and look at the comfortable text: "delete", iconCls: "icon-remove", handler: function () {// select the row var to be deleted Rows = $ ("# dg "). datagrid ('getselections'); if (rows. length> 0) {// select several rows to trigger the event $. message. confirm ("prompt", "Are you sure you want to delete the data? ", Function (res) {// prompt whether to delete if (res) {var codes ={}; for (var I = 0; I <rows. length; I ++) {codes. push (rows [I]. code);} console.info (codes. join (','); // concatenate a string and pass it to the backend for data processing. Refresh the datagrid after loop deletion }});}}},'-', {text: "modify", iconCls: "icon-edit", handler: function () {// select a row and edit var rows =$ ("# dg "). datagrid ('getselections'); if (rows. length = 1) {// if (editFlag! = Undefined) {$ ("# dg "). datagrid ('enabled', editFlag); // end the editing and pass in the edited row.} if (editFlag = undefined) {var index = $ ("# dg "). datagrid ('getrowindex ', rows [0]); // obtain the index of the selected row $ ("# dg "). datagrid ('ineinedit ', index); // enable editing and input the row editFlag = index ;}}},'-', {text: "save ", iconCls: "icon-save", handler: function () {$ ("# dg "). datagrid ('enabled', editFlag) ;}, '-', {text: "undo", iconCls: "icon-redo", handler: function () {ed ItFlag = undefined; $ ("# dg "). datagrid ('objectchanges') ;}}, '-'], onAfterEdit: function (rowIndex, rowData, changes) {// after adding endEdit, trigger console.info (rowData) when saving; // you can view the data passed to the background in the Firefox console. here we can use the data to be added asynchronously to the background. After adding the data, refresh datagrideditFlag = undefined; // reset}, onDblClickCell: function (rowIndex, field, value) {// double-click the row to modify the content if (editFlag! = Undefined) {$ ("# dg "). datagrid ('enabled', editFlag); // end the editing and pass in the previously edited row.} if (editFlag = undefined) {$ ("# dg "). datagrid ('ineinedit ', rowIndex); // enable editing and input the row editFlag = rowIndex ;}}});}); // click the search button to start the event function searchFunc () {alert ("123"); $ ("# dg "). datagrid ("load", sy. serializeObject ($ ("# searchForm "). form (); // transmits the element sequence in the searchForm to the background as an object. // This section describes the use of reload. When reload is used, the current page is remembered by default, when you click query, if we only find three pieces of data, we will display 10 data entries per page. The current page number It is 2, so we will not be able to see the results of our query on the current page, only to jump the page forward to see, but this will not happen with load} // click the Clear button to start the event function clearSearch () {$ ("# dg "). datagrid ("load", {}); // reload the data. If no data is filled in, the value passed to the background is blank $ ("# searchForm "). find ("input "). val (""); // locate all input tags in the form and clear them.} </script> <div class = "easyui-tabs" fit = "true" border = "false"> <div title = "data display table" border = "false" fit = "true"> <div class = "easyui-layout" fit = "true" border = "false"> <! -- Because the query requires input conditions, but the toolbar format is not good, we can write the query information in the header north of the Layout framework --> <! -- Here we try to make the display style similar to the toolbar style, so we first look for the toolbar style and copy it --> <div data-options = "region: 'north', title: 'advanced query' "style =" height: 100px; background: # F4F4F4; "> <form id =" searchForm "> <table> <tr> <th> User Name: </th> <td> <input name = "name"/> </td> </tr> <th> creation start time </th> <td> <input class = "easyui-datetimebox" editable = "false" name = "subStartTime"/> </td> <! -- Because the data in the datebox framework must be in the time format, we use editable = "false" to disable manual input, to avoid errors --> <th> creation end time </th> <td> <input class = "easyui-datetimebox" editable = "false" name = "nsubEndTimeame"/> </ td> <a class = "easyui-linkbutton" href = "javascript: void (0); "onclick =" searchFunc (); "> Search </a> </td> <a class =" easyui-linkbutton "href =" javascript: void (0 ); "onclick =" clearSearch (); "> clear </a> </td> </tr> </table> </form> </div> <div data-options =" region: 'center ', split: false "> <table id =" dg "> </table> </div>

Extended editor method: datetimebox

$ (Function () {/* extend the datetimebox method of Editors */$. extend ($. fn. datagrid. defaults. editors, {datetimebox: {// name the method init: function (container, options) {var editor = $ ('<input/> '). appendTo (container); options. editable = false; // you cannot manually enter the editor. datetimebox (options); return editor;}, getValue: function (target) {// value: return $ (target ). datetimebox ('getvalue');}, setValue: function (target, value) {// set the value $ (target ). datetimebox ('setvalue', value) ;}, resize: function (target, width) {$ (target ). datetimebox ('resize', width) ;}, destroy: function (target) {$ (target ). datetimebox ('deststroy'); // destroy the generated panel }}});});

The above section describes all the operations for adding, modifying, and deleting JQuery EasyUI datagrid. I hope this will help you. If you want to learn more, please stay tuned to the help House website!