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

开发 后端
第一次看到ACE模板,有种感动,有种相见恨晚的感觉,于是迅速来研究。它本身是基于bootstrap和jqueryui,但更nice,整合之后为后台开发节省了大量时间。

第一次看到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 --> 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.

全部的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 class="icon-envelope-alt"></i> 
Messages  
                                </li> 
 
                                <li> 
                                    <a href="#">   
                                        <img src="~/Content/avatars/avatar.png" class="msg-photo" alt="Alex's Avatar" /> 
                                        <span class="msg-body"> 
                                            <span class="msg-title"> 
                                                <span class="blue">Alex:</span> 
                                                Ciao sociis natoque penatibus et auctor ...  
                                            </span> 
 
                                            <span class="msg-time"> 
                                                <i class="icon-time"></i> 
                                                <span>a moment ago</span> 
                                            </span> 
                                        </span> 
                                    </a> 
                                </li> 
 
                                <li> 
                                    <a href="#"> 
                                        <img src="~/Content/avatars/avatar3.png" class="msg-photo" alt="Susan's Avatar" /> 
                                        <span class="msg-body"> 
                                            <span class="msg-title"> 
                                                <span class="blue">Susan:</span> 
                                                Vestibulum id ligula porta felis euismod ...  
                                            </span> 
 
                                            <span class="msg-time"> 
                                                <i class="icon-time"></i> 
                                                <span>20 minutes ago</span> 
                                            </span> 
                                        </span> 
                                    </a> 
                                </li> 
 
                                <li> 
                                    <a href="#"> 
                                        <img src="~/Content/avatars/avatar4.png" class="msg-photo" alt="Bob's Avatar" /> 
                                        <span class="msg-body"> 
                                            <span class="msg-title"> 
                                                <span class="blue">Bob:</span> 
                                                Nullam quis risus eget urna mollis ornare ...  
                                            </span> 
 
                                            <span class="msg-time"> 
                                                <i class="icon-time"></i> 
                                                <span>3:15 pm</span> 
                                            </span> 
                                        </span> 
                                    </a> 
                                </li> 
 
                                <li> 
                                    <a href="#"> 
                                        See all messages  
                                        <i class="icon-arrow-right"></i> 
                                    </a> 
                                </li> 
                            </ul> 
                        </li> 
 
                        <li class="light-blue"> 
                            <a data-toggle="dropdown" href="#" class="dropdown-toggle"> 
                                <img class="nav-user-photo" src="~/Content/avatars/user.jpg" alt="Jason's Photo" /> 
                                <span class="user-info"> 
                                    @if( Session["uname"]!=null){  
                                    <small>Welcome,</small> 
                                     @Session["uname"].ToString();  
                                    }  
                                </span> 
 
                                <i class="icon-caret-down"></i> 
                            </a> 
 
                            <ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close"> 
                                <li> 
                                    <a href="#"> 
                                        <i class="icon-cog"></i> 
                                        Settings  
                                    </a> 
                                </li> 
                                <li> 
                                    <a href="#"> 
                                        <i class="icon-user"></i> 
                                        Profile  
                                    </a> 
                                </li> 
 
                                <li class="divider"></li> 
 
                                <li> 
                                    <a href="@Url.Action("LogOff","User")"> 
                                        <i class="icon-off"></i> 
                                        Logout  
                                    </a> 
                                </li> 
                            </ul> 
                        </li> 
                    </ul><!-- /.ace-nav --> 
                </div><!-- /.navbar-header --> 
            </div><!-- /.container --> 
        </div> 
 
        <div class="main-container" id="main-container"> 
            <script type="text/javascript"> 
                try { ace.settings.check('main-container', 'fixed') } catch (e) { }  
            </script> 
 
            <div class="main-container-inner"> 
                <a class="menu-toggler" id="menu-toggler" href="#"> 
                    <span class="menu-text"></span> 
                </a> 
 
                <div class="sidebar" id="sidebar"> 
                    <script type="text/javascript"> 
                        try { ace.settings.check('sidebar', 'fixed') } catch (e) { }  
                    </script> 
 
                    <div class="sidebar-shortcuts" id="sidebar-shortcuts"> 
                        <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large"> 
                            <button class="btn btn-success"> 
                                <i class="icon-signal"></i> 
                            </button> 
 
                            <button class="btn btn-info"> 
                                <i class="icon-pencil"></i> 
                            </button> 
 
                            <button class="btn btn-warning"> 
                                <i class="icon-group"></i> 
                            </button> 
 
                            <button class="btn btn-danger"> 
                                <i class="icon-cogs"></i> 
                            </button> 
                        </div> 
 
                        <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini"> 
                            <span class="btn btn-success"></span> 
 
                            <span class="btn btn-info"></span> 
 
                            <span class="btn btn-warning"></span> 
 
                            <span class="btn btn-danger"></span> 
                        </div> 
                    </div> 
                      
                    <!-- #sidebar-shortcuts --> 
 
                    <ul class="nav nav-list"> 
                        <li class="active"> 
                            <a href="@Url.Action("Index","Admin")"> 
                                <i class="icon-dashboard"></i> 
                                <span class="menu-text"> 控制台 </span> 
                            </a> 
                        </li> 
 
                        <li> 
                            <a href="#" class="dropdown-toggle"> 
                                <i class="icon-list"></i> 
                                <span class="menu-text"> 产品 </span> 
 
                                <b class="arrow icon-angle-down"></b> 
                            </a> 
 
                            <ul class="submenu"> 
                                <li> 
                                    <a href="@Url.Action("Index","Product")"> 
                                        <i class="icon-double-angle-right"></i> 
                                         产品管理  
                                    </a> 
                                </li> 
 
                                <li> 
                                    <a href="@Url.Action("CategoryList","Product")"> 
                                        <i class="icon-double-angle-right"></i> 
                                        分类管理  
                                    </a> 
                                </li> 
                            </ul> 
                        </li> 
                          
                            <li> 
                            <a href="#" class="dropdown-toggle"> 
                                <i class="icon-desktop"></i> 
                                <span class="menu-text"> 用户 </span> 
 
                                <b class="arrow icon-angle-down"></b> 
                            </a> 
 
                            <ul class="submenu"> 
                                <li> 
                                    <a href="@Url.Action("Index","User")"> 
                                        <i class="icon-double-angle-right"></i> 
                                        用户管理  
                                    </a> 
                                </li> 
                                <li> 
                                    <a href="@Url.Action("EditInfo","User")"> 
                                        <i class="icon-double-angle-right"></i> 
                                        个人设置  
                                    </a> 
                                </li> 
                            </ul> 
                        </li> 
                   
                    </ul><!-- /.nav-list --> 
 
                    <div class="sidebar-collapse" id="sidebar-collapse"> 
                        <i class="icon-double-angle-left" data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right"></i> 
                    </div> 
 
                    <script type="text/javascript"> 
                        try { ace.settings.check('sidebar', 'collapsed') } catch (e) { }  
                    </script> 
                </div> 
 
                <div class="main-content"> 
                    <div class="breadcrumbs" id="breadcrumbs"> 
                        <script type="text/javascript"> 
                            try { ace.settings.check('breadcrumbs', 'fixed') } catch (e) { }  
                        </script> 
 
                        <ul class="breadcrumb"> 
                            <li> 
                                <i class="icon-home home-icon"></i> 
                                <a href="@Url.Action("Index","Admin")">Home</a> 
                            </li> 
                            <li id="currentpart" class="active">控制台</li> 
                        </ul><!-- .breadcrumb --> 
 
                        <div class="nav-search" id="nav-search"> 
                            <form class="form-search"> 
                                <span class="input-icon"> 
                                    <input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" /> 
                                    <i class="icon-search nav-search-icon"></i> 
                                </span> 
                            </form> 
                        </div><!-- #nav-search --> 
                    </div> 
 
                    <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 --> 
                </div><!-- /.main-content --> 
 
                <div class="ace-settings-container" id="ace-settings-container"> 
                    <div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn"> 
                        <i class="icon-cog bigger-150"></i> 
                    </div> 
 
                    <div class="ace-settings-box" id="ace-settings-box"> 
                        <div> 
                            <div class="pull-left"> 
                                <select id="skin-colorpicker" class="hide"> 
                                    <option data-skin="default" value="#438EB9">#438EB9</option> 
                                    <option data-skin="skin-1" value="#222A2D">#222A2D</option> 
                                    <option data-skin="skin-2" value="#C6487E">#C6487E</option> 
                                    <option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option> 
                                </select> 
                            </div> 
                            <span>&nbsp; Choose Skin</span> 
                        </div> 
 
                        <div> 
                            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-navbar" /> 
                            <label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label> 
                        </div> 
 
                        <div> 
                            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-sidebar" /> 
                            <label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label> 
                        </div> 
 
                        <div> 
                            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-breadcrumbs" /> 
                            <label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label> 
                        </div> 
 
                        <div> 
                            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" /> 
                            <label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label> 
                        </div> 
 
                        <div> 
                            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-add-container" /> 
                            <label class="lbl" for="ace-settings-add-container"> 
                                Inside  
                                <b>.container</b> 
                            </label> 
                        </div> 
                    </div> 
                </div><!-- /#ace-settings-container --> 
            </div><!-- /.main-container-inner --> 
 
            <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse"> 
                <i class="icon-double-angle-up icon-only bigger-110"></i> 
            </a> 
        </div><!-- /.main-container --> 
 
        <!-- basic scripts --> 
 
        <!--[if !IE]> 
 
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
        <![endif]-->    
 
        <!--[if IE]> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<![endif]--> 
 
        <!--[if IE]> 
