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

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

 [HttpPost]
 public ActionResult PersonalList_Read(DataSourceRequest request)
 {
      var listmodel = _userServices.GetPersonalInfoList();
      DataSourceResult result =listmodel.ToDataSourceResult(request);
      result.Total = listmodel.Count();
      return Json(result);
 }

第二步配置Grid:

 <div class="list-grid">
     @(Html.Kendo().Grid<PersonalInfoModel>()
         .Name("PersonalListGrid")
         .Columns(columns =>
         {
             columns.Bound(c => c.Id).Width();
             columns.Bound(c => c.Name).Title();
             columns.Bound(c => c.StudentNo).Title();
             columns.Bound(c => c.Age).Title();
             columns.Bound(c => c.Gender).EditorTemplateName("GenderDropdownList")
                                         .Title();
             columns.Bound(c=>c.Phone).Title();
             columns.Bound(c => c.LocalArea).Title("所在地");
             columns.Bound(c => c.Signature).Title("签名");
             columns.Command(cmd =>
             {
                 cmd.Edit();
                 cmd.Destroy();
                 //cmd.Custom("编辑").HtmlAttributes(new { data_bind_operation="test"});
             }).Title();
         })
          .HtmlAttributes(new {style="width:1024px;"})
          .Editable(e => e.Mode(GridEditMode.PopUp))
          .Scrollable(s => s.Enabled(false))
          .Sortable(sort => sort.Enabled(false))
          .Pageable(page => page
                 .Refresh(true)
                 .ButtonCount()
                 .PageSizes(, , ,  })
                 .Messages(message=>message.ItemsPerPage("每页显示数目"))
          )
          //.Events(events => { events.DetailExpand("showAddressView"); })
          .DataSource(datasource => datasource
              .Ajax()
              .PageSize().ServerOperation(true)
              .Model(model => model.Id(c => c.Id))
              .Model(model => model.Field(c => c.Id).Editable(false))
              .Read(read => read.Action("PersonalList_Read", "Home"))
              .Update(updates => updates.Action("PersonalList_Updates", "Home"))
              .Destroy(destroy=>destroy.Action("PersonalList_Destroy","Home"))
           )
     )
 </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:

 <div>
     @(Html.Kendo().Window().Name("Editors")
         .Title("编辑信息")
         .Visible(false)
         .Modal(true)
         .Draggable(true)
         .Width()
     )
 </div>

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

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

下面开始干正事~:

 <script>
     var windowObject;
     $(document).ready(function () {
         windowObject = $("#Editors").data("kendoWindow");
     });
     function popUpWindow(e) {
         var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
         windowObject.refresh({
             url: "/Home/UpdateInfo?id=" + dataItem.Id
         });
         windowObject.center().open();
     }
 </script>

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

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

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

 @using (Html.BeginForm("PersonalList_Update", "Home", FormMethod.Post, new { @class = "form-horizontal" }))
 {
     @Html.HiddenFor(x => x.Id)
     <div class="control-group">
         <div >
             @Html.LabelFor(x => x.Name, new { @class = "control-label" })
         </div>
         <div>
             @Html.TextBoxFor(x => x.Name)
         </div>
     </div>

     <div class="control-group">
         <div>
             @Html.LabelFor(x => x.Age, new { @class = "control-label" })
         </div>
         <div>
             @Html.TextBoxFor(x => x.Age)
         </div>
     </div>

     <div class="control-group">
         <div>
             @Html.LabelFor(x => x.StudentNo, new { @class = "control-label" })
         </div>
         <div>
             @Html.TextBoxFor(x => x.StudentNo)
         </div>
     </div>

     <div class="control-group">
         <div>
             @Html.LabelFor(x => x.Phone, new { @class = "control-label" })
         </div>
         <div>
             @Html.TextBoxFor(x => x.Phone)
         </div>
     </div>

     <div class="control-group">
         <div>
             @Html.LabelFor(x => x.LocalArea, new { @class = "control-label" })
         </div>
         <div>
             @Html.TextBoxFor(x => x.LocalArea, new { style = "width: 450px;" })
         </div>
     </div>

     <div class="control-group">
         <div>
             @Html.LabelFor(x => x.Signature, new { @class = "control-label" })
         </div>
         <div>
             @Html.TextBoxFor(x => x.Signature, new { style = "width: 450px;" })
         </div>
     </div>

     <div class="list-item">
         <input id="saveinfo" type="submit" class="btn" value="更新" />
         <input id="cancelEidt" type="button" class="btn" value="取消" />
     </div>
 }

代码有点长,点我查看~

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

 <script>
     $(function () {

         $("#saveinfo").on("click", function (e) {
             e.preventDefault();
             var $form = $("form"), kendoDataSource = $("#PersonalListGrid").data("kendoGrid");
             $.ajax({
                 type: "post",
                 url: $form.attr("action"),
                 data: $form.serialize(),
                 success: function (result) {
                     if (result.success) {
                         $("#Editors").data("kendoWindow").close();//关闭Window
                         kendoDataSource.dataSource.read();//刷新grid
                     } else {
                         alert(result.message);
                     }
                 }
             });
         });

         /* 关闭Window */
         $("#cancelEidt").on("click", function () {
             $("#Editors").data("kendoWindow").close();
         });
     });
 </script>

运行结果如图:

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

Asp.net mvc Kendo UI Grid的使用(三)的更多相关文章

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

    上一篇文章对Kendo UI做了一些简单的介绍以及基本环境,这篇文章来介绍一下Grid的使用 先上效果图: 要实现这个效果在Controller在要先导入Kendo.Mvc.UI,Kendo.Mvc. ...

  2. [Asp.net mvc] Asp.net mvc Kendo UI Grid的使用(四)

    有段时间没写博客了,工作状态比较忙,抽空继续总结下Grid的使用,这次主要介绍模板以及其他官网介绍不详尽的使用方法.先Show出数据,然后讲解下.后台代码: public ActionResult O ...

  3. kendo ui grid选中行事件,获取combobox选择的值

    背景: 以前用 telerik ui做的grid现在又要换成kendo ui,不过说句实话kendo ui真的比telerik好多,可以说超级升级改头换面.当然用的mvc的辅助方法,以前的teleri ...

  4. Kendo UI 单页面应用(三) View

    Kendo UI 单页面应用(三) View view 为屏幕上某个可视部分,可以处理用户事件. View 可以通过 HTML 创建或是通过 script 元素.缺省情况下 View 将其所包含的内容 ...

  5. ASP.Net MVC开发基础学习笔记:三、Razor视图引擎、控制器与路由机制学习

    一.天降神器“剃须刀” — Razor视图引擎 1.1 千呼万唤始出来的MVC3.0 在MVC3.0版本的时候,微软终于引入了第二种模板引擎:Razor.在这之前,我们一直在使用WebForm时代沿留 ...

  6. 在ASP.NET MVC中使用Grid.mvc

    很久没有写ASP.NET的博文了,专心工作嘛,今天写一点MVC的博文,也是自己练习来的,是使用grid.mvc来显示数据. 首先打开Manage Nuget Packages,搜索grid.mvc并安 ...

  7. 封装扩展Kendo UI Grid

    封装后的代码如下: function DataGrid(options) { this.options = { height: "100%", sortable: true, re ...

  8. kendo ui grid 汉化

    加入js引用 <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" r ...

  9. kendo ui - grid 数据表格系列

    kendo-ui 官网:https://www.telerik.com/documentation 初始化 grid: 引入文件: <link rel="stylesheet" ...

随机推荐

  1. AVL树原理及实现(C语言实现以及Java语言实现)

    欢迎探讨,如有错误敬请指正 如需转载,请注明出处http://www.cnblogs.com/nullzx/ 1. AVL定义 AVL树是一种改进版的搜索二叉树.对于一般的搜索二叉树而言,如果数据恰好 ...

  2. python备忘

    1.引用已经编写好的.py文件(Windows系统) >>>import sys >>>sys.path.append("C:/python") ...

  3. wcf 推送 与 广播

    原文地址:http://blog.csdn.net/is_zhoufeng/article/details/7641234 ////wcf 接口   #region << 版 本 注 释 ...

  4. Facade(外观)-对象结构型模式

    1.意图 为子系统中的一组接口提供一个一致的接口,Facade模式定义了一个高层接口,这个接口使得这一子系统更加容易使用. 2.动机 将一个系统划分成若干子系统有利于降低系统的复杂性.一个常见的设计目 ...

  5. light oj 1155 - Power Transmission【拆点网络流】

    1155 - Power Transmission   PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 ...

  6. python学习第十八天 --文件操作

    这一章节主要讲解文件操作及其文件读取,缓存,文件指针. 文件操作 (1)文件打开:open(filepath,filemode) filepath:要打开文件的路径 filemode:文件打开的方式 ...

  7. Caused by: java.lang.ClassNotFoundException: javax.persistence.NamedStoredProcedureQuery

    1.错误描述 2014-7-12 21:06:37 org.hibernate.engine.jdbc.internal.LobCreatorBuilder useContextualLobCreat ...

  8. MeasureSpec 的三中类型

    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&qu ...

  9. win7 上运行 php7 +

    win7 安装 php7+ 很简单, 这里不赘述 如何在phpstudy 添加   php7   百度也很容易找到. 但是在 php 7 运行的时候总是报0x0000007  或者 缺少 .dll 文 ...

  10. (转)Intellij IDEA 快捷键整理

    [常规] Ctrl+Shift + Enter,语句完成 “!”,否定完成,输入表达式时按 “!”键 Ctrl+E,最近的文件 Ctrl+Shift+E,最近更改的文件 Shift+Click,可以关 ...