• jQuery LigerUI 表格LigerGrid 结合 ASP.NET MVC 显示数据


    准备工作。创建MVC项目,拷贝LIGERUI库到Web程序中。

    一,准备工作

    使用开发工具:Microsoft Visual Studio 2010

    使用插件版本: jQuery 1.4.1  、 jQuery LigerUI 1.1.7

    二,创建MVC项目

    三,下载最新版的ligerui,并拷贝到web的根目录

    下载地址:http://ligerui.googlecode.com/

    增加视图和Action,引入jQuery库和ligerUI库的引用,模板页中增加视图的链接

    一,增加视图

    二,增加Action

    增加Action

    三,引入jQuery库和ligerui的引用

    引入jQuery库和ligerui的引用

    四:模板页增加视图的链接

    模板页增加视图的链接

    准备数据结构(ligerGrid的调用) 和数据源(增加一个Action,返回JSON格式)

    一,编写JS代码调用ligerGrid

    这里要注意一下URL的格式 : /Home/GetData 

    二,准备数据源(增加一个Action,返回JSON格式)

    准备数据源(增加一个Action,返回JSON格式)

    三,效果

    如何分页和排序。

    一,ligerGrid服务器端分页的原理

    可以利用firebug来调试,可以查看到grid加载分页数据的时候,会往服务器传几个数据:

    那么在后台我们需要根据这几个参数返回grid适合的数据:

    二,如何使用MVC Action接收并返回数据:

     1    public ActionResult GetData2()
    2 {
    3 //排序的字段名
    4 string sortname = Request.Params["sortname"];
    5 //排序的方向
    6 string sortorder = Request.Params["sortorder"];
    7 //当前页
    8 int page = Convert.ToInt32(Request.Params["page"]);
    9 //每页显示的记录数
    10 int pagesize = Convert.ToInt32(Request.Params["pagesize"]);
    11
    12 IList<Node> list = new List<Node>();
    13 var total = 1000;
    14 for (var i = 0; i < total; i++)
    15 {
    16 list.Add(new Node()
    17 {
    18 id = i,
    19 name = "部门" + i,
    20 time = DateTime.Now
    21 });
    22 }
    23 //这里模拟排序操作
    24 if (sortorder == "desc")
    25 list = list.OrderByDescending(c => c.id).ToList();
    26 else
    27 list = list.OrderBy(c => c.id).ToList();
    28
    29 IList<Node> targetList = new List<Node>();
    30 //这里模拟分页操作
    31 for (var i = 0; i < total; i++)
    32 {
    33 if (i >= (page - 1) * pagesize && i < page * pagesize)
    34 {
    35 targetList.Add(list[i]);
    36 }
    37 }
    38 var griddata = new { Rows = targetList, Total = total };
    39 return Json(griddata);
    40 }


    三,前台调用

    四,效果

    源码下载

    下载地址:GridMvcApp.7z

  • 相关阅读:
    占位博客
    占位博客
    占位博客
    占位
    占位
    占位
    占位
    占位
    python字典设置初始值setdefault()与get()
    自然语言处理如何入门
  • 原文地址:https://www.cnblogs.com/leoxie2011/p/2381720.html
Copyright © 2020-2023  润新知