Asp.Net 中Grid详解两种方法使用LigerUI加载数据库数据填充数据分页

1、关于html">LigerUI:

html">LigerUI 是基于jQuery 的UI框架,其核心设计目标是快速开发、使用简单、功能强大、轻量级、易扩展。简单而又强大,致力于快速打造Web前端界面解决方案,可以应用于.net,jsp,php等等web服务器环境。

  LigerUI演示地址:

  LigerUI API地址:

  官网百度云盘最新下载地址:https://pan.baidu.com/s/1o83vRZk

2、在MVC中使用LigerUI 填充Grid 2.1、新建一个空的MVC项目 把下载框架中Source文件夹下面的Lib目录复制到项目根目录,记住是Lib整个目录,为了防止文件名重复将他重命名一下如下图所示

Asp.Net 中Grid详解两种方法使用LigerUI加载数据库数据填充数据分页

 

2.2、新建一个控制Home,在Home控制器中添加对应的视图

Asp.Net 中Grid详解两种方法使用LigerUI加载数据库数据填充数据分页

 

2.3、在视图里添加Grid所需要的JS跟CSS,这里主要的就是前面4个路径不能写错,这里特别提示一下  不要引用MVC创建项目里Script文件夹下面的jQuery  我的用了就出错了  问题还没有找到  我直接删除了里面的js  也没有引用布局。

Asp.Net 中Grid详解两种方法使用LigerUI加载数据库数据填充数据分页

 

2.4不分页或者本地分页的视图代码:里面的代码都通俗易懂通过URL到控制器里面

<!DOCTYPE html> <html> <head> <meta charset=http://www.likecs.com/"utf-8" /> <title></title> <link rel=http://www.likecs.com/"stylesheet" type=http://www.likecs.com/"text/css" href=http://www.likecs.com/"~/ScriptStyle/ligerUI/skins/Aqua/css/ligerui-all.css" /> <script src=http://www.likecs.com/"~/ScriptStyle/jquery/jquery-1.4.4.min.js" type=http://www.likecs.com/"text/javascript"></script> <script src=http://www.likecs.com/"~/ScriptStyle/ligerUI/js/core/base.js" type=http://www.likecs.com/"text/javascript"></script> <script src=http://www.likecs.com/"~/ScriptStyle/ligerUI/js/plugins/ligerGrid.js" type=http://www.likecs.com/"text/javascript"></script> <script src=http://www.likecs.com/"~/ScriptStyle/ligerUI/js/ligerui.min.js" type=http://www.likecs.com/"text/javascript"></script> <script src=http://www.likecs.com/"~/ScriptStyle/ligerUI/js/plugins/ligerResizable.js" type=http://www.likecs.com/"text/javascript"></script> <script src=http://www.likecs.com/"~/ScriptStyle/ligerUI/js/plugins/ligerCheckBox.js" type=http://www.likecs.com/"text/javascript"></script> <style type=http://www.likecs.com/"text/css"> .divmain { width: 1200px; margin: 0 auto; text-align: center; } </style> <script type=http://www.likecs.com/"text/javascript"> $(document).ready(function () { //本地分页 $("#MainGridTest").ligerGrid({ width: 1000, columns: [ { display: "学号", name: "Number" }, { display: "流水号", name: "WaterID" }, { display: "地点", name: "Place" }, { display: "金钱", name: "Money" }, { display: "操作员", name: "People" }, { display: "时间", name: "Times",type:'date',format:'yyyy年MM月dd日 hh:mm:ss'}, { display: "备注", name: "Depict" } ], url: "/Home/GetDataNoPage", pageSize: 30, usePage: true, dataAction: "local",//本地分页 pageSizeOptions: [10, 20, 30, 50, 100]//可指定每页页面大小 }); }); </script> </head> <body> <br /><br /><br /> <h2 style=http://www.likecs.com/"text-align:center;">MVC LigerUI显示测试不分页或者是本地分页</h2><br /> <div class=http://www.likecs.com/"divmain" id=http://www.likecs.com/"MainGridTest"></div> </body> </html>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpyzxp.html