EasyUI——实现展示后台数据代码
生活随笔
收集整理的這篇文章主要介紹了
EasyUI——实现展示后台数据代码
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
下面是View顯示代碼:
@{ViewBag.Title = "Index";Layout = "~/Views/Shared/_Layout.cshtml"; }<script type="text/javascript">$(function () {var editRow = undefined;$("#tb1").datagrid({fitColumns: true,striped: true,//這里需要接收【總行數total】和【數據組rows】的【JSON格式】的數據{total:23,rows:[{},{}]}url: "/UserExpression/GetAllUserInfos", singleSelect: false,pagination: true,rownumbers: true, pageSize: 5,pageList: [5, 10, 15],columns: [[// u.Id,u.UName,u.Pwd,u.Remark,u.SubTime{ title: "用戶名", field: "UName", allgn: "center", width: 40 },{ title: "密碼", field: "Pwd", allgn: "center", width: 40 },{ title: "備注", field: "Remark", allgn: "center", width: 40 },{ title: "保存時間", field: "SubTime", allgn: "center", width: 40 },{title: "編輯", field: "xx", allgn: "center", width: 40, formatter: function (value, row, index) {var btn = '<a class=Update>修改</a>|<a class=delete>刪除</a>';return btn;}},]],//在數據加載成功的時候觸發。 onLoadSuccess: function (data) {$('.Update').linkbutton({text: '修改',iconCls: 'icon-edit',plain: true,//是否顯示邊線 onClick: function () {var zhi = $("#tb1").datagrid("getSelections");window.location.href = '/HomeText/Edit?id=' + zhi[0].productID;}})$('.delete').linkbutton({text: '刪除',iconCls: 'icon-edit',plain: true,//是否顯示邊線 onClick: function () {var zhi = $("#tb1").datagrid("getSelections");$.ajax({type: 'POST',dataType: 'json',url: '/HomeText/DeleteConfirmed?id=' + zhi[0].productID,success: function (data) {$("#tb1").datagrid("reload");}})}})},toolbar: [{text: "添加",iconCls: "icon-add",handler: function () {window.open("/HomeText/Create")}},{text: "刪除",iconCls: "icon-cancel",}],})}) </script> <table id="tb1"></table>?
下面是Controller后臺代碼:
using IBLL; using SQLModel; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc;namespace MVC展示數據.Controllers {public class UserExpressionController : Controller{//利用spring.net在Config里面進行配置,這樣就不用new對象了public IUserInfo UserInfoBLL2 { get; set; } #region 加載用戶的數據public ActionResult Index(){return View();}public ActionResult GetAllUserInfos(){//根據分頁顯示數據int pageSize = Request["rows"] == null ? 5 : int.Parse(Request["rows"]);int pageIndex = Request["page"] == null ? 1 : int.Parse(Request["page"]); //--------------------------------第幾頁,每頁幾條,根據id進行查詢var data = UserInfoBLL2.LoadByPage(pageIndex, pageSize, n => n.Id)//-----避免重復查詢 .Select(u => new { u.Id, u.UName, u.Pwd, u.Remark, u.SubTime }); //總的數據條數int total = UserInfoBLL2.Load().Count();var result = new { total=total,rows=data};return Json(result, JsonRequestBehavior.AllowGet);} #endregion} } View Code部分視圖展示:
?
轉載于:https://www.cnblogs.com/shuai7boy/p/5292417.html
總結
以上是生活随笔為你收集整理的EasyUI——实现展示后台数据代码的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: ubuntu下无法获得锁 /var/li
- 下一篇: Mint-ui中loadmore(上拉加