上一篇的操作已经能够显示基本数据了,这次介绍一下如何进行数据操作以及显现自定义命令。
第一步当然还是准备数据：
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自带的编辑有点繁琐,不过优点在于可控性高，使用时请酌情考虑。