Introduction to MVC + EF easyui dataGrid dynamic loading of paging tables, mvceasyui

Introduction to MVC + EF easyui dataGrid dynamic loading of paging tables, mvceasyui

First, the javascript code

<Script type = "text/javascript" >$ (function () {LoadGrid () ;}) // load the table !!! Function LoadGrid () {$ ('# roleGrid '). datagrid ({width: 900, striped: true, // alternate stripe fitColumns: true, // prevent horizontal scrolling fit: true, // auto-complete iconCls: "icon-save ", // icon idField: 'roleid', // unique column url: "GetRoles", dataType: "json", singleSelect: true, // if it is set to true, only one row of loadMsg can be selected: 'loading hard. Please wait... ', rownumbers: false, // display the number of rows pagination: true, // nowrap: true in the bottom paging toolbar, // capture the excess data checkOnSelect: true, // checkbox check when a row is clicked Ed (select)/unchecked (unselect) pageNumber: 1, // initialize the page number. PageSize: 10, // number of records on each page initialized. PageList: [5, 10, 30], // initializes the showFooter: false list of the number of records on each page, // defines whether to display columns at the bottom of a row: [[{field: "RoleId ", title: "role no.", width: 60, align: "center", sortable: "true" },{ field: "RoleName", title: "role name", width: 100, align: "center" },{ field: "RoleRemarks", title: "Remarks", width: 100, align: "center" },{ field: "IsStatus ", title: "status", width: 60, align: "center", formatter: function (value, row, index) {I F (value = "0") {return "normal";} else if (value = "1") {return "disabled" ;}}, {field: "edit", title: "operation", align: "center", width: 80, formatter: function (value, row, index) {var detail = '<a style = "padding: 1px; color: black;" onclick = "editRole (' + index + ') "> <I class =" fa-edit "> </I> edit </a> '; var deleteBtn =' <a style =" color: black; "onclick =" delRole ('+ index +') "> <I class =" fa-trash-o "> </I> Delete </> '; var setrole =' <a style = "color: black;" onclick = "setRights ('+ index + ') "> <I class =" fa-exclamation-triangle "> </I> Set permissions </> '; return "" + detail + "|" + deleteBtn + "|" + setrole ;}}] // column}) ;}; function editRole (I) {// method of the edit button var rows =$ ("# roleGrid "). datagrid ("getRows"); layer. open ({title: false, type: 2, closeBtn: false, area: ['420px ', '418px'], skin: 'layui-layer-rim ', // Add Border content: ['/Admin/ShowForm/eidtrole', 'no'], success: function (layero, index) {var body = layer. getChildFrame ('body', index); body. contents (). find ("# roleId "). val (rows [I]. roleId); body. contents (). find ("# roleName "). val (rows [I]. roleName); if (rows [I]. roleRemarks! = "-") {Body. contents (). find ("# remarks "). val (rows [I]. roleRemarks);} body. contents (). find ("# isstutas "). val (rows [I]. isStatus) ;}}) ;}function delRole (I) {// delete user var rows =$ ("# roleGrid "). datagrid ("getRows"); var postData = {roleId: rows [I]. roleId}; layer. confirm ('Are you sure you want to delete this role? ', {Btn: ['confirmed', 'cancel'], // button shade: false // do not display mask}, function (index) {$. ajax ({type: "POST", url: "DeleRole", data: postData, success: function (result) {if (result = "true") {layer. msg ("operation successful! ", {Icon: 6, time: 1000,}, function () {$ (" # roleGrid "). datagrid ("reload"); layer. close (index) ;}) ;}else if (result = "false") {layer. msg ("operation failed! ", {Icon: 2});} else if (result =" msg ") {layer. msg (" system error, please contact the administrator! ", {Icon: 0}) ;}}}, function (index) {layer. close (index );});}

Then html

<Table id = "roleGrid"> </table>

The last step is the Controller method (this part is the most important. Whether the table can display data depends on this part)

/// <Summary> /// dynamically generate table data /// </summary> /// <param name = "page"> </param> // <param name = "rows"> </param> // <returns> </returns> public JsonResult GetRoles (int? Page, int? Rows) {page = null? 1: page; // page where rows = null? 1: rows; // number of rows List <role> rList = rService. getAllRoles (Convert. toInt32 (page), Convert. toInt32 (rows); List <role> roleList = new List <role> (); for (int I = 0; I <rList. count; I ++) {role r = new role (); r. roleId = rList [I]. roleId; r. roleName = rList [I]. roleName; if (string. isNullOrEmpty (rList [I]. roleRemarks) {r. roleRemarks = "-";} else {r. roleRemarks = rList [I]. roleRemarks;} r. isStatus = rList [I]. isStatus; roleList. add (r);} var json = new {total = rService. getTotal (), rows = roleList}; return Json (json, JsonRequestBehavior. allowGet );}

The last step is the controller-related method.

/// <Summary> /// paging data /// </summary> /// <param name = "page"> </param> /// <param name = "rows"> </param> // <returns> </returns> public List <role> GetAllRoles (int page, int rows) {using (diamondEntities entity = new diamondEntities () {IQueryable <role> role = entity. roles. orderBy (a =>. roleId ). skip (page-1) * rows ). take (rows); List <role> roleList = role. toList <role> (); if (roleList. count> 0) {return roleList;} else {return null ;}}} /// <summary> /// obtain the total number of pages /// </summary> /// <returns> </returns> public int GetTotal () {using (diamondEntities entity = new diamondEntities () {IQueryable <role> user = entity. roles. select (m => m); List <role> userList = user. toList (); return userList. count ;}}

The above is a small Editor for you to talk about MVC + EF easyui dataGrid dynamic loading of all the content of the paging table, I hope you can support a lot of help house ~