kendo dataBound 单元格内部分变色

转载 2016年06月01日 10:04:58

原文出处:http://blog.darkthread.net/post-2012-06-06-kendoui-grid-in-aspnet-mvc4.aspx

在ASP.NET MVC 4中使用Kendo UI Grid

之前寫過用ASP.NET WebForm作為AJAX式資料源的Kendo UI Grid範例,最近計劃在一個小專案試用ASP.NET MVC 4 RC,面對的第一個需求又是"以清單呈現查詢結果",就來看看如何用ASP.NET MVC 4 RC滿足Kendo UI Grid的需求吧!

記得前一次用ashx寫資料端,花了不少功夫處理分頁及排序,而且還沒實做Filter過濾功能。但在ASP.NET MVC上,要整合Kendo UI Grid,則有很酷的方便選擇 -- KendoGridBinder!!

以下是我實做Kendo UI Grid + ASP.NET MVC 4的過程:

  1. 建立一個ASP.NET MVC 4專案 
  2. 使用NuGet安裝KendoUIWeb及KendoGridBinder 
  3. 借用上回的SimMemberInfo Model類別 ,放在Model目錄下: 
    排版顯示純文字
    using System;
    using System.Collections.Generic;
    using System.Drawing;
    using System.Linq;
    using System.Reflection;
    using System.Web;
     
    namespace KendoGridMvc.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();
            }
        }
    }

  4. 要引用Kendo UI,需要載入必要的JS及CSS,此時昨天介紹過的ASP.NET MVC打包壓縮功能馬上派上用場! 編輯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"
                    ));

    PS: 此處有一個眉角:由於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",這樣就能避開問題。
    [2014-10-13更新]關於此問題的深入探討

  5. 為了省去每個View都要加掛Kendo UI JS及CSS的麻煩,我索性將它們加在~/Views/Shared/_Layout.cshtml中: 
    排版顯示純文字
    <!DOCTYPE html>
    <html>
    <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")
        @Scripts.Render("~/bundles/jquery", "~/bundles/kendoUI")
        @RenderSection("scripts", required: false)
    </head>
    <body>
        @RenderBody()
    </body>
    </html>

  6. 網頁Index.cshtml的Client端做法,則跟上回WebForm AJAX範例幾乎完全相同:
    排版顯示純文字
    @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>

  7. 最後來到重頭戲,負責以AJAX方式傳回資料的HomeController.cs的Grid() Action:
    排版顯示純文字
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using KendoGridBinder;
    using KendoGridMvc.Models;
     
    namespace KendoGridMvc.Controllers
    {
        public class HomeController : Controller
        {
            //
            // GET: /Home/
     
            public ActionResult Index()
            {
                return View();
            }
     
            public JsonResult Grid(KendoGridRequest request, string keywd)
            {
                var result = SimMemberInfo.SimuDataStore.Where(o =>
                string.IsNullOrEmpty(keywd) || o.UserName.Contains(keywd));
                return Json(new KendoGrid<SimMemberInfo>(request, result));
            }
        }
    }
    什麼? 沒看錯吧? 這樣就好? 
    是的,感謝Ryan Whitmire及Jose Ball的佛心與巧思,只要return Json(new KendoGrid<T>(KendoGridRequest, IEnumerable<T>)),餘下的換頁、排序,甚至欄位過濾功能,就都交給KendoGridBinder全權處理囉!

實際測試,換頁、排序功能一切正常,有了Kendo UI助陣,ASP.NET MVC之路順利多了~


相关文章推荐

KendoUI 如何布局页面

简单的例子,载入header与footer look Bar Header djddldsl new kendo.mobile.Application($(documen...

Kendo UI开发教程(19): Kendo MVVM 数据绑定(八) Style

Style绑定可以通过ViewModel绑定到DOM元素CSS风格属性,例如:1span data-bind="style: {color: priceColor, fontWeight: price...

文本域与文字在单元格内对齐

  • 2010年12月13日 14:23
  • 940B
  • 下载

POI, 模板读写和修改, 单元格内换行, 打包成zip

 同上一篇TableTree4J的, 这是我实习一开始就遇到的一个问题. 据说还是已经离职的那位仁兄研究了好久都没有解决的疑难问题呢... 之前没有接触过POI, 研究了一个周末POI的AP...

table的宽度,单元格内换行问题

一. 要想固定table的总的宽度和每列的宽度:   TABLE id="Table1" style="TABLE-LAYOUT:fixed" border="1">   或在脚本中:   th...

Cxgrid获取选中行列,排序规则,当前正在编辑的单元格内的值

cxGrid1DBTableView1.Controller.FocusedRowIndex 当前行号 cxGrid1DBTableView1.Controller.FocusedRow 当前行 ...

dbgrideh 一个单元格内怎么换行显示

DBGridEh1.Columns[i].WordWrap:= True

Ext.grid.EditorGridPanel单元格内套用下拉列表,且列表数据为动态加载,支持模糊查询,有描述信息

function familyMemberStore(familyId){ var familyMemberResultGridStore = new Ext.data.JsonStore({ r...
  • ylwyoyo
  • ylwyoyo
  • 2013年10月19日 16:16
  • 1176

table的宽度,单元格内换行问题[转]

作者Blog:http://blog.csdn.net/chnking/一.     要想固定table的总的宽度和每列的宽度:或在脚本中:this.style.tableLayout = fixed...
  • kinglo
  • kinglo
  • 2011年02月12日 09:31
  • 485
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:kendo dataBound 单元格内部分变色
举报原因:
原因补充:

(最多只允许输入30个字)