<script type="text/javascript"> 
 window.jQuery || document.write("<script src='~/Content/Js/jquery-1.10.2.min.js'>"+"<"+"/script>");  
</script> 
<![endif]--> 
 
        <script type="text/javascript"> 
            if ("ontouchend" in document) document.write("<script src='~/Content/Js/jquery.mobile.custom.min.js'>" + "<" + "/script>");  
        </script> 
        <script src="~/Content/Js/bootstrap.min.js"></script> 
        <script src="~/Content/Js/typeahead-bs2.min.js"></script> 
 
        <!-- page specific plugin scripts --> 
 
        <script src="~/Content/Js/jquery-ui-1.10.3.custom.min.js"></script> 
        <script src="~/Content/Js/jquery.ui.touch-punch.min.js"></script> 
        <script src="~/Content/Js/bootbox.min.js"></script> 
 
        <!-- ace scripts --> 
 
        <script src="~/Content/Js/ace-elements.min.js"></script> 
        <script src="~/Content/Js/ace.min.js"></script> 
 
        <!-- inline scripts related to this page --> 
 
        <script type="text/javascript"> 
            jQuery(function ($) {  
 
                /* initialize the external events  
                    -----------------------------------------------------------------*/  
 
                $('#external-events div.external-event').each(function () {  
 
                    // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)  
                    // it doesn't need to have a start or end  
                    var eventObject = {  
                        title: $.trim($(this).text()) // use the element's text as the event title  
                    };  
 
                    // store the Event Object in the DOM element so we can get to it later  
                    $(this).data('eventObject', eventObject);  
 
                    // make the event draggable using jQuery UI  
                    $(this).draggable({  
                        zIndex: 999,  
                        revert: true,      // will cause the event to go back to its  
                        revertDuration: 0  //  original position after the drag  
                    });  
 
                });  
 
                /* initialize the calendar  
                -----------------------------------------------------------------*/  
            })  
        </script> 
    <div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div> 
    <script src="~/Content/Js/niqiu.js"></script> 
     @RenderSection("scripts", required: false)  
   
</body></html> 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.
  • 112.
  • 113.
  • 114.
  • 115.
  • 116.
  • 117.
  • 118.
  • 119.
  • 120.
  • 121.
  • 122.
  • 123.
  • 124.
  • 125.
  • 126.
  • 127.
  • 128.
  • 129.
  • 130.
  • 131.
  • 132.
  • 133.
  • 134.
  • 135.
  • 136.
  • 137.
  • 138.
  • 139.
  • 140.
  • 141.
  • 142.
  • 143.
  • 144.
  • 145.
  • 146.
  • 147.
  • 148.
  • 149.
  • 150.
  • 151.
  • 152.
  • 153.
  • 154.
  • 155.
  • 156.
  • 157.
  • 158.
  • 159.
  • 160.
  • 161.
  • 162.
  • 163.
  • 164.
  • 165.
  • 166.
  • 167.
  • 168.
  • 169.
  • 170.
  • 171.
  • 172.
  • 173.
  • 174.
  • 175.
  • 176.
  • 177.
  • 178.
  • 179.
  • 180.
  • 181.
  • 182.
  • 183.
  • 184.
  • 185.
  • 186.
  • 187.
  • 188.
  • 189.
  • 190.
  • 191.
  • 192.
  • 193.
  • 194.
  • 195.
  • 196.
  • 197.
  • 198.
  • 199.
  • 200.
  • 201.
  • 202.
  • 203.
  • 204.
  • 205.
  • 206.
  • 207.
  • 208.
  • 209.
  • 210.
  • 211.
  • 212.
  • 213.
  • 214.
  • 215.
  • 216.
  • 217.
  • 218.
  • 219.
  • 220.
  • 221.
  • 222.
  • 223.
  • 224.
  • 225.
  • 226.
  • 227.
  • 228.
  • 229.
  • 230.
  • 231.
  • 232.
  • 233.
  • 234.
  • 235.
  • 236.
  • 237.
  • 238.
  • 239.
  • 240.
  • 241.
  • 242.
  • 243.
  • 244.
  • 245.
  • 246.
  • 247.
  • 248.
  • 249.
  • 250.
  • 251.
  • 252.
  • 253.
  • 254.
  • 255.
  • 256.
  • 257.
  • 258.
  • 259.
  • 260.
  • 261.
  • 262.
  • 263.
  • 264.
  • 265.
  • 266.
  • 267.
  • 268.
  • 269.
  • 270.
  • 271.
  • 272.
  • 273.
  • 274.
  • 275.
  • 276.
  • 277.
  • 278.
  • 279.
  • 280.
  • 281.
  • 282.
  • 283.
  • 284.
  • 285.
  • 286.
  • 287.
  • 288.
  • 289.
  • 290.
  • 291.
  • 292.
  • 293.
  • 294.
  • 295.
  • 296.
  • 297.
  • 298.
  • 299.
  • 300.
  • 301.
  • 302.
  • 303.
  • 304.
  • 305.
  • 306.
  • 307.
  • 308.
  • 309.
  • 310.
  • 311.
  • 312.
  • 313.
  • 314.
  • 315.
  • 316.
  • 317.
  • 318.
  • 319.
  • 320.
  • 321.
  • 322.
  • 323.
  • 324.
  • 325.
  • 326.
  • 327.
  • 328.
  • 329.
  • 330.
  • 331.
  • 332.
  • 333.
  • 334.
  • 335.
  • 336.
  • 337.
  • 338.
  • 339.
  • 340.
  • 341.
  • 342.
  • 343.
  • 344.
  • 345.
  • 346.
  • 347.
  • 348.
  • 349.
  • 350.
  • 351.
  • 352.
  • 353.
  • 354.
  • 355.
  • 356.
  • 357.
  • 358.
  • 359.
  • 360.
  • 361.
  • 362.
  • 363.
  • 364.
  • 365.
  • 366.
  • 367.
  • 368.
  • 369.
  • 370.
  • 371.
  • 372.
  • 373.
  • 374.
  • 375.
  • 376.
  • 377.
  • 378.
  • 379.
  • 380.
  • 381.
  • 382.
  • 383.
  • 384.
  • 385.
  • 386.
  • 387.
  • 388.
  • 389.
  • 390.
  • 391.
  • 392.
  • 393.
  • 394.
  • 395.
  • 396.
  • 397.
  • 398.
  • 399.
  • 400.
  • 401.
  • 402.
  • 403.
  • 404.
  • 405.
  • 406.
  • 407.
  • 408.
  • 409.
  • 410.
  • 411.
  • 412.
  • 413.
  • 414.
  • 415.
  • 416.
  • 417.
  • 418.
  • 419.
  • 420.
  • 421.
  • 422.
  • 423.
  • 424.
  • 425.
  • 426.
  • 427.
  • 428.
  • 429.
  • 430.
  • 431.
  • 432.
  • 433.
  • 434.
  • 435.
  • 436.
  • 437.
  • 438.
  • 439.
  • 440.
  • 441.
  • 442.
  • 443.
  • 444.
  • 445.
  • 446.
  • 447.
  • 448.
  • 449.
  • 450.
  • 451.
  • 452.
  • 453.
  • 454.
  • 455.
  • 456.
  • 457.
  • 458.
  • 459.

#p#

二、引入Jqgrid

如果你的表格比较多,建议你做一个分部试图,重复利用,我的partview JqgridInit.cshtml 如下,

<link rel="stylesheet" href="~/Content/CSS/ui.jqgrid.css" /> 
<script src="~/Content/Js/jqGrid/jquery.jqGrid.min.js"></script> 
<script src="~/Content/Js/jqGrid/i18n/grid.locale-en.js"></script> 
<style> 
    #pager2 {  
        height: 40px;  
    }  
 
    .FormGrid ,#DelTb1_list2{  
        position: relative;  
        overflow: visible;  
        float: left;  
    }  
   .ui-jqgrid-sortable {  
       height: 30px !important;          
   }   
</style> 
<table id="list"></table> 
<div id="pager"></div> 
<span class="errorinfo"></span> 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.

list用来呈现数据,pager用来分页,errorinfo用来提示错误。jqgrid,涉及的配置比较多。需要后台代码的全面的支持,所以在介绍配置之前,先介绍下模型和仓库。

1.Product: 我们需要呈现的一个是一个产品,有很多不同的价格及其他,这些都将成为表格的列名。

