ÔÚASP.NET MVC 4ÖÐÊ¹ÓÃKendo UI Grid .: NOVOTS KMS

Kendo UI ÊÇTelerikÍÆ³öµÄÒ»Ì×based on jQuery µÄ Framework£¬Ìá¹©ÁËºÜ¶à¿Ø¼þ(Menu ¡¢Grid ¡¢ComboxµÈ...)£¬ µ×²ãÒÔHtml5 + jQuery À´´òÔì£¬²¢ÇÒ¼æÈÝÓÚ¸÷´óä¯ÀÀÆ÷£¬°üº¬IE7¡¢IE8¡£Ïà¹Ø½éÉÜ¿ÉÒÔ²Î¿¼AJAXÊ½Êý¾ÝÇåµ¥µÄÐÂÑ¡Ôñ-Kendo UI Grid¡£

ÒÔÏÂÄÚÈÝ²Î¿¼Ì¨ÍåµÄºÚÀÏ´óµÄÎÄÕÂ£ºÔÚASP.NET MVC 4ÖÐÊ¹ÓÃKendo UI Grid

½¨Á¢Ò»¸öASP.NET MVC 4×¨°¸

Ê¹ÓÃNuGet°²×°KendoUIWeb¼°KendoGridBinder

´´½¨SimMemberInfo ModelÀà£¬·Åµ½ModelÄ¿Â¼ÏÂ

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Drawing;
using System.Reflection;

namespace MvcApplication2.Models
{
    public class SimMemberInfo
    {
        public string UserNo; //»áÔ±±àºÅ
        public string UserName; //»áÔ±Ãû³Æ
        public DateTime RegDate; //×¢²áÈÕÆÚ
        public int Points; //ÀÛ»ýµãÊý

//Ä£ÄâÊý¾ÝÔ´
public static List<SimMemberInfo> SimuDataStore = null;

        static SimMemberInfo()
        {
            Random rnd = new Random();
            //½èÓÃ¾ßÃûÑÕÉ«Ãû³ÆÀ´²úÉúËæ»úÊý¾Ý
            string[] colorNames = typeof(Color)
                .GetProperties(BindingFlags.Static | BindingFlags.Public)
                .Select(o => o.Name).ToArray();
            SimuDataStore =
                colorNames
                .Select(cn => new SimMemberInfo()
                {
                    UserNo = string.Format("C{0:00000}", rnd.Next(99999)),
                    UserName = cn,
                    RegDate = DateTime.Today.AddDays(-rnd.Next(1000)),
                    Points = rnd.Next(9999)
                }).ToList();
        }
    }

}

ÒªÒýÓÃKendo UI£¬ÐèÒªÔØÈë±ØÒªµÄJS¼°CSS£¬±à¼App_Start/BundleConfig.cs£¬¼ÓÈëÒÔÏÂ³ÌÐò:

         bundles.Add(new ScriptBundle("~/bundles/kendoUI").Include("~/Scripts/kendo/2012.1.322/kendo.web.min.js"));
         //¾Êµ²â£¬SytleBundle virtualPath²ÎÊýÊ¹ÓÃ"2012.1.322"»áÓÐÎÊÌâ£¬¹ÊÏòÉÏ°áÒÆÒ»²ã
         //½«/Content/kendo/2012.1.322µÄÄÚÈÝ°áÖÁContent/kendoÏÂ
         bundles.Add(new StyleBundle("~/Content/kendo/css").Include("~/Content/kendo/kendo.common.min.css",
             "~/Content/kendo/kendo.blueopal.min.css"
             ));

ÓÉÓÚCSSÎÄ¼þÂ·¾¶»á±»µ±³ÉÍ¼Æ¬ÎÄ¼þµÄ»ù×¼£¬Ô±¾Kendo UIµÄ.css¼°Í¼Í¼Æ¬±»·ÅÔÚ~/Content/kendo/2012.1.322/ÏÂ£¬ÀíÂÛÉÏStyleBundleÓ¦Éè³É"~/Content/kendo/2012.1.322/css¡±£¬²ÅÄÜÒýµ¼ä¯ÀÀÆ÷µ½¸ÃÄ¿Â¼ÏÂÈ¡ÓÃÍ¼ÎÄ¼þ¡£²»ÐÒµØ£¬ÎÒ·¢ÏÖStyleBundleµÄvirtualPath²ÎÊý³öÏÖ2012.1.322Ê±£¬»áµ¼ÖÂStyles.Render("~/Content/kendo/2012.1.322/css¡±)Ê±´«»ØHTTP 404´íÎó~ Îª¿Ë·þÎÊÌâ£¬ÎÒ¾ö¶¨½«2012.1.322Ä¿Â¼µÄÄÚÈÝÏòÉÏ°áÒ»²ã£¬Ö±½Ó·ÅÔÚ~/Content/kenoÄ¿Â¼ÏÂ£¬²¢½«virtualPathÉè³É"~/Content/kendo/css"£¬ÕâÑù¾ÍÄÜ±Ü¿ªÎÊÌâ¡£

ÔÚ~/Views/Shared/_Layout.cshtmlÖÐ:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/themes/base/css", "~/Content/css", "~/Content/kendo/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @RenderBody()

@Scripts.Render("~/bundles/jquery", "~/bundles/kendoUI")
@RenderSection("scripts", required: false)
</body>
</html>

ÔÚIndex.cshtmlµÄ´úÂëÈçÏÂ£º

@section Scripts
{
    <style>
        body { font-size: 9pt; }
        #dvGrid { width: 500px; }
        span.hi-lite { color: red; }
        #dvGrid th.k-header { text-align: center; }
    </style>
    <script>
        $(function () {
            //½¨Á¢Êý¾ÝÔ´¶ÔÏó
            var dataSrc = new kendo.data.DataSource({
                transport: {
                    read: {
                        //ÒÔÏÂÆäÊµ¾ÍÊÇ$.ajaxµÄ²ÎÊý
                        type: "POST",
                        url: "/Home/Grid",
                        dataType: "json",
                        data: {
                            //¶îÍâ´«ÖÁºó·½µÄ²ÎÊý
                            keywd: function () {
                                return $("#tKeyword").val();
                            }
                        }
                    }
                },
                schema: {
                    //È¡³öÊý¾ÝÊý×é
                    data: function (d) { return d.data; },
                    //È¡³öÊý¾Ý×Ü±ÊÊý(¼ÆËãÒ³ÊýÓÃ)
                    total: function (d) { return d.total; }
                },
                pageSize: 10,
                serverPaging: true,
                serverSorting: true
            });
            //JSONÈÕÆÚ×ª»»
            var dateRegExp = /^\/Date$(.*?)$\/$/;
            window.toDate = function (value) {
                var date = dateRegExp.exec(value);
                return new Date(parseInt(date[1]));
            }
            $("#dvGrid").kendoGrid({
                dataSource: dataSrc,
                columns: [
                    { field: "UserNo", title: "»áÔ±±àºÅ" },
                    { field: "UserName", title: "»áÔ±Ãû³Æ",
                        template: '#= "<span class=\\"u-name\\">" + UserName + "</span>" #'
                    },
                    { field: "RegDate", title: "¼ÓÈëÈÕÆÚ",
                        template: '#= kendo.toString(toDate(RegDate), "yyyy/MM/dd")#'
                    },
                    { field: "Points", title: "ÀÛ»ýµãÊý" },
                ],
                sortable: true,
                pageable: true,
                dataBound: function () {
                    //AJAXÊý¾ÝBindÍê³Éºó´¥·¢
                    var kw = $("#tKeyword").val();
                    //ÈôÓÐÉè¹Ø¼ü´Ê£¬×öHighlight´¦Àí
                    if (kw.length > 0) {
                        var re = new RegExp(kw, "g");
                        $(".u-name").each(function () {
                            var $td = $(this);
                            $td.html($td.text()
                           .replace(re, "<span class='hi-lite'>$&</span>"));
                        });
                    }
                }
            });
            //°´ÏÂ²éÑ¯Å¥
            $("#bQuery").click(function () {
                //ÒªÇóÊý¾ÝÔ´ÖØÐÂ¶ÁÈ¡(²¢Ö¸¶¨ÇÐÖÁµÚÒ»Ò³)
                dataSrc.read({ page: 1, skip: 0 });
                //GridÖØÐÂÏÔÊ¾Êý¾Ý
                $("#dvGrid").data("kendoGrid").refresh();
            });
        });
    </script>
}
<div style="padding: 10px;">
    ¹Ø¼ü´Ê:
    <input id="tKeyword" /><input type="button" value="²éÑ¯" id="bQuery" />
</div>
<div id="dvGrid">
</div>

HomeController.csµÄGrid() Action £º

      public JsonResult Grid(KendoGridRequest request, string keywd)
      {
          var result = SimMemberInfo.SimuDataStore.Where(o => o.UserName.Contains(keywd));
          return Json(new KendoGrid<SimMemberInfo>(request, result));
      }

Ö»Òªreturn Json(new KendoGrid<T>(KendoGridRequest, IEnumerable<T>))£¬ÓàÏÂµÄ»»Ò³¡¢ÅÅÐò£¬ÉõÖÁ×Ö¶Î¹ýÂË¹¦ÄÜ£¬¾Í¶¼½»¸øKendoGridBinderÈ«È¨´¦Àí†ª!

ÔÚASP.NET MVC 4ÖÐÊ¹ÓÃKendo UI Grid

Ïà¹ØÎÄÕÂ

ÓÃ»§ÆÀÓï