Asp.Net MVC中使用ACE模板之Jqgrid

第一次看到ACE模板，有种感动，有种相见恨晚的感觉，于是迅速来研究。它本身是基于bootstrap和jqueryui，但更nice，整合之后为后台开发节省了大量时间。发现虽然不是完美，整体效果还是不错，特此分享给园友。这一节先讲其中的Jqgrid。按照国际惯例，先上两张图。

集成了button，form，treeview以及日历，时间轴、chart等控件，非常丰富。下面是Jqgrid在MVC中的使用。

Asp.Net MVC中使用ACE模板之Jqgrid

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"

Asp.Net MVC中使用ACE模板之Jqgrid

相关推荐