Based on the asp.net + easyui framework, learn easyui-datagrid step by step to implement addition, editing, and deletion (3)

Directory:

Learning easyui-datagrid step by step based on asp.net + easyui framework (I)

Learning easyui-datagrid step by step based on the asp.net + easyui framework to implement paging and search (2)

Based on the asp.net + easyui framework, learn easyui-datagrid step by step to implement addition, editing, and deletion (3)

Learning easyui-datagrid step by step based on asp.net + easyui framework. Summary (4)

I wanted to update this blog last week, but I encountered a lot of problems during the process of creating this interface, and there was no solution at the moment. Now I think of one. Although there are still some imperfections, but it can implement the basic functions of the project. Below I will tell you about the difficulties I encountered and provide the implementation code.

The topic of this blog is to add, edit, and delete dialog windows. We divide the process into five steps:

1. Create the dialog window html

<% -- Dialog box -- %> <div id = "dlg" class = "easyui-dialog" style = "width: 400px; height: auto; padding: 10px 20px "data-options =" closed: true, buttons: '# dlg-Buttons' "> <% -- closed =" true "buttons =" # dlg-buttons "-- %> <div class =" ftitle "> administrator Information </div> <form id = "fm" method = "post"> <div class = "fitem"> <label> User Name: </label> <input id = "firstname" name = "firstname" class = "easyui-validatebox" data-options = "required: true "/> </div> <div class =" fitem "> <label> password: </label> <input id = "password" name = "password" class = "easyui-validatebox" data-options = "required: true "/> <input name =" Test "id =" test "type =" hidden "/> <input name =" AdminID "id =" AdminID "type =" hidden" /> <input id = "key" name = "key" onkeydown = "if (event. keyCode = 13) reloadgrid () "type =" hidden "/> </div> <div class =" fitem "> <label> employee name: </label> <input id = "workerName" name = "workerName" class = "easyui-combobox"/> </div> <div class = "fitem"> <label> permission: </label> <input id = "adminRightName" name = "adminRightName" class = "easyui-combobox"/> </div> <div class = "fitem"> <label> note: </label> <textarea id = "message" name = "message" style = "width: 150px; "> </textarea> </div> </form> </div> <div id =" dlg-buttons "> <a href =" # "class =" easyui- linkbutton "data-options =" iconCls: 'icon-OK '"onclick =" saveUser () "> Save </a> <a href =" # "class =" easyui-linkbutton "data-options =" iconCls: 'icon-cancel' "onclick =" javascript: $ ('# dlg '). dialog ('close') "> close </a> </div>

2. Pop Up the js in the dialog window

// Add the Administrator function newUser () {// clear the content $ ('# fm '). form ('clear'); // load the staff name and permission loadWorkerNameAndRightName (); $ ('# dlg '). dialog ('open '). dialog ('settitle', 'add Postmaster '); document. getElementById ("test "). value = "add";} // modify the Administrator function editUser () {var row = $ ('# tt '). datagrid ('getselected'); if (row = null) {$. messager. alert ("prompt", "select the row to be modified! "," Info ");} // load the staff name and permission loadWorkerNameAndRightName () if (row) {// obtain the field to be modified $ ('# firstname '). val (row. adminName); $ ('# password '). val (row. adminPassword); // $ ('# adminrightname '). val (row. adminRightName); // $ ('# adminrightname '). combobox ('setvalue', row. adminRightName); // $ ('# workername '). val (row. workerRealName); // $ ('# workername '). combobox ('setvalue', row. workerRealName); $ ('# message '). val (row. adminState) $ ('# dlg '). dialog ('open '). dialog ('settitle', 'modify Postmaster '); document. getElementById ("test "). value = "modify"; $ ('# fm '). form ('load', row );}}

3. implement dynamic loading of the drop-down box in the dialog box

At the beginning of the blog, I set up a suspense for everyone, and encountered difficulties in the implementation process. That is, when loading data dynamically in the drop-down box, a database information is displayed, the primary key of the database to be updated. The implementation scheme of multiple drop-down boxes is the same as that of one drop-down box.

Solution:

You only need to call a general processing program, convert the required data into json as the return value, and send it to the interface end. The data displayed in the drop-down box is bound to the textField attribute of combobox, the data to be updated is bound to the valueField attribute. Now everything is OK.

Effect:

Implementation Code js:

// Function loadWorkerNameAndRightName () {var queryWorkerName = "SetAdmin. ashx? Test = queryWorkerName "; $. getJSON (queryWorkerName, function (json) {$ ('# workername '). combobox ({data: json. rows, valueField: 'workerid', textField: 'workerrealname', required: 'true', editable: 'false'});}) var queryRightName = "SetAdmin. ashx? Test = queryRightName "; $. getJSON (queryRightName, function (json) {$ ('# adminrightname '). combobox ({data: json. rows, valueField: 'adminrightid', textField: 'adminrightname', required: 'true', panelHeight: 'auto '});})}

4. Save and cancel the dialog window

// Save information function saveUser () {var firstname = document. getElementById ("firstname "). value; var password = document. getElementById ("password "). value; var workerID = $ ("# workerName "). combobox ("getValue"); var adminRightID = $ ("# adminRightName "). combobox ("getValue"); var message = document. getElementById ("message "). value; var test = document. getElementById ("test "). value; if (test = "add") {$ ('# FM '). f Orm ('submit ', {url: "SetAdmin. ashx? Test = "+ test +" & firstname = "+ firstname +" & password = "+ password +" & workerID = "+ workerID +" & adminRightID = "+ adminRightID + "& message = "+ message, onSubmit: function () {return $ (this ). form ('validate');}, success: function (result) {if (result. indexOf ("T") = 0) {$ ('# dlg '). dialog ('close'); $. messager. alert ("prompt", "congratulations, information added successfully", "info"); // alert ('Congratulations, information added successfully! ') // Close the dialog $ (' # tt '). datagrid ('reload'); // $ ('# fm '). form ('submit ');} else {$. messager. alert ("prompt", "failed to add. Please try again! "," Info "); return; // alert ('failed to add. Please try again! ')} // Var result = eval (' + result + '); // if (result. success) {// $ ('# dlg '). dialog ('close'); // close the dialog // $ ('# tt '). datagrid ('reload'); // reload the user data //} else {// $. messager. show ({// title: 'error', // msg: result. msg //}); // }}});} else {var row =$ ('# tt '). datagrid ('getselected'); if (row) {// obtain the field var adminID = row to be modified. adminID;} $ ('# fm '). form ('submit ', {url: "SetA Dmin. ashx? Test = "+ test +" & adminID = "+ adminID +" & firstname = "+ firstname +" & password = "+ password +" & workerID = "+ workerID + "& adminRightID = "+ adminRightID +" & message = "+ message, onSubmit: function () {return $ (this ). form ('validate');}, success: function (result) {if (result. indexOf ("T") = 0) {$ ('# dlg '). dialog ('close'); $ ('# tt '). datagrid ('clearselections'); // clears the selected row $. messager. alert ("prompt", "congratulations, letter Message modified successfully "," info "); // alert ('Congratulations, the information is added successfully! ') // Close the dialog $ (' # tt '). datagrid ('reload'); $ ('# fm '). form ('submit ');} else {$. messager. alert ("prompt", "modification failed. Please try again! "," Info "); return; // alert ('failed to add. Please try again! ')} // Var result = eval (' + result + '); // if (result. success) {// $ ('# dlg '). dialog ('close'); // close the dialog // $ ('# tt '). datagrid ('reload'); // reload the user data //} else {// $. messager. show ({// title: 'error', // msg: result. msg //});//}}});}}

5. Deletion

// Delete the Administrator function removeUser () {var test = document. getElementById ("test "). value = "delete"; var row = $ ('# tt '). datagrid ('getselected'); if (row = null) {$. messager. alert ("prompt", "select the row to delete! "," Info ");} if (row) {$. messager. confirm ('hprompt ', are you sure you want to delete this information? ', Function (r) {if (r) {$ (' # FM'). form ('submit ', {url: 'setadmin. ashx/ProcessRequest? AdminID = '+ row. adminID + "& test =" + test, onSubmit: function () {// return $ (this ). form ('validate');}, success: function (result) {if (result. indexOf ("T") = 0) {$ ('# dlg '). dialog ('close'); $ ('# tt '). datagrid ('clearselections'); // clears the selected row $. messager. alert ("prompt", "congratulations, the information is deleted successfully! "," Info "); // alert ('Congratulations, the message is deleted successfully! ') // Close the dialog $ (' # tt '). datagrid ('reload'); $ ('# fm '). form ('submit ');} else {$. messager. alert ("prompt", "failed to add. Please try again! "," Info "); // alert ('failed to add. Please try again! ') Return; // $ (' # fm '). form ('submit ');}}});}})}}

This blog does not provide you with the source code of the general processing program. It is the same as the previous blog, and the operation on the datagrid is basically over. Next I will summarize it accordingly, by the way, I would like to summarize some of my experiences in the entire project.