Easyui+javascript Adding and modifying PopOver buttons

write this article just want to spit out the sad history of making three PopOver buttons, why write only two? Because I have seen someone write a deletion before, so I only write the remaining two! Now do the system is always involved in adding and deleting the total above three good-looking buttons, the following a good-looking datagrid.

To add and modify a popup box:

The first thing to do is to load our well-done add and edit pop-up boxes.

<span style= "FONT-SIZE:14PX;" ><div id= "Addtemplate" >    @* Loading Add Process dialog box *@    @{html.renderpartial (".. /.. /views/flowconfig/addflowpartial ");} </div><div id= "Edittemplate" >    @* Load Modify Process Dialog *@    @{html.renderpartial (".. /.. /views/flowconfig/editflowpartial ");} </div></span>

js file:

Display your pop-up box when you click Add or Edit button. Example add:

<span style= "FONT-SIZE:14PX;" >//Click the Add button to trigger the event    $ ("#add"). Click (function () {        $ (' #diaAdd '). Dialog (' Open '). Dialog ({            title: "Add Process",            width:400,            height:300,            iconcls: ' Icon-add ',                 //Popup box icon            modal:true,        })      ; </span>

The difference is that you want to display the selected row of data at the same time:

<span style= "FONT-SIZE:14PX;" >//Click the Modify button to trigger the event    $ ("#edit"). Click (function () {        var row = $ (' #dg '). DataGrid (' getselected ');        if (row) {            $ (' #diaEdit '). Dialog (' Open '). Dialog ({                title: "Edit Process",                width:350,                height:250,                modal: True            });            $ ("#txtID"). Val (row. FLOWID);            $ ("#txtName"). Val (row. Name);               $ ("#txtSort"). Val (row. Sort);            $ ("#txtState"). Val (row. Isuse);            $ ("#txtUrl"). Val (row. URL);        } else {            $.messager.alert ("Prompt", "Please select the row to edit!") ");        }    }) </span>

The result after display:

Next is also written in the JS script, the popup box of the OK button event. The data to be added or modified is passed to the controller, which is then passed to the background for updating to the database.

<span style= "FONT-SIZE:14PX;" ><span style= "FONT-SIZE:14PX;" >function Addflow () {    alert ($ ("#txtFlowName"). Val ());    $.ajax ({        type: "POST",        URL: "/flowconfig/addflowreload",        data: "Txtflowname=" + $ ("#txtFlowName"). Val () + "&txtflowsort=" + $ ("#txtFlowSort"). Val () + "&txtflowstate=" + $ ("#txtFlowState"). Val (),        success: function () {                      $ ("#dg"). DataGrid ("Reload");            $.messager.alert ("Hint! "," the message was added successfully! ");        }    })    $ (' #diaAdd '). Dialog (' Close ');} </span></span>

<span style= "FONT-SIZE:14PX;" ><span style= "FONT-SIZE:14PX;" >//Modify the process to determine the button function Modifyflow () {    //alert (' 123 ');    $.ajax ({        type: "POST",        URL: "/flowconfig/modifyflowreload",        data: "flowid=" + $ ("#txtID"). Val () + "& Txturl= "+ $ (" #txtUrl "). Val () +" &txtname= "+ $ (" #txtName "). Val () +" &txtsort= "+ $ (" #txtSort "). Val () +" &txts Tate= "+ $ (" #txtState "). Val (),        success:function (data) {            $.messager.alert (" Hint "," edit information succeeded! "). ");            $ ("#dg"). DataGrid ("Reload");        }    })    $ (' #diaEdit '). Dialog (' Close ');} </span></span>

                  

This allows you to add and modify data in the DataGrid.

Spit on the trough for a moment:

The first implementation is to add pop-up box, feel nothing, then do delete, a lot of problems occurred, find out the people help results do not know what the problem, so I delete the task is the most difficult. Later in their efforts, finally realized, and then make changes, but the changes are still problematic, how also does not show the selected data, so I think the modification is the most difficult. Then three buttons of the code are written well, they collectively strike, so I fought for the glorious and three buttons a night, finally realized, so I think they are not difficult. The difficulty is how to calm their hearts to do not fret to solve them.

Summarize:

Throughout the whole process of solving the problem, always say "no problem!" "For what?" "In fact, sometimes there is no problem with the code, perhaps it is not this part of it, perhaps some references or other related will be affected." I usually have a problem, a long time can not be adjusted out of time will be very irritable, temper is also big. So summed up a experience, whenever this time should stop to do something else, or to help others, perhaps back when the mood is good out. Often solving problems is always between one's mind. When you do not know where the problem when debugging, and do not give an error when the most crazy time, this time if a mistake is a very exciting thing.

Accidentally heard a sentence: know why the problem is not a problem , so continue to debug it!

Easyui+javascript Adding and modifying PopOver buttons