Asp.Net MVC中使用ACE模板之Jqgrid
生活随笔
收集整理的這篇文章主要介紹了
Asp.Net MVC中使用ACE模板之Jqgrid
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
第一次看到ACE模板，有種感動，有種相見恨晚的感覺，于是迅速來研究。它本身是基于bootstrap和jqueryui，但更nice，整合之后為后臺開發節省了大量時間。 發現雖然不是完美，整體效果還是不錯，特此分享給園友。這一節先講其中的Jqgrid。按照國際慣例，先上兩張圖。
? ?
集成了button，form，treeview以及日歷，時間軸、chart等控件，非常豐富。下面是Jqgrid在MVC中的使用。
jqgrid的加載，排序，查找都是基于后臺方法，不是在內存中完成，但也有一些小坑。下面一一道來。
一、引入ace模板
?ace本身考慮了對ie的兼容，加上bootstrap和jqueryui所以引入的樣式和腳本文件比較多。我拿掉了一下googlefont的鏈接，請求太慢了，你懂的。現在MVC最關心的就是RenderBody的位置。在page-content下的Row，也可以將page-header放入子頁面中去，自己多寫幾個元素，這個就在于你自己的選擇了。
<div class="page-content"><div class="page-header"> <h1> <span>控制臺</span> <small> <i class="icon-double-angle-right"></i> <span>查看</span> </small> </h1> </div><!-- /.page-header --> <div class="row"> <div class="col-xs-12"> <!-- PAGE CONTENT BEGINS --> @RenderBody() <!-- PAGE CONTENT ENDS --> </div><!-- /.col --> </div><!-- /.row --> </div><!-- /.page-content -->全部的layout.cshtml
<!DOCTYPE html> <html > <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>@ViewBag.Title</title> <link href="~/Content/CSS/bootstrap.min.css" rel="stylesheet" /> <link rel="stylesheet" href="~/Content/CSS/font-awesome.min.css" /> <script src="~/Content/Js/jquery-2.0.3.min.js"></script> <link href="~/Content/CSS/niqiu.css" rel="stylesheet" /> <!--[if IE 7]> <link rel="stylesheet" href="~/Content/CSS/font-awesome-ie7.min.css" /> <![endif]--> <!-- page specific plugin styles --> <!-- ace styles --> <link rel="stylesheet" href="~/Content/CSS/ace.min.css" /> <link rel="stylesheet" href="~/Content/CSS/ace-rtl.min.css" /> <link rel="stylesheet" href="~/Content/CSS/ace-skins.min.css" /> <!--[if lte IE 8]> <link rel="stylesheet" href="~/Content/CSS/ace-ie.min.css" /> <![endif]--> <!-- inline styles related to this page --> <!-- ace settings handler --> <script src="~/Content/Js/ace-extra.min.js"></script> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="~/Content/Js/html5shiv.js"></script> <script src="~/Content/Js/respond.min.js"></script> <![endif]--> </head> <body> <div class="navbar navbar-default" id="navbar"> <script type="text/javascript"> try { ace.settings.check('navbar', 'fixed') } catch (e) { } </script> <div class="navbar-container" id="navbar-container"> <div class="navbar-header pull-left"> <a href="#" class="navbar-brand"> <small> <i class="icon-leaf"></i> XiaoNao Admin </small> </a><!-- /.brand --> </div><!-- /.navbar-header --> <div class="navbar-header pull-right" role="navigation"> <ul class="nav ace-nav"> <li class="green"> <a data-toggle="dropdown" class="dropdown-toggle" href="#"> <i class="icon-envelope icon-animated-vertical"></i> <span class="badge badge-success">5</span> </a> <ul class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close"> <li class="dropdown-header"> <i轉載于:https://www.cnblogs.com/fuqiang88/p/4731548.html
總結
以上是生活随笔為你收集整理的Asp.Net MVC中使用ACE模板之Jqgrid的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Hibernate与MyBatis区别
- 下一篇： asp.net ajax控件工具集 Au