上一篇的操作已經能夠顯示基本數據了,這次介紹一下如何進行數據操作以及顯現自定義命令。
第一步當然還是准備數據：
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自帶的編輯有點繁瑣,不過優點在於可控性高，使用時請酌情考慮。