public class Product  
    {  
        /// <summary>  
        /// Gets or sets the id.  
        /// </summary>  
        /// <value>The id.</value>  
        [Key]  
        public int ProductId { getset; }  
 
        /// <summary>  
        /// 直接做型号处理  
        /// </summary>  
        public string ProductName { getset; }  
        /// <summary>  
        /// Gets or sets the category.  
        /// </summary>  
        /// <value>The category.</value>  
        public string Category { getset; }  
 
        /// <summary>  
        /// Gets or sets the brand.  
        /// </summary>  
        /// <value>The brand.</value>  
        public string Brand { getset; }  
 
        public string Size { getset; }  
 
        /// <summary>  
        /// Gets or sets the 规格.  
        /// </summary>  
        /// <value>The standard.</value>  
        public string Standard { getset; }  
 
        /// <summary>  
        /// 专柜  
        /// </summary>  
        public decimal ZhuanGui { getset; }  
 
        /// <summary>  
        /// Gets or sets the 莎莎 price.  
        /// </summary>  
        /// <value>The sa sa price.</value>  
        public decimal SaSaPrice { getset; }  
 
        /// <summary>  
        /// Gets or sets the 卓越 price.  
        /// </summary>  
        /// <value>The zhuoyue price.</value>  
        public decimal ZhuoyuePrice { getset; }  
        /// <summary>  
        /// Gets or sets the 卡莱美 price.  
        /// </summary>  
        /// <value>The ka lai price.</value>  
        public decimal KaLaiPrice { getset; }  
 
        /// <summary>  
        /// 雅施  
        /// </summary>  
        public decimal YaShi { getset; }  
 
        /// <summary>  
        /// Gets or sets the 万宁 price.  
        /// </summary>  
        /// <value>The wanning price.</value>  
        public decimal WanningPrice { getset; }  
        /// <summary>  
        /// Gets or sets the 屈臣氏 price.  
        /// </summary>  
        /// <value>The quchengshi price.</value>  
        public decimal QuchengshiPrice { getset; }  
        /// <summary>  
        /// Gets or sets the 药店 price.  
        /// </summary>  
        /// <value>The drugstore price.</value>  
        public decimal DrugstorePrice { getset; }  
 
        /// <summary>  
        /// Gets or sets the others.  
        /// </summary>  
        /// <value>The others.</value>  
        public string Others { getset; }  
 
        /// <summary>  
        /// Gets or sets the create time.  
        /// </summary>  
        /// <value>The create time.</value>  
        public DateTime CreateTime { getset; }  
 
        public string ImgUrl { getset; }  
 
        public Product()  
        {  
            CreateTime = DateTime.Now;  
        }  
    } 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.

2.ProductRepository (仓库真的很好,独立了业务逻辑,可测试,复用快),add、remove、update不用讲了,主要讲一讲排序。

1)排序查询的意义在于根据不同的属性进行排序。

public class ProductRepository:IProductRepository  
    {  
        private readonly XNDb _db = new XNDb();  
        //....  
        public IEnumerable<Product> Find(string sort = "asc", string property = "ProductName"int skip = 0, int take = 10)  
        {  
            var propertyInfo = typeof(Product).GetProperty(property);//反射出这个属性  
            Func<Product, object> expn = e => propertyInfo.GetValue(e, null);//委托  
            var rawpros = _db.Products;  
            IEnumerable<Product> pros = sort == "asc" ? rawpros.OrderBy(expn).Skip(skip).Take(take).ToArray()  
                : rawpros.OrderByDescending(expn).Skip(skip).Take(take).ToArray();//分页排序  
            return pros;  
        }  
        //....  

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

在只考虑排序的情况下,控制器的代码就相对简单:

public JsonResult GetAllPros( string sord = "asc"string sidx = "ProductName",int page = 1,  int rows = 10)  
        {  
            var pros = _repository.Find(sord, switchSidx(sidx), (page - 1) * rows, rows);  
            var objpros = new List<object>(pros);  
            var jsonData = JqGridModel.GridData(page, rows, _repository.Count, objpros);  
            return Json(jsonData, JsonRequestBehavior.AllowGet);  
        } 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

如果涉及到复杂些的查询,等于不等于,包含之类的,会多了后面mark部分的参数,这里我用很笨的办法实现了单列查询,也就就是根据包含、等于、不等于先查出来,再排序,如果是多重查询,大家可以参考博客:http://www.codeproject.com/Articles/58357/Using-jqGrid-s-search-toolbar-with-multiple-filter

public JsonResult GetAllPros( string sord = "asc"string sidx = "ProductName",int page = 1,   
            int rows = 10, bool _search = false,string searchField=""string searchOper=""string searchString="")  
        {  
 
            var rawpros = GetRawPros(_search, searchField, searchOper, searchString);  
            var propertyInfo = typeof(Product).GetProperty(switchSidx(sidx));  
            Func<Product, object> expn = e => propertyInfo.GetValue(e, null);  
 
            var enumerable = rawpros as Product[] ?? rawpros.ToArray();  
            IEnumerable<Product> pros = sord == "asc" ? enumerable.OrderBy(expn).Skip((page - 1) * rows).Take(rows).ToArray()  
                : enumerable.OrderByDescending(expn).Skip((page - 1) * rows).Take(rows).ToArray();  
 
            var objpros = new List<object>(pros);  
            var jsonData = JqGridModel.GridData(page, rows, enumerable.Count(), objpros);  
            return Json(jsonData, JsonRequestBehavior.AllowGet);  
        } 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.

需要说明的是,这里的switchsidx就是将中文列名转为对象属性名,一堆case语句,然后JqgridModel的getdata,是jqgrid定义好的一种json格式,包含了每页行数和总页数等信息,因为前段的每页行数是可以变化的。

public class JqGridModel  
    {  
        /// <summary>  
        /// Grids the data.  
        /// </summary>  
        /// <param name="page1">当前页数.</param>  
        /// <param name="rows">每页显示数目.</param>  
        /// <param name="total"></param>  
        /// <param name="objects">集合对象</param>  
        /// <returns>System.Object.</returns>  
        public static object GridData(int page1, int rows, int total, IEnumerable<object> objects)  
        {  
            int pageSize = rows;  
            var totalPages = (int)Math.Ceiling((float)total / pageSize);  
 
            //可根据具体情况,实现排序。  
            var jsonData = new 
            {  
                total = totalPages,  
                page = page1,  
                records = total,  
                rows = objects.ToArray()  
            };  
 
            return jsonData;  
        }  
 
    } 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.

2)需要一个新增:(记住返回json的时候要allowGet,不然可能造成添加失败,其他地方同理)

[HttpPost]  
        public ActionResult Create(Product product)  
        {  
            _repository.Add(product);  
            var fu = _repository.FindByName(product.ProductName);  
            return Json(fu, JsonRequestBehavior.AllowGet);  
        } 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

3)编辑和删除:这里的编辑有三个参数,一个对象,一个操作,一个id,id是个鸡肋,居然返回的是table的行号(会随着排序变化),oper可能是add,del,这里我只用到了edit,del传回的id尝试改变它为对象的id,但没成功。用了因外一种方式实现删除。

[HttpPost]  
        public ActionResult Edit(Product pro, string oper, int id)  
        {  
            if (oper == "edit")  
            {  
                _repository.Update(pro);  
                pro.CreateTime = DateTime.Now;  
            }  
            return Json(pro, JsonRequestBehavior.AllowGet);  
        }  
 
       [HttpPost]  
       public ActionResult Delete(int id)  
       {  
        _repository.Remove(id);  
         return Json(id, JsonRequestBehavior.AllowGet); ;  
         } 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.

有了这四个方法就ok了。下面来讲配置。先打个预防针,主要关心两个方法,一个设置table,一个设置分页。然后代码比较长..... 希望没有打消你驾驭它的渴望。

全部控制器代码:包含了分类的一些,道理一样

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Linq.Expressions;  
using System.Text;  
using System.Web;  
using System.Web.Mvc;  
using XNManage.Common;  
using XNManage.Models;  
using XNManage.Repository;  
using XNManage.ViewModel;  
 
namespace XNManage.Controllers  
{  
    public class ProductController : Controller  
    {  
        //  
        // GET: /Product/  
        private readonly IProductRepository _repository;  
 
        private IEnumerable<CategoryViewModel> _categoryViewModels = new List<CategoryViewModel>();   
 
 
        public ProductController(IProductRepository repository)  
        {  
            _repository = repository;  
        }  
 
        #region 产品  
 
        [LoginValid]  
        public ActionResult Index()  
        {  
            //CategoryInit();  
            //ProductsInits();  
            return View();  
        }  
 
 
        public JsonResult GetAllPros( string sord = "asc"string sidx = "ProductName",int page = 1,   
            int rows = 10, bool _search = false,string searchField=""string searchOper=""string searchString="")  
        {  
 
            var rawpros = GetRawPros(_search, searchField, searchOper, searchString);  
            var propertyInfo = typeof(Product).GetProperty(switchSidx(sidx));  
            Func<Product, object> expn = e => propertyInfo.GetValue(e, null);  
 
            var enumerable = rawpros as Product[] ?? rawpros.ToArray();  
            IEnumerable<Product> pros = sord == "asc" ? enumerable.OrderBy(expn).Skip((page - 1) * rows).Take(rows).ToArray()  
                : enumerable.OrderByDescending(expn).Skip((page - 1) * rows).Take(rows).ToArray();  
 
            var objpros = new List<object>(pros);  
            var jsonData = JqGridModel.GridData(page, rows, enumerable.Count(), objpros);  
            return Json(jsonData, JsonRequestBehavior.AllowGet);  
        }  
 
        private IEnumerable<Product> GetRawPros(bool search = falsestring searchField = ""string searchOper = ""string searchString = "")  
        {  
            var rawpros = _repository.FindAll();  
            if (!search) return rawpros;  
 
            switch (switchSidx(searchField))  
            {  
                case "ProductName":  
                    switch (searchOper)  
                    {  
                        case "cn":  
                            rawpros = rawpros.Where(n => n.ProductName.Contains(searchString));  
                            break;  
                        case "eq":  
                            rawpros = rawpros.Where(n => n.ProductName == searchString);  
                            break;  
                        case "ne":  
                            rawpros = rawpros.Where(n => n.ProductName != searchString);  
                            break;  
                        default:  
                            rawpros = rawpros.Where(n => n.ProductName.Contains(searchString));  
                            break;  
                    }  
                    break;  
 
                case "Category":  
                    switch (searchOper)  
                    {  
                        case "cn":  
                            rawpros = rawpros.Where(n => n.Category.Contains(searchString));  
                            break;  
                        case "eq":  
                            rawpros = rawpros.Where(n => n.Category == searchString);  
                            break;  
                        case "ne":  
                            rawpros = rawpros.Where(n => n.Category != searchString);  
                            break;  
                        default:  
                            rawpros = rawpros.Where(n => n.Category.Contains(searchString));  
                            break;  
                    }  
                    break;  
                case "Brand":  
                    switch (searchOper)  
                    {  
                        case "cn":  
                            rawpros = rawpros.Where(n => n.Brand.Contains(searchString));  
                            break;  
                        case "eq":  
                            rawpros = rawpros.Where(n => n.Brand == searchString);  
                            break;  
                        case "ne":  
                            rawpros = rawpros.Where(n => n.Brand != searchString);  
                            break;  
                        default:  
                            rawpros = rawpros.Where(n => n.Brand.Contains(searchString));  
                            break;  
                    }  
                    break;  
                case "SaSaPrice":  
                    switch (searchOper)  
                    {  
                        case "cn":  
                            rawpros = rawpros.Where(n => n.SaSaPrice >= Convert.ToDecimal(searchString));  
                            break;  
                        case "eq":  
                            rawpros = rawpros.Where(n => n.SaSaPrice == Convert.ToDecimal(searchString));  
                            break;  
                        case "ne":  
                            rawpros = rawpros.Where(n => n.SaSaPrice != Convert.ToDecimal(searchString));  
                            break;  
                    }  
                    break;  
                case "ZhuanGui":  
                    switch (searchOper)  
                    {  
                        case "cn":  
                            rawpros = rawpros.Where(n => n.ZhuanGui >= Convert.ToDecimal(searchString));  
                            break;  
                        case "eq":  
                            rawpros = rawpros.Where(n => n.ZhuanGui == Convert.ToDecimal(searchString));  
                            break;  
                        case "ne":  
                            rawpros = rawpros.Where(n => n.ZhuanGui != Convert.ToDecimal(searchString));  
                            break;  
                    }  
                    break;  
                case "YaShi":  
                    switch (searchOper)  
                    {  
                        case "cn":  
                            rawpros = rawpros.Where(n => n.YaShi >= Convert.ToDecimal(searchString));  
                            break;  
                        case "eq":  
                            rawpros = rawpros.Where(n => n.YaShi == Convert.ToDecimal(searchString));  
                            break;  
                        case "ne":  
                            rawpros = rawpros.Where(n => n.YaShi != Convert.ToDecimal(searchString));  
                            break;  
                    }  
                    break;  
                case "ZhuoyuePrice":  
                    switch (searchOper)  
                    {  
                        case "cn":  
                            rawpros = rawpros.Where(n => n.ZhuoyuePrice >= Convert.ToDecimal(searchString));  
                            break;  
                        case "eq":  
                            rawpros = rawpros.Where(n => n.ZhuoyuePrice == Convert.ToDecimal(searchString));  
                            break;  
                        case "ne":  
                            rawpros = rawpros.Where(n => n.ZhuoyuePrice != Convert.ToDecimal(searchString));  
                            break;  
                    }  
                    break;  
                case "WanningPrice":  
                    switch (searchOper)  
                    {  
                        case "cn":  
                            rawpros = rawpros.Where(n => n.WanningPrice >= Convert.ToDecimal(searchString));  
                            break;  
                        case "eq":  
                            rawpros = rawpros.Where(n => n.WanningPrice == Convert.ToDecimal(searchString));  
                            break;  
                        case "ne":  
                            rawpros = rawpros.Where(n => n.WanningPrice != Convert.ToDecimal(searchString));  
                            break;  
                    }  
                    break;  
                case "QuchengshiPrice":  
                    switch (searchOper)  
                    {  
                        case "cn":  
                            rawpros = rawpros.Where(n => n.QuchengshiPrice >= Convert.ToDecimal(searchString));  
                            break;  
                        case "eq":  
                            rawpros = rawpros.Where(n => n.QuchengshiPrice == Convert.ToDecimal(searchString));  
                            break;  
                        case "ne":  
                            rawpros = rawpros.Where(n => n.QuchengshiPrice != Convert.ToDecimal(searchString));  
                            break;  
                    }  
                    break;  
                case "DrugstorePrice":  
                    switch (searchOper)  
                    {  
                        case "cn":  
                            rawpros = rawpros.Where(n => n.DrugstorePrice >= Convert.ToDecimal(searchString));  
                            break;  
                        case "eq":  
                            rawpros = rawpros.Where(n => n.DrugstorePrice == Convert.ToDecimal(searchString));  
                            break;  
                        case "ne":  
                            rawpros = rawpros.Where(n => n.DrugstorePrice != Convert.ToDecimal(searchString));  
                            break;  
                    }  
                    break;  
                case "Others":  
                    switch (searchOper)  
                    {  
                        case "cn":  
                            rawpros = rawpros.Where(n => n.Others.Contains(searchString));  
                            break;  
                        case "eq":  
                            rawpros = rawpros.Where(n => n.Others ==searchString);  
                            break;  
                        case "ne":  
                            rawpros = rawpros.Where(n => n.Others !=searchString);  
                            break;  
                    }  
                    break;  
                case "KaLaiPrice":  
                    switch (searchOper)  
                    {  
                        case "cn":  
                            rawpros = rawpros.Where(n => n.KaLaiPrice >= Convert.ToDecimal(searchString));  
                            break;  
                        case "eq":  
                            rawpros = rawpros.Where(n => n.KaLaiPrice == Convert.ToDecimal(searchString));  
                            break;  
                        case "ne":  
                            rawpros = rawpros.Where(n => n.KaLaiPrice != Convert.ToDecimal(searchString));  
                            break;  
                    }  
                    break;  
 
                default:  
                    break;  
            }  
 
            return rawpros;  
        }   
 
 
        /*  
        public JsonResult GetData(GridSettings grid)  
        {  
 
            var query = _repository.FindAll();  
 
            //filtring  
            if (grid.IsSearch)  
            {  
                //And  
                if (grid.Where.groupOp == "AND")  
                    foreach (var rule in grid.Where.rules)  
                        query = query.Where<Product>(  
                            rule.field, rule.data,  
                            (WhereOperation)StringEnum.Parse(typeof(WhereOperation), rule.op));  
                else  
                {  
                    //Or  
                    var temp = (new List<Product>()).AsQueryable();  
                    foreach (var rule in grid.Where.rules)  
                    {  
                        var t = query.Where<Product>(  
                        rule.field, rule.data,  
                        (WhereOperation)StringEnum.Parse(typeof(WhereOperation), rule.op));  
                        temp = temp.Concat<Product>(t);  
                    }  
                    //remove repeating records  
                    query = temp.Distinct<Product>();  
                }  
            }  
 
            //sorting  
            query = query.OrderBy<Product>(grid.SortColumn,  
                grid.SortOrder);  
 
            //count  
            var count = query.Count();  
 
            //paging  
            var data = query.Skip((grid.PageIndex - 1) * grid.PageSize).Take(grid.PageSize).ToArray();  
 
            //converting in grid format  
            var result = new  
            {  
                total = (int)Math.Ceiling((double)count / grid.PageSize),  
                page = grid.PageIndex,  
                records = count,  
                rows = data.ToArray()  
            };  
 
            //convert to JSON and return to client  
            return Json(result, JsonRequestBehavior.AllowGet);  
 
        }  
        */ 
 
 
        //这个函数其实不必要!index中可以写英文。列名和index没有关系  
        private string switchSidx(string sidx)  
        {  
            switch (sidx)  
            {  
                case "型号":  
                    return "ProductName";  
                case "类别":  
                    return "Category";  
                case "品牌":  
                    return "Brand";  
                case "规格":  
                    return "Standard";  
                case "专柜":  
                    return "ZhuanGui";  
                case "莎莎":  
                    return "SaSaPrice";  
                case "雅施":  
                    return "YaShi";  
                case "卓越":  
                    return "ZhuoyuePrice";  
                case "卡莱美":  
                    return "KaLaiPrice";  
                case "万宁":  
                    return "WanningPrice";  
                case "屈臣氏":  
                    return "QuchengshiPrice";  
                case "药店":  
                    return "DrugstorePrice";  
                case "其他":  
                    return "Others";  
                case "描述":  
                    return "Description";  
                case "更新时间":  
                    return "CreateTime";  
                default:  
                    return "ProductName";  
            }  
        }  
 
        public string CategorySelectList()  
        {  
            var cs = _repository.AllCategories();  
            var sb=new StringBuilder("<select>");  
 
            foreach (var category in cs)  
            {  
                sb.Append(string.Format("<option value='{0}' >{1}</option>", category.CategoryName, category.CategoryName));  
            }  
            sb.Append("</select>");  
            return sb.ToString();  
        }  
 
        [HttpPost]  
        public ActionResult Edit(Product pro, string oper, int id)  
        {  
            if (oper == "edit")  
            {  
                _repository.Update(pro);  
                pro.CreateTime = DateTime.Now;  
            }  
            return Json(pro, JsonRequestBehavior.AllowGet);  
        }  
 
        //  
        // POST: /Product/Create  
 
        [HttpPost]  
        public ActionResult Create(Product product)  
        {  
            _repository.Add(product);  
            var fu = _repository.FindByName(product.ProductName);  
            return Json(fu, JsonRequestBehavior.AllowGet);  
        }  
 
       
         
        //  
        // POST: /Product/Delete/5  
 
        [HttpPost]  
        public ActionResult Delete(int id)  
        {  
            _repository.Remove(id);  
            return Json(id);  
        }  
 
        private void CategoryInit()  
        {  
            if (!_repository.AllCategories().Any())  
            {  
                _repository.AddCategorie(new Category  
                {  
                    CategoryName = "护肤品",  
                    Description = "春天女生护肤专用" 
                });  
                _repository.AddCategorie(new Category()  
                {  
                    CategoryName = "防晒",  
                    Description = "夏日喷雾防晒" 
                }  
               );  
            }  
        }  
        private void ProductsInits()  
        {  
            if (!_repository.FindAll().Any())  
            {  
                _repository.Add(new Product()  
                {  
                    ProductName = "水宝宝",  
                    Others = "防晒",  
                    SaSaPrice = 78,  
                    DrugstorePrice = 98  
                });  
            }  
        }  
        #endregion   
 
        #region 分类  
 
        private IEnumerable<CategoryViewModel> initCategoryViewModels()  
        {  
            if (!_categoryViewModels.Any())  
            {  
                var cas = _repository.AllCategories();  
                _categoryViewModels = cas.Select(n => new CategoryViewModel()  
                {  
                    CategoryId = n.CategoryId,  
                    CategoryName = n.CategoryName,  
                    Description = n.Description,  
                    ProductCount = _repository.GetCategorieProducts(n.CategoryName).Count()  
                });  
            }  
            return _categoryViewModels;  
        }  
        public JsonResult GetAllCategorys(string sord = "asc"string sidx = "CategoryName"int page = 1, int rows = 10)  
        {  
            IList<object> pros = new List<object>(FindCategoryViewModels(sord, sidx, (page - 1) * rows, rows));  
            var jsonData = JqGridModel.GridData(page, rows, initCategoryViewModels().Count(), pros);  
            return Json(jsonData, JsonRequestBehavior.AllowGet);  
        }  
 
          
 
        public IEnumerable<CategoryViewModel> FindCategoryViewModels(string sort = "asc",  
            string property = "CategoryName"int skip = 0, int take = 10)  
        {  
            var propertyInfo = typeof(CategoryViewModel).GetProperty(property);  
            Func<CategoryViewModel, object> expn = e => propertyInfo.GetValue(e, null);  
            var fakeProfiles =initCategoryViewModels();  
            IEnumerable<CategoryViewModel> pros = sort == "asc" ? fakeProfiles.OrderBy(expn).Skip(skip).Take(take).ToArray()  
                : fakeProfiles.OrderByDescending(expn).Skip(skip).Take(take).ToArray();  
            return pros;  
        }  
 
        public ActionResult EditCategory(CategoryViewModel model,string oper, int id)  
        {  
            if (oper == "edit")  
            {  
                var ca = new Category()  
                {  
                    CategoryId = model.CategoryId,  
                    CategoryName = model.CategoryName,  
                    Description = model.Description,  
                };  
                _repository.UpdateCategorie(ca);  
            }  
            return Json(model, JsonRequestBehavior.AllowGet);  
        }  
 
        public ActionResult CategoryList()  
        {  
            return View();  
        }  
 
        [HttpPost]  
        public ActionResult CreateCategory(Category category)  
        {  
            _repository.AddCategorie(category);  
            var fu = _repository.FindCategorieById(category.CategoryId);  
 
            var cm = new CategoryViewModel()  
            {  
                CategoryName = fu.CategoryName,  
                CategoryId = fu.CategoryId,  
                Description = fu.Description,  
                ProductCount = _repository.GetCategorieProducts(fu.CategoryName).Count()  
            };  
 
            return Json(cm, JsonRequestBehavior.AllowGet);  
        }  
 
        public ActionResult DeletCategory(int id)  
        {  
            _repository.RemoveCategorie(id);  
            return Json(1);  
        }  
 
        public PartialViewResult JqgridInit()  
        {  
 
            return PartialView();  
        }  
 
        public JsonResult GetChartData()  
        {  
            var cms = initCategoryViewModels().ToList();  
            var count =_repository.Count;  
            var chartDatas = cms.Select(n => new ChartData  
            {  
                label = n.CategoryName,  
                data =  Math.Round((double)n.ProductCount / count, 3),  
            }).ToArray();  
            return Json(chartDatas, JsonRequestBehavior.AllowGet);  
        }  
 
        #endregion   
 
    }  

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.
  • 112.
  • 113.
  • 114.
  • 115.
  • 116.
  • 117.
  • 118.
  • 119.
  • 120.
  • 121.
  • 122.
  • 123.
  • 124.
  • 125.
  • 126.
  • 127.
  • 128.
  • 129.
  • 130.
  • 131.
  • 132.
  • 133.
  • 134.
  • 135.
  • 136.
  • 137.
  • 138.
  • 139.
  • 140.
  • 141.
  • 142.
  • 143.
  • 144.
  • 145.
  • 146.
  • 147.
  • 148.
  • 149.
  • 150.
  • 151.
  • 152.
  • 153.
  • 154.
  • 155.
  • 156.
  • 157.
  • 158.
  • 159.
  • 160.
  • 161.
  • 162.
  • 163.
  • 164.
  • 165.
  • 166.
  • 167.
  • 168.
  • 169.
  • 170.
  • 171.
  • 172.
  • 173.
  • 174.
  • 175.
  • 176.
  • 177.
  • 178.
  • 179.
  • 180.
  • 181.
  • 182.
  • 183.
  • 184.
  • 185.
  • 186.
  • 187.
  • 188.
  • 189.
  • 190.
  • 191.
  • 192.
  • 193.
  • 194.
  • 195.
  • 196.
  • 197.
  • 198.
  • 199.
  • 200.
  • 201.
  • 202.
  • 203.
  • 204.
  • 205.
  • 206.
  • 207.
  • 208.
  • 209.
  • 210.
  • 211.
  • 212.
  • 213.
  • 214.
  • 215.
  • 216.
  • 217.
  • 218.
  • 219.
  • 220.
  • 221.
  • 222.
  • 223.
  • 224.
  • 225.
  • 226.
  • 227.
  • 228.
  • 229.
  • 230.
  • 231.
  • 232.
  • 233.
  • 234.
  • 235.
  • 236.
  • 237.
  • 238.
  • 239.
  • 240.
  • 241.
  • 242.
  • 243.
  • 244.
  • 245.
  • 246.
  • 247.
  • 248.
  • 249.
  • 250.
  • 251.
  • 252.
  • 253.
  • 254.
  • 255.
  • 256.
  • 257.
  • 258.
  • 259.
  • 260.
  • 261.
  • 262.
  • 263.
  • 264.
  • 265.
  • 266.
  • 267.
  • 268.
  • 269.
  • 270.
  • 271.
  • 272.
  • 273.
  • 274.
  • 275.
  • 276.
  • 277.
  • 278.
  • 279.
  • 280.
  • 281.
  • 282.
  • 283.
  • 284.
  • 285.
  • 286.
  • 287.
  • 288.
  • 289.
  • 290.
  • 291.
  • 292.
  • 293.
  • 294.
  • 295.
  • 296.
  • 297.
  • 298.
  • 299.
  • 300.
  • 301.
  • 302.
  • 303.
  • 304.
  • 305.
  • 306.
  • 307.
  • 308.
  • 309.
  • 310.
  • 311.
  • 312.
  • 313.
  • 314.
  • 315.
  • 316.
  • 317.
  • 318.
  • 319.
  • 320.
  • 321.
  • 322.
  • 323.
  • 324.
  • 325.
  • 326.
  • 327.
  • 328.
  • 329.
  • 330.
  • 331.
  • 332.
  • 333.
  • 334.
  • 335.
  • 336.
  • 337.
  • 338.
  • 339.
  • 340.
  • 341.
  • 342.
  • 343.
  • 344.
  • 345.
  • 346.
  • 347.
  • 348.
  • 349.
  • 350.
  • 351.
  • 352.
  • 353.
  • 354.
  • 355.
  • 356.
  • 357.
  • 358.
  • 359.
  • 360.
  • 361.
  • 362.
  • 363.
  • 364.
  • 365.
  • 366.
  • 367.
  • 368.
  • 369.
  • 370.
  • 371.
  • 372.
  • 373.
  • 374.
  • 375.
  • 376.
  • 377.
  • 378.
  • 379.
  • 380.
  • 381.
  • 382.
  • 383.
  • 384.
  • 385.
  • 386.
  • 387.
  • 388.
  • 389.
  • 390.
  • 391.
  • 392.
  • 393.
  • 394.
  • 395.
  • 396.
  • 397.
  • 398.
  • 399.
  • 400.
  • 401.
  • 402.
  • 403.
  • 404.
  • 405.
  • 406.
  • 407.
  • 408.
  • 409.
  • 410.
  • 411.
  • 412.
  • 413.
  • 414.
  • 415.
  • 416.
  • 417.
  • 418.
  • 419.
  • 420.
  • 421.
  • 422.
  • 423.
  • 424.
  • 425.
  • 426.
  • 427.
  • 428.
  • 429.
  • 430.
  • 431.
  • 432.
  • 433.
  • 434.
  • 435.
  • 436.
  • 437.
  • 438.
  • 439.
  • 440.
  • 441.
  • 442.
  • 443.
  • 444.
  • 445.
  • 446.
  • 447.
  • 448.
  • 449.
  • 450.
  • 451.
  • 452.
  • 453.
  • 454.
  • 455.
  • 456.
  • 457.
  • 458.
  • 459.
  • 460.
  • 461.
  • 462.
  • 463.
  • 464.
  • 465.
  • 466.
  • 467.
  • 468.
  • 469.
  • 470.
  • 471.
  • 472.
  • 473.
  • 474.
  • 475.
  • 476.
  • 477.
  • 478.
  • 479.
  • 480.
  • 481.
  • 482.
  • 483.
  • 484.
  • 485.
  • 486.
  • 487.
  • 488.
  • 489.
  • 490.
  • 491.
  • 492.
  • 493.
  • 494.
  • 495.
  • 496.
  • 497.
  • 498.
  • 499.
  • 500.
  • 501.
  • 502.
  • 503.
  • 504.
  • 505.
  • 506.
  • 507.
  • 508.
  • 509.
  • 510.
  • 511.
  • 512.
  • 513.
  • 514.
  • 515.
  • 516.
  • 517.
  • 518.
  • 519.
  • 520.
  • 521.
  • 522.
  • 523.
  • 524.
  • 525.
  • 526.
  • 527.
  • 528.

#p#

1)table的设置

jQuery("#list").jqGrid({  
        url: '/Product/GetAllPros'//获取数据源  
        datatype: "json",  
        colNames: ['操作''ProductId''类别''品牌''型号''规格''专柜''莎莎''卓越''卡莱美''雅施''万宁''屈臣氏''药店''其他''更新时间'], //定义列名   
        colModel: [ //name 是对应我们的Product模型的属性,Index可以为中文也可以为英文,不必于上面colnames对应,顺序对就行了。查询的时候传到后台的是index。  
            {  
                name: 'myac', index: '操作', width: 60, fixed: true, sortable: false, resize: false, formatter: 'actions', formatoptions: {  
                    keys: true,   
                    delOptions: { recreateForm: true, beforeShowForm: beforeDeleteCallback, },  
                }                  
            },  
           //详细的字段配置信息请见博客:http://www.cnblogs.com/huozhicheng/archive/2012/11/20/2778649.html   
           { name: 'ProductId', index: 'ProductId', hidden: true, editable: true },  
           { name: 'Category', index: '类别', editable: true, edittype: 'select', editoptions: { dataUrl: "/Product/CategorySelectList" }, searchoptions: { sopt: ['eq''ne''cn'] } },  
           { name: 'Brand', index: '品牌', editable: true, editrules: { required: false }, searchoptions: { sopt: ['eq''ne''cn'] } },  
           { name: 'ProductName', index: '型号', editable: true, editrules: { required: true }, searchoptions: { sopt: ['eq''ne''cn'] } },  
           { name: 'Standard', index: '规格', editable: true, edittype: 'textarea', searchoptions: { sopt: ['eq''ne''cn'] } },  
           { name: 'ZhuanGui', index: '专柜', editable: true, width: 60, searchoptions: { sopt: ['eq''ne''cn'] } },//formatter: 'integer',  formatter: 'integer',   
           { name: 'SaSaPrice', index: '莎莎', editable: true,width: 60, searchoptions: { sopt: ['eq''ne''cn'] } },  
            { name: 'ZhuoyuePrice', index: '卓越', editable: true, formatter: 'integer', width: 60, searchoptions: { sopt: ['eq''ne''cn'] } },  
            { name: 'KaLaiPrice', index: '卡莱美', editable: true, formatter: 'integer', width: 60, searchoptions: { sopt: ['eq''ne''cn'] } },  
            { name: 'YaShi', index: '雅施', editable: true, formatter: 'integer', width: 60, searchoptions: { sopt: ['eq''ne''cn'] } },  
            { name: 'WanningPrice', index: '万宁', editable: true, formatter: 'integer', width: 60, searchoptions: { sopt: ['eq''ne''cn'] } },  
            { name: 'QuchengshiPrice', index: '屈臣氏', editable: true, formatter: 'integer', width: 60, searchoptions: { sopt: ['eq''ne''cn'] } },  
            { name: 'DrugstorePrice', index: '药店', editable: true, formatter: 'integer', width: 60, searchoptions: { sopt: ['eq''ne''cn'] } },  
            { name: 'Others', index: '其他', editable: true, edittype: 'textarea', searchoptions: { sopt: ['eq''ne''cn'] } },  
            {  
                name: 'CreateTime', index: '更新时间', width: 200, formatter: 'date'//时间格式显示  
                formatoptions: { srcformat: 'Y-m-d H:i:s', newformat: 'Y-m-d H:i:s', searchoptions: { sopt: ['eq''ne''cn'] } }  
            }  
        ],  
        rowNum: 10,  
        rowList: [10, 20, 30],  
        sortorder: "asc",  
        pager: '#pager2',  
        sortname: 'ProductName',  
        viewrecords: true,  
        caption: "产品明细",  
        autowidth: true,  
        multiselect: true,  
        height: 180,  
        gridComplete: function () {  
            var icons = $(".ui-icon-trash");//隐藏删除键  
            icons.hide();//我隐藏了删除键 因为id的问题  
            //var ids = jQuery("#list2").jqGrid('getDataIDs');  
            //for (var i = 0; i < ids.length; i++) {  
            //    be = "<span class='ui-icon ui-icon-pencil'></span>";//修改  
            //    se = "<span class='ui-icon ui-icon-trash'></span>";//删除  
            //    ce = "<span class='icon-ok  ui-icon'></span>";//删除  
            //    jQuery("#list2").jqGrid('setRowData', ids[i], { act: be + se + ce });  
            //}  
             //这个部分是可以添加定义的按钮,自己用脚本去实现。  
 
        },  
        loadComplete: function () {  
            $("#grid-table").hide();  
            var table = this;  
            enableTooltips(table);  
            updatePagerIcons(table);  
        },  
 
        editurl: "/Product/Edit"//编辑的地址 操作栏触发的操作都会丢到这个action中响应。 add edit del  
        //改变传id的方法无效!!!!  
        serializeDelData: function (postdata) {  
            var rowdata = jQuery('#list2').getRowData(postdata.id);  
            return { id: postdata.id, oper: postdata.oper, user: rowdata };  
        }  
        //edit  del  
    }); 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.

形成样子如下:

[[115287]]

colModel涉及的配置较多,不同的字段有不同的呈现,可以参考博客 http://www.cnblogs.com/huozhicheng/archive/2012/11/20/2778649.html

2)pager 用来形成分页和集成一些操作。

jQuery("#list").jqGrid('navGrid''#pager2', {  
             //调整ui 也就是我们看到的: ,但这个删除图标是我代码加上去的。  
            edit: true,  
            editicon: 'icon-pencil blue',  
            add: true,  
            addicon: 'icon-plus-sign purple',  
            del: false,  
            delicon: 'icon-trash red',  
            search: true,  
            searchicon: 'icon-search orange',  
            refresh: true,  
            refreshicon: 'icon-refresh green',  
            view: false,  
            viewicon: 'icon-zoom-in grey',  
        },  
        {  
            //eidt  
            url: '/Product/Edit', mtype: 'POST',  
            afterSubmit: function (xhr, postdata) {  
                var id = $("#list2").jqGrid('getGridParam''selrow');  
                jQuery("#list2").jqGrid('setRowData', id, postdata);  
            }, closeAfterEdit: true, closeOnEscape: true 
        },  
        {  
            //add  
            recreateForm: true,  
            url: '/Product/Create',  
            mtype: 'POST',  
            afterSubmit: function (xhr, postdata) {  
                var id = $("#list2").jqGrid('getGridParam''selrow');  
                jQuery("#list2").jqGrid('addRowData', postdata.Id, postdata);  
                return [true'successfule!'false];  
            }, closeAfterAdd: true 
        },  
        {  
            //delete 此处无效  
            recreateForm: true,  
            url: '/Product/Delete', mtype: 'POST',  
            beforeShowForm: function (e) {  
                var form = $(e[0]);  
                if (form.data('styled')) return false;  
                form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />');  
                styleDeleteForm(form);  
                form.data('styled'true); return true;  
            },  
            afterSubmit: function (xhr, postdata) {  
                var consoleDlg = $("#list2");  
                var selectedRowIds =  
                    $("#list2").jqGrid("getGridParam""selarrrow");  
                var len = selectedRowIds.length;  
                for (var i = 0; i < len ; i++) {  
                    $("#list2").jqGrid("delRowData", selectedRowIds[0]);  
                }  
            },  
 
            closeAfterDel: true 
 
        },  
        {  
            //search  
            recreateForm: true,  
            afterShowSearch: function(e){  
                var form = $(e[0]);  
                form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')  
                styleSearchForm(form);  
            },  
            afterRedraw: function(){  
                styleSearchFilters($(this));  
            }  
                        ,  
           // multipleSearch: true,  
            closeAfterSearch: true 
 
         },  
        {  
            //view       
 
            }  
    ); 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.

在下面加入按钮的方法以及执行删除:jquery2.0中的绑定写法有些不同,也就是on的用法。

function updatePagerIcons() {  
 //...  
  var x = $("#pager2_left").find("#coco");  
        if (x.length == 0) {  
            $("#pager2_left table tbody>tr").prepend("<td class='ui-pg-button ui-corner-all' title data-original-title='Remove a row'><div id='coco'  class='ui-pg-div'>" +  
                "<span class='ui-icon icon-trash blue'></span></div></td>");  
        }  
 
}  
 //绑定事件 执行删除   
    $("#pager2_left table tbody>tr").on("click"'#coco', function () {  
        var selectedRowIds = $("#list2").jqGrid("getGridParam""selarrrow");  
        var len = selectedRowIds.length;  
        if (len != 0) {  
            if (confirm("确定要删除选中项?")) {  
                for (var i = 0; i < len; i++) {  
                    var rowData = $("#list2").jqGrid('getRowData', selectedRowIds[i]);  
                    $.post('/Product/Delete', { id: rowData.ProductId }, function (data) {  
                        $("#list2").jqGrid("delRowData", selectedRowIds[0]);  
                    });  
                }  
            }  
        } else {  
            $.infoShow("未勾选", 0);  
        }  
    }); 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.

形成这个样子:

[[115288]]

全部前台代码:

@{  
    ViewBag.Title = "Index";  
    Layout = "~/Views/Shared/_Layout.cshtml";  
}  
@Html.Partial("JqgridInit")  
<script>  
    $(function () {  
    $(".page-header h1 span,#currentpart").html("产品");  
    $(".page-header h1 small span").html("产品管理");  
    $(".nav-list>li:eq(1)").addClass("active").siblings().removeClass("active");  
      
    jQuery("#list2").jqGrid({  
        url: '/Product/GetAllPros',  
        datatype: "json",  
        colNames: ['操作''ProductId''类别''品牌''型号''规格''专柜''莎莎''卓越''卡莱美''雅施''万宁''屈臣氏''药店''其他''更新时间'],  
        colModel: [  
            {  
                name: 'myac', index: '操作', width: 60, fixedtrue, sortable: false, resize: false, formatter: 'actions', formatoptions: {  
                    keys: true,   
                    delOptions: { recreateForm: true, beforeShowForm: beforeDeleteCallback, },//改变原来的样式  msg: '您确定要删除这条记录?</span>  
                    searchoptions: { sopt: ['eq''ne''cn'] },  
                }  
                //    name: 'act', index: 'act', width: 75, sortable: false  
            },  
           { name: 'ProductId', index: 'ProductId', hidden: true, editable: true },  
           { name: 'Category', index: '类别', editable: true, edittype: 'select', editoptions: { dataUrl: "/Product/CategorySelectList" }, searchoptions: { sopt: ['eq''ne''cn'] } },  
           { name: 'Brand', index: '品牌', editable: true, editrules: { required: false }, searchoptions: { sopt: ['eq''ne''cn'] } },  
           { name: 'ProductName', index: '型号', editable: true, editrules: { required: true }, searchoptions: { sopt: ['eq''ne''cn'] } },  
           { name: 'Standard', index: '规格', editable: true, edittype: 'textarea', searchoptions: { sopt: ['eq''ne''cn'] } },  
           { name: 'ZhuanGui', index: '专柜', editable: true, width: 60, searchoptions: { sopt: ['eq''ne''cn'] } },//formatter: 'integer',  formatter: 'integer',   
           { name: 'SaSaPrice', index: '莎莎', editable: true,width: 60, searchoptions: { sopt: ['eq''ne''cn'] } },  
            { name: 'ZhuoyuePrice', index: '卓越', editable: true, formatter: 'integer', width: 60, searchoptions: { sopt: ['eq''ne''cn'] } },  
            { name: 'KaLaiPrice', index: '卡莱美', editable: true, formatter: 'integer', width: 60, searchoptions: { sopt: ['eq''ne''cn'] } },  
            { name: 'YaShi', index: '雅施', editable: true, formatter: 'integer', width: 60, searchoptions: { sopt: ['eq''ne''cn'] } },  
            { name: 'WanningPrice', index: '万宁', editable: true, formatter: 'integer', width: 60, searchoptions: { sopt: ['eq''ne''cn'] } },  
            { name: 'QuchengshiPrice', index: '屈臣氏', editable: true, formatter: 'integer', width: 60, searchoptions: { sopt: ['eq''ne''cn'] } },  
            { name: 'DrugstorePrice', index: '药店', editable: true, formatter: 'integer', width: 60, searchoptions: { sopt: ['eq''ne''cn'] } },  
            { name: 'Others', index: '其他', editable: true, edittype: 'textarea', searchoptions: { sopt: ['eq''ne''cn'] } },  
            {  
                name: 'CreateTime', index: '更新时间', width: 200, formatter: 'date',  
                formatoptions: { srcformat: 'Y-m-d H:i:s', newformat: 'Y-m-d H:i:s', searchoptions: { sopt: ['eq''ne''cn'] } }  
            }  
        ],  
        rowNum: 10,  
        rowList: [10, 20, 30],  
        sortorder: "asc",  
        pager: '#pager2',  
        sortname: 'ProductName',  
        viewrecords: true,  
        caption: "产品明细",  
        autowidth: true,  
        multiselect: true,  
        height: 180,  
        gridComplete: function () {  
            var icons = $(".ui-icon-trash");//隐藏删除键  
            icons.hide();  
            //var ids = jQuery("#list2").jqGrid('getDataIDs');  
            //for (var i = 0; i < ids.length; i++) {  
            //    be = "<span class='ui-icon ui-icon-pencil'></span>";//修改  
            //    se = "<span class='ui-icon ui-icon-trash'></span>";//删除  
            //    ce = "<span class='icon-ok  ui-icon'></span>";//删除  
            //    jQuery("#list2").jqGrid('setRowData', ids[i], { act: be + se + ce });  
            //}  
        },  
        loadComplete: function () {  
            $("#grid-table").hide();  
            var table = this;  
            enableTooltips(table);  
            updatePagerIcons(table);  
        },  
 
        editurl: "/Product/Edit",  
        //无效!!!!  
        serializeDelData: function (postdata) {  
            var rowdata = jQuery('#list2').getRowData(postdata.id);  
            return { id: postdata.id, oper: postdata.oper, user: rowdata };  
        }  
        //edit  del  
    });  
    jQuery("#list2").jqGrid('navGrid''#pager2', {  
            edit: true,  
            editicon: 'icon-pencil blue',  
            add: true,  
            addicon: 'icon-plus-sign purple',  
            del: false,  
            delicon: 'icon-trash red',  
            search: true,  
            searchicon: 'icon-search orange',  
            refresh: true,  
            refreshicon: 'icon-refresh green',  
            view: false,  
            viewicon: 'icon-zoom-in grey',  
        },  
        {  
            //eidt  
            url: '/Product/Edit', mtype: 'POST',  
            afterSubmit: function (xhr, postdata) {  
                var id = $("#list2").jqGrid('getGridParam''selrow');  
                jQuery("#list2").jqGrid('setRowData', id, postdata);  
            }, closeAfterEdit: true, closeOnEscape: true 
        },  
        {  
            //add  
            recreateForm: true,  
            url: '/Product/Create',  
            mtype: 'POST',  
            afterSubmit: function (xhr, postdata) {  
                var id = $("#list2").jqGrid('getGridParam''selrow');  
                jQuery("#list2").jqGrid('addRowData', postdata.Id, postdata);  
                return [true'successfule!'false];  
            }, closeAfterAdd: true 
        },  
        {  
            //delete  
            recreateForm: true,  
            url: '/Product/Delete', mtype: 'POST',  
            beforeShowForm: function (e) {  
                var form = $(e[0]);  
                if (form.data('styled')) return false;  
                form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />');  
                styleDeleteForm(form);  
                form.data('styled'true); return true;  
            },  
            afterSubmit: function (xhr, postdata) {  
                var consoleDlg = $("#list2");  
                var selectedRowIds =  
                    $("#list2").jqGrid("getGridParam""selarrrow");  
                var len = selectedRowIds.length;  
                for (var i = 0; i < len ; i++) {  
                    $("#list2").jqGrid("delRowData", selectedRowIds[0]);  
                }  
            },  
 
            closeAfterDel: true 
 
        },  
        {  
            //search  
            recreateForm: true,  
            afterShowSearch: function(e){  
                var form = $(e[0]);  
                form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')  
                styleSearchForm(form);  
            },  
            afterRedraw: function(){  
                styleSearchFilters($(this));  
            }  
                        ,  
           // multipleSearch: true,  
            closeAfterSearch: true 
 
         },  
        {  
            //view       
 
            }  
    );  
    //添加注释  
    function enableTooltips(table) {  
        $('.navtable .ui-pg-button').tooltip({ container: 'body' });  
        $(table).find('.ui-pg-div').tooltip({ container: 'body' });  
    }  
 
 
    function beforeDeleteCallback(e) {  
        var form = $(e[0]);  
        if (form.data('styled')) return false;  
        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />');  
        styleDeleteForm(form);  
        form.data('styled'true);  
        return true;  
    }  
 
 
    //修改 删除form的样式  
    function styleDeleteForm(form) {  
        var buttons = form.next().find('.EditButton .fm-button');  
        buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon  
        buttons.eq(0).addClass('btn-danger').prepend('<i class="icon-trash"></i>');  
        buttons.eq(1).prepend('<i class="icon-remove"></i>');  
    }  
 
    //更新分页图标  
    function updatePagerIcons() {  
 
        var replacement =  
        {  
            'ui-icon-seek-first''icon-double-angle-left bigger-140',  
            'ui-icon-seek-prev''icon-angle-left bigger-140',  
            'ui-icon-seek-next''icon-angle-right bigger-140',  
            'ui-icon-seek-end''icon-double-angle-right bigger-140' 
        };  
        $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {  
            var icon = $(this);  
            var $class = $.trim(icon.attr('class').replace('ui-icon'''));  
 
            if ($class in replacement) icon.attr('class''ui-icon ' + replacement[$class]);  
        });  
 
        var x = $("#pager2_left").find("#coco");  
        if (x.length == 0) {  
            $("#pager2_left table tbody>tr").prepend("<td class='ui-pg-button ui-corner-all' title data-original-title='Remove a row'><div id='coco'  class='ui-pg-div'>" +  
                "<span class='ui-icon icon-trash blue'></span></div></td>");  
        }  
    }  
 
    function styleSearchForm(form) {  
        var dialog = form.closest('.ui-jqdialog');  
        var buttons = dialog.find('.EditTable')  
        buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class''icon-retweet');  
        buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class''icon-comment-alt');  
        buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class''icon-search');  
    }  
    function styleSearchFilters(form) {  
        form.find('.delete-rule').val('X');  
        form.find('.add-rule').addClass('btn btn-xs btn-primary');  
        form.find('.add-group').addClass('btn btn-xs btn-success');  
        form.find('.delete-group').addClass('btn btn-xs btn-danger');  
    }  
 
    //绑定事件 执行删除  
    $("#pager2_left table tbody>tr").on("click"'#coco', function () {  
        var selectedRowIds = $("#list2").jqGrid("getGridParam""selarrrow");  
        var len = selectedRowIds.length;  
        if (len != 0) {  
            if (confirm("确定要删除选中项?")) {  
                for (var i = 0; i < len; i++) {  
                    var rowData = $("#list2").jqGrid('getRowData', selectedRowIds[i]);  
                    $.post('/Product/Delete', { id: rowData.ProductId }, function (data) {  
                        $("#list2").jqGrid("delRowData", selectedRowIds[0]);  
                    });  
                }  
            }  
        } else {  
            $.infoShow("未勾选", 0);  
        }  
    });  
    });  
</script> 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.
  • 112.
  • 113.
  • 114.
  • 115.
  • 116.
  • 117.
  • 118.
  • 119.
  • 120.
  • 121.
  • 122.
  • 123.
  • 124.
  • 125.
  • 126.
  • 127.
  • 128.
  • 129.
  • 130.
  • 131.
  • 132.
  • 133.
  • 134.
  • 135.
  • 136.
  • 137.
  • 138.
  • 139.
  • 140.
  • 141.
  • 142.
  • 143.
  • 144.
  • 145.
  • 146.
  • 147.
  • 148.
  • 149.
  • 150.
  • 151.
  • 152.
  • 153.
  • 154.
  • 155.
  • 156.
  • 157.
  • 158.
  • 159.
  • 160.
  • 161.
  • 162.
  • 163.
  • 164.
  • 165.
  • 166.
  • 167.
  • 168.
  • 169.
  • 170.
  • 171.
  • 172.
  • 173.
  • 174.
  • 175.
  • 176.
  • 177.
  • 178.
  • 179.
  • 180.
  • 181.
  • 182.
  • 183.
  • 184.
  • 185.
  • 186.
  • 187.
  • 188.
  • 189.
  • 190.
  • 191.
  • 192.
  • 193.
  • 194.
  • 195.
  • 196.
  • 197.
  • 198.
  • 199.
  • 200.
  • 201.
  • 202.
  • 203.
  • 204.
  • 205.
  • 206.
  • 207.
  • 208.
  • 209.
  • 210.
  • 211.
  • 212.
  • 213.
  • 214.
  • 215.
  • 216.
  • 217.
  • 218.
  • 219.
  • 220.
  • 221.
  • 222.
  • 223.
  • 224.
  • 225.
  • 226.
  • 227.
  • 228.
  • 229.
  • 230.
  • 231.
  • 232.
  • 233.
  • 234.
  • 235.
  • 236.
  • 237.
  • 238.
  • 239.

至此基本告成,还有些可以优化。

如果本文对你有帮助,请霸气的支持下    :)  tks~

需要源码的同学,请留邮箱。备注:数据库是EntityFramework + CE4.0,账户密码都是:admin

模板源码:http://pan.baidu.com/s/1gdEGg2v

参考博客:

参数设定 http://www.cnblogs.com/younggun/archive/2012/08/27/2657922.html

jqgridDemo:http://www.trirand.com/blog/jqgrid/jqgrid.html 

多重查询:http://www.codeproject.com/Articles/58357/Using-jqGrid-s-search-toolbar-with-multiple-filter

其他后台模板:http://www.tystudio.net/2013/03/11/back-manage-system-template/


本文出自:http://www.cnblogs.com/stoneniqiu/p/3815028.html

责任编辑:林师授 来源: stoneniqiu的博客
相关推荐

2009-07-22 09:36:54

使用UpdataModASP.NET MVC

2009-07-23 15:44:39

ASP.NET MVC

2009-07-20 17:16:46

IIS中使用ASP.N

2010-11-02 08:46:55

NupackASP.NET MVC

2010-04-09 09:28:37

View Model

2010-06-23 15:44:03

ASP.NET MVC

2009-07-20 16:45:41

使用StringBuiASP.NET

2021-06-22 16:59:56

微软.NETC# 软件开发

2010-06-25 08:51:46

ASP.NET MVC

2014-07-29 10:00:30

ASP.NETMVCAutoFac

2009-07-24 13:20:44

MVC框架ASP.NET

2009-07-31 12:43:59

ASP.NET MVC

2009-07-22 16:34:36

使用T4ASP.NET MVC

2010-11-18 08:46:27

ASP.NET MVC

2009-05-05 14:02:14

PlaceHolder控件ASP.NET

2009-07-28 17:17:19

ASP.NET概述

2009-07-22 10:09:59

ASP.NET MVC

2009-07-22 13:24:24

ASP.NET MVC

2009-07-23 14:31:20

ASP.NET MVC

2009-07-20 10:53:59

ASP.NET MVC
点赞
收藏

51CTO技术栈公众号