Construction of ASP.net mvc4+ef5+easyui+unity2.x injection background Management system (9)

The combination of MVC and Easyui to check and delete

In the eighth lecture, we have done how to pagination. This talk mainly talk about additions and deletions to check. The code of the six is given, which contains the additions and deletions, we can download the next look. This is mainly to make a beautiful toolbar, although the Easyui DataGrid has its own toolbar can be set up, we still have to extract, for later permission control to do better preparation.

The front-end code does not have logical results, which may be the most easy to write the code since I write, but also the most cumbersome, because the art I am not strong, every adjustment is very difficult, and finally I transferred him to this:

See the past clap. The style is already included in the attached code.

All you need to do is add the following HTML code to the index.

<div class= "Mvctool" > <input id= "txtquery" type= "text" class= "SearchText" > <a id= "btnquery" style= " Float:left class= "l-btn l-btn-plain" ><span class= "L-btn-left" ><span class= "L-btn-text icon-search" Style= "padding-left:20px;" > Query </span></span></a><div class= "Datagrid-btn-separator" ></div> <a id= " Btncreate "style=" Float:left "class=" l-btn l-btn-plain "><span class=" L-btn-left "><span class=" L-btn-text icon-add "style=" padding-left:20px; > Add </span></span></a><div class= "Datagrid-btn-separator" ></div> <a id= " Btnedit "style=" Float:left "class=" l-btn l-btn-plain "><span class=" L-btn-left "><span class=" L-btn-text Icon-edit "style=" padding-left:20px; " > Edit </span></span></a><div class= "Datagrid-btn-separator" ></div> <a id= " Btndetails "style=" Float:left "class=" l-btn l-btn-plain "><span class=" L-btn-left "><span class=" L-bTn-text icon-details "style=" padding-left:20px; > Detailed </span></span></a><div class= "Datagrid-btn-separator" ></div> <a id= " Btndelete "style=" Float:left "class=" l-btn l-btn-plain "><span class=" L-btn-left "><span class=" L-btn-text icon-remove "style=" padding-left:20px; > Delete </span></span></a><div class= "Datagrid-btn-separator" ></div> <a id= " Btnexport "style=" Float:left "class=" l-btn l-btn-plain "><span class=" L-btn-left "><span class=" L-btn-text icon-export "style=" padding-left:20px; > Export </span></span></a> <a id= "btnreload" style= "Float:left" class= "l-btn L-btn-plain" > <span class= "L-btn-left" ><span class= "L-btn-text icon-reload" style= "padding-left:20px"; > Refresh </span></span></a> </div>

The ability of friends to optimize the style

OK, we use jquery to add events to the button. Add, delete, change, check, export and refresh erase it. Useless to

Add the following code in the index JS code

<script type= "Text/javascript" >//ifram return function Framereturnbyclose () {$ ("#modalwindow"). W
    Indow (' close ');
        //iframe returns and refreshes the function framereturnbyreload (flag) {if (flag) $ ("#List"). DataGrid (' Load ');
    else $ ("#List"). DataGrid (' reload ');
    ///Output information function Framereturnbymes (MES) {$.messagebox5s (' hint ', MES); } $ (function () {$ ("#btnCreate"). Click (function () {$ (#modalwindow). HTML ("<ifram
            E width= ' 100% ' height= ' 98% ' scrolling= ' no ' frameborder= ' 0 ' src= '/syssample/create ' ></iframe> ');
        $ ("#modalwindow"). Window ({title: ' Add ', width:700, height:400, iconcls: ' Icon-add '}). Window (' open ');
        });
            $ ("#btnEdit"). Click (function () {var row = $ (' #List '). DataGrid (' getselected '); if (row!= null) {$ ("#modalwindow"). HTML ("<iframe width= ' 100% ' height= ' 99% ') ' frameborder= ' 0 ' src= '/SYssample/edit?id= "+ row.
                Id + "&ieguid=" + getguid () + "' ></iframe>");
            $ ("#modalwindow"). Window ({title: ' Edit ', width:700, height:430, iconcls: ' Icon-edit '}). Window (' open ');
        else {$.messagebox5s (' hint ', ' Select the record to be manipulated ');}
        });
            $ ("#btnDetails"). Click (function () {var row = $ (' #List '). DataGrid (' getselected '); if (row!= null) {$ ("#modalwindow"). HTML ("<iframe width= ' 100% ' height= ' 98% '" scrolling= ' no ' frameb ') Order= ' 0 ' src= '/syssample/details?id= ' + row.
                Id + "&ieguid=" + getguid () + "' ></iframe>");
            $ ("#modalwindow"). Window ({title: ' Details ', width:500, height:300, iconcls: ' Icon-details '}). Window (' open ');
            else {$.messagebox5s (' hint ', ' Select the record to be manipulated ');}
        });
            $ ("#btnQuery"). Click (function () {var querystr = $ ("#txtQuery"). Val (); If the query condition is null default query all if (QUERYSTR = null) {querystr = "%";
            } $ (' #List '). DataGrid ({url: '/syssample/getlist?querystr= ' + encodeURI (QUERYSTR)
    
        });
        });
            $ ("#btnDelete"). Click (function () {var row = $ (' #List '). DataGrid (' getselected ');
                            if (row!= null) {$.messager.confirm (' hint ', ' OK Delete ', function (r) {if (R) { $.post ("/syssample/delete?id=" + row. Id, function (data) {if (Data.type = 1) $ ("#List"). D
                                Atagrid (' Load ');
                            $.messagebox5s (' hint ', data.message);
    
                        }, "JSON");
            }
                    });
            else {$.messagebox5s (' hint ', ' Select the record to be manipulated ');}
    });
}); </script>