kendoui-grid篇

kendo確實是個好東西，可以讓咱們專一於後端開發，無需在效果呈現上花大力氣，惟一的缺點，它是收費的，可是我目前還沒發現爲嘛要掏錢，由於free的也知足了個人需求。

kendoUI For asp.mvc:http://demos.telerik.com/aspnet-mvc/

 1 <div id="page-wrapper">
 2     <div class="row">
 3         <div class="col-lg-12">
 4             <h1 class="page-header">新聞管理</h1>
 5         </div>
 6         <!-- /.col-lg-12 -->
 7     </div>
 8     <!-- /.row -->
 9     <div class="row">
10         <div class="col-lg-12">
11             <div class="panel panel-default">
12                 <div class="panel-body">
13                     <h3>新聞列表</h3>
14                     <div class="table-responsive">
15                           @(Html.Kendo().Grid<WebSite.Models.NewsViewsModel>()
16                                 .Name("grid")
17                                 .Columns(columns =>
18                                 {
19                                     columns.Bound(p => p.Id).Title("序號").Filterable(false);
20                                     columns.Bound(p => p.Title).Title("新聞標題").Sortable(false);
21                                     columns.Bound(p => p.NewsTypeName).Title("新聞類別").Sortable(false).Filterable(filterable => filterable.UI("NewsTypeFilter"));
22                                     columns.Bound(p => p.VisitCount).Title("瀏覽次數").Filterable(false);
23                                     columns.Bound(p => p.WriteTime).Title("發佈時間").Sortable(false).Filterable(false);
24                                     columns.Bound(p => p.NickName).Title("發佈人").Sortable(false).Filterable(filterable => filterable.UI("AdminFilter"));
25                                     columns.Command(command => command.Custom("編輯").Click("showDetails"));
26                                     columns.Command(command =>
27                                     {
28                                         command.Destroy();
29                                     });
30                                 })
31                                 .Sortable()
32                                 .Pageable()
33                                 .Filterable()
34                                 .DataSource(dataSource => dataSource
35                                 .Ajax()
36                                 .Events(events => events.Error("error_handler"))
37                                 .Model(model => model.Id(p => p.Id))
38                                 .PageSize(13)
39                                     .Read(read => read.Action("News_Read", "Admin"))
40                                     .Destroy(x => x.Action("NewsDelete", "Admin"))
41                                 )
42                         )
43                     </div>
44                 </div>
45             </div>
46         </div>
47         <!-- /.col-lg-12 -->
48     </div>
49     <!-- /.row -->
50 
51 </div>
52 <!-- /#page-wrapper -->
53 <script type="text/javascript">
54     function error_handler(e) {
55         if (e.errors) {
56             var message = "Errors:\n";
57             $.each(e.errors, function (key, value) {
58                 if ('errors' in value) {
59                     $.each(value.errors, function () {
60                         message += this + "\n";
61                     });
62                 }
63             });
64             alert(message);
65         }
66     }
67    
68 
69     function showDetails(e) {                
70         var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
71         window.location.href = '/Admin/NewsAddOrUpdate?id='+dataItem.Id;        
72     }
73 
74     function NewsTypeFilter(element)
75     {
76         element.kendoDropDownList({
77             dataSource: {
78                 transport: {
79                     read: "@Url.Action("Get_NewsType")"
80                 }
81             },
82                 optionLabel: "--選擇新聞類別--"
83         });
84     }
85 
86     function AdminFilter(element)
87     {
88         element.kendoDropDownList({
89             dataSource: {
90                 transport: {
91                     read: "@Url.Action("Get_Admin")"
92                 }
93             },
94                 optionLabel: "--選擇管理員--"
95         });
96     }
97 </script>

這是前端代碼，很簡潔，若是咱們本身實現相似功能，那就是一大堆js，功能還沒它好，支持排序，查詢。。。分頁。。。

  1 public ActionResult NewsList()
  2         {
  3             return View();
  4         }
  5 
  6         public ActionResult Get_NewsType()
  7         {
  8             var lservice = UnitOfWork.NewsTypes;
  9             return Json(lservice.Select(e => e.NewsTypeName).Distinct(), JsonRequestBehavior.AllowGet);
 10         }
 11 
 12         public ActionResult Get_Admin()
 13         {
 14             var lservice = UnitOfWork.Admins;
 15             return Json(lservice.Select(e => e.NickName).Distinct(), JsonRequestBehavior.AllowGet);
 16         }
 17 
 18         private List<SelectListItem> getNewsType()
 19         {
 20             List<SelectListItem> list = new List<SelectListItem>();
 21 
 22             var lnewstype = UnitOfWork.NewsTypes.ToList();
 23             foreach (var item in lnewstype)
 24             {
 25                 SelectListItem obj = new SelectListItem();
 26                 obj.Text = item.NewsTypeName;
 27                 obj.Value = item.Id.ToString();
 28                 list.Add(obj);
 29             }
 30             return list;
 31         }
 32 
 33         public ActionResult News_Read([DataSourceRequest]DataSourceRequest request)
 34         {            
 35             var lnews = UnitOfWork.NewsInfos;
 36 
 37             //filter
 38             if (request.Filters.Count() > 0)
 39             {
 40                 foreach (var item in request.Filters)
 41                 {
 42                     string type = item.GetType().ToString();
 43                     if (type == "Kendo.Mvc.FilterDescriptor")
 44                     {
 45                         var model = ((Kendo.Mvc.FilterDescriptor)item);
 46                         if (model.Member == "Title")
 47                         {
 48                             lnews = (IQueryable<NewsInfo>)lnews.Where(x => x.Title == model.Value.ToString());
 49                         }
 50                         else if (model.Member == "NewsTypeName")
 51                         {
 52                             lnews = (IQueryable<NewsInfo>)lnews.Where(x => x.NewsType.NewsTypeName == model.Value.ToString());
 53                         }
 54                         else if (model.Member == "NickName")
 55                         {
 56                             lnews = (IQueryable<NewsInfo>)lnews.Where(x => x.Admin.NickName == model.Value.ToString());
 57                         }
 58                     }
 59                     else
 60                     {
 61                         var model = ((Kendo.Mvc.CompositeFilterDescriptor)item);
 62                         foreach (var i in model.FilterDescriptors)
 63                         {
 64                             var cur = ((Kendo.Mvc.FilterDescriptor)i);
 65                             if (cur.Member == "Title")
 66                             {
 67                                 lnews = (IQueryable<NewsInfo>)lnews.Where(x => x.Title == cur.Value.ToString());
 68                             }
 69                             else if (cur.Member == "NewsTypeName")
 70                             {
 71                                 lnews = (IQueryable<NewsInfo>)lnews.Where(x => x.NewsType.NewsTypeName == Convert.ToString(cur.Value));
 72                             }
 73                             else if (cur.Member == "NickName")
 74                             {
 75                                 lnews = (IQueryable<NewsInfo>)lnews.Where(x => x.Admin.NickName == Convert.ToString(cur.Value));
 76                             }
 77                         }
 78                     }
 79                 }
 80             }
 81 
 82             int nTotalCount = lnews.Count();
 83 
 84             //Apply sorting
 85             if (request.Sorts.Count() == 0)
 86             {
 87                 request.Sorts.Add(new SortDescriptor("Id", ListSortDirection.Descending));
 88             }
 89             foreach (SortDescriptor sortDescriptor in request.Sorts)
 90             {
 91                 if (sortDescriptor.SortDirection == ListSortDirection.Ascending)
 92                 {
 93                     switch (sortDescriptor.Member)
 94                     {
 95                         case "Id":
 96                             lnews = lnews.OrderBy(x => x.Id);
 97                             break;
 98                         case "VisitCount":
 99                             lnews = lnews.OrderBy(x => x.VisitCount);
100                             break;
101                     }
102                 }
103                 else
104                 {
105                     switch (sortDescriptor.Member)
106                     {
107                         case "Id":
108                             lnews = lnews.OrderByDescending(x => x.Id);
109                             break;
110                         case "VisitCount":
111                             lnews = lnews.OrderByDescending(x => x.VisitCount);
112                             break;
113                     }
114                 }
115             }
116 
117             List<NewsViewsModel> list = new List<NewsViewsModel>();
118 
119             lnews = lnews.Skip((request.Page - 1) * request.PageSize).Take(request.PageSize);
120 
121             foreach (var item in lnews)
122             {
123                 NewsViewsModel model = new NewsViewsModel();
124                 model.Id = item.Id;
125                 model.AdminId = item.Admin.Id;
126                 model.NewsContent = item.NewsContent;
127                 model.NewsTypeId = item.NewsTypeId;
128                 model.NewsTypeName = item.NewsType.NewsTypeName;
129                 model.NickName = item.Admin.NickName;
130                 model.Title = item.Title;
131                 model.VisitCount = item.VisitCount;
132                 model.WriteTime = item.WriteTime.ToString();
133                 list.Add(model);
134             }
135 
136             var result = new DataSourceResult()
137             {
138                 Data = list,
139                 Total = nTotalCount
140             };
141             return Json(result, JsonRequestBehavior.AllowGet);
142         }

後臺代碼也就獲取grid數據時，複雜一些。。整體仍是能接受的