Asp.net mvc Kendo UI Grid的使用(三)

　　上一篇的操作已经能够显示基本数据了,这次介绍一下如何进行数据操作以及显现自定义命令。

第一步当然还是准备数据：

1 [HttpPost]
2 public ActionResult PersonalList_Read(DataSourceRequest request)
3 {
4      var listmodel = _userServices.GetPersonalInfoList();
5      DataSourceResult result =listmodel.ToDataSourceResult(request);
6      result.Total = listmodel.Count();
7      return Json(result);
8 }

第二步配置Grid:

 1 <div class="list-grid">
 2     @(Html.Kendo().Grid<PersonalInfoModel>()
 3         .Name("PersonalListGrid")
 4         .Columns(columns =>
 5         {
 6             columns.Bound(c => c.Id).Width(20);
 7             columns.Bound(c => c.Name).Title("名称").Width(80);
 8             columns.Bound(c => c.StudentNo).Title("编号").Width(120);
 9             columns.Bound(c => c.Age).Title("年龄").Width(80);
10             columns.Bound(c => c.Gender).EditorTemplateName("GenderDropdownList")
11                                         .Title("性别").Width(80);
12             columns.Bound(c=>c.Phone).Title("手机号").Width(120);
13             columns.Bound(c => c.LocalArea).Title("所在地");
14             columns.Bound(c => c.Signature).Title("签名");
15             columns.Command(cmd =>
16             {
17                 cmd.Edit();
18                 cmd.Destroy();
19                 //cmd.Custom("编辑").HtmlAttributes(new { data_bind_operation="test"});
20             }).Title("操作").Width(200);
21         })
22          .HtmlAttributes(new {style="width:1024px;"})
23          .Editable(e => e.Mode(GridEditMode.PopUp))
24          .Scrollable(s => s.Enabled(false))
25          .Sortable(sort => sort.Enabled(false))
26          .Pageable(page => page
27                 .Refresh(true)
28                 .ButtonCount(5)
29                 .PageSizes(new[] { 10, 20, 30, 50 })
30                 .Messages(message=>message.ItemsPerPage("每页显示数目"))
31          )
32          //.Events(events => { events.DetailExpand("showAddressView"); })
33          .DataSource(datasource => datasource
34              .Ajax()
35              .PageSize(10).ServerOperation(true)
36              .Model(model => model.Id(c => c.Id))
37              .Model(model => model.Field(c => c.Id).Editable(false))
38              .Read(read => read.Action("PersonalList_Read", "Home"))
39              .Update(updates => updates.Action("PersonalList_Updates", "Home"))
40              .Destroy(destroy=>destroy.Action("PersonalList_Destroy","Home"))
41           )
42     )
43 </div>

这里面columns.Command()是用来配置要执行的命令按钮的,比如这里我显示的是编辑按钮和删除按钮,如果使用了kendo自带的命令,在数据源中必须要配置Action,否则将报错无法运行。 .Editable(e => e.Mode(GridEditMode.PopUp))属性是配置如何编辑数据，默认有三个参数InLine,InCell,PopUp。看名字也知道是啥么意思，我就不多说了。运行效果如下：

这是弹出窗式的编辑。

这是行编辑，另外一种是单击时编辑。如果某个字段你不想让它被编辑可以加上.Model(model => model.Field(c => c.Id).Editable(false))

在这里写上你的字段名就可以了。

我个人是比较喜欢使用弹出窗式编辑的，因为可控性比较高，这里我实现一个自定义的弹出窗。

首先在页面添加一个Kendo Window:

1 <div>
2     @(Html.Kendo().Window().Name("Editors")
3         .Title("编辑信息")
4         .Visible(false)
5         .Modal(true)
6         .Draggable(true)
7         .Width(500)
8     )
9 </div>

把Grid里面的命令行修改为这样,Click的参数为js函数的名称(注意:如果cmd.Edit();删除的话,一定要记得把DataSource中的Update方法删掉):

1    columns.Command(cmd =>{
2    cmd.Custom("编辑").Click("popUpWindow");
3    //cmd.Edit();
4    cmd.Destroy();
5  })

下面开始干正事~:

 1 <script>
 2     var windowObject;
 3     $(document).ready(function () {
 4         windowObject = $("#Editors").data("kendoWindow");
 5     });
 6     function popUpWindow(e) {
 7         var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
 8         windowObject.refresh({
 9             url: "/Home/UpdateInfo?id=" + dataItem.Id
10         });
11         windowObject.center().open();
12     }
13 </script>

解释下上边的代码,$("#Editors").data("kendoWindow")可以获取到Window的相关设置与数据配置;this.dataItem($(e.currentTarget).closest("tr")),获取当前行的数据; windowObject.refresh()函数是用于自定Window的内容;.center().open()是让Window居中显示。
既然有Url那就好办了，在控制器中新建一个Action：

 

1 public ActionResult UpdateInfo(int id)
2 {
3    var model = _userServices.GetUserInfoListById(id);//获取当前行的数据
4    return View(model);
5  }

 

在页面中就是像平常写Html代码一样了:

 1 @using (Html.BeginForm("PersonalList_Update", "Home", FormMethod.Post, new { @class = "form-horizontal" }))
 2 {
 3     @Html.HiddenFor(x => x.Id)
 4     <div class="control-group">
 5         <div >
 6             @Html.LabelFor(x => x.Name, new { @class = "control-label" })
 7         </div>
 8         <div>
 9             @Html.TextBoxFor(x => x.Name)
10         </div>
11     </div>
12 
13     <div class="control-group">
14         <div>
15             @Html.LabelFor(x => x.Age, new { @class = "control-label" })
16         </div>
17         <div>
18             @Html.TextBoxFor(x => x.Age)
19         </div>
20     </div>
21 
22     <div class="control-group">
23         <div>
24             @Html.LabelFor(x => x.StudentNo, new { @class = "control-label" })
25         </div>
26         <div>
27             @Html.TextBoxFor(x => x.StudentNo)
28         </div>
29     </div>
30 
31     <div class="control-group">
32         <div>
33             @Html.LabelFor(x => x.Phone, new { @class = "control-label" })
34         </div>
35         <div>
36             @Html.TextBoxFor(x => x.Phone)
37         </div>
38     </div>
39 
40     <div class="control-group">
41         <div>
42             @Html.LabelFor(x => x.LocalArea, new { @class = "control-label" })
43         </div>
44         <div>
45             @Html.TextBoxFor(x => x.LocalArea, new { style = "width: 450px;" })
46         </div>
47     </div>
48     
49     <div class="control-group">
50         <div>
51             @Html.LabelFor(x => x.Signature, new { @class = "control-label" })
52         </div>
53         <div>
54             @Html.TextBoxFor(x => x.Signature, new { style = "width: 450px;" })
55         </div>
56     </div>
57 
58 
59     <div class="list-item">
60         <input id="saveinfo" type="submit" class="btn" value="更新" />
61         <input id="cancelEidt" type="button" class="btn" value="取消" />
62     </div>
63 }
代码有点长,点我查看~

接着就是用js处理数据了:

 1 <script>
 2     $(function () {
 3         
 4         $("#saveinfo").on("click", function (e) {
 5             e.preventDefault();
 6             var $form = $("form"), kendoDataSource = $("#PersonalListGrid").data("kendoGrid");
 7             $.ajax({
 8                 type: "post",
 9                 url: $form.attr("action"),
10                 data: $form.serialize(),
11                 success: function (result) {
12                     if (result.success) {
13                         $("#Editors").data("kendoWindow").close();//关闭Window
14                         kendoDataSource.dataSource.read();//刷新grid
15                     } else {
16                         alert(result.message);
17                     }
18                 }
19             });
20         });
21         
22         
23         /* 关闭Window */
24         $("#cancelEidt").on("click", function () {
25             $("#Editors").data("kendoWindow").close();
26         });
27     });
28 </script>

运行结果如图：

这样就实现了自定义弹出窗,虽然比使用grid自带的编辑有点繁琐,不过优点在于可控性高，使用时请酌情考虑。

 

posted @ 2015-04-27 16:19  大杯美式不加糖不加奶  阅读(1949)  评论(3)  编辑  收藏  举报