Plugin - Kendo UI - Grid

Razer

基础功能(获取本地数据)

后台

public ActionResult Index()
{
    return View(db.Users);
}

前端

@model IEnumerable<DEMO.Models.User>

@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
            {
                columns.Bound(c => c.UserName);
                columns.Bound(c => c.PassWord);
            })
    )

 

基础功能(从远程服务器获取数据)

后台

public ActionResult GetData([DataSourceRequest] DataSourceRequest request)
{
　　return Json(db.Users.ToDataSourceResult(request));
}

前端

@(Html.Kendo().Grid<DEMO.Models.User>()
        .Name("Grid2")
        .Columns(columns =>
            {
                columns.Bound(c => c.UserName);
                columns.Bound(c => c.PassWord);
            })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(read => read.Action("GetData", "Grid"))
        )
    )

 

进阶功能

后台

DEMOContext db = new DEMOContext();

        ///////////////////////////
        ///         视图        ///
        ///////////////////////////
        public ActionResult Index()
        {
            ViewData["teachers"] = (System.Collections.IEnumerable)db.Teachers;
            return View(db.Users);
        }

        ///////////////////////////
        ///       获取数据      ///
        ///////////////////////////
        public ActionResult GetData([DataSourceRequest] DataSourceRequest request)
        {
            return Json(db.Users.ToDataSourceResult(request));
        }

        ///////////////////////////
        ///       增删改查      ///
        ///////////////////////////
        public ActionResult Create(User User)
        {
            if (User != null)
            {
                db.Users.Add(User);
                db.SaveChanges();
            }

            return RedirectToAction("Index", "Grid");
        }
        public ActionResult Delete(User User)
        {
            if (User != null)
            {
                db.Entry(User).State = System.Data.Entity.EntityState.Deleted;
                db.SaveChanges();
            }

            return RedirectToAction("Index", "Grid");
        }
        /// <summary>
        /// 更新
        /// 只能在 Batch=true 下才能获得集合数据
        /// </summary>
        public ActionResult Update([Bind(Prefix = "models")] IEnumerable<User> Users)
        {
            if (Users != null && ModelState.IsValid)
            {
                foreach (var user in Users)
                {
                    db.Entry(user).State = System.Data.Entity.EntityState.Modified;
                }

                db.SaveChanges();
            }

            return RedirectToAction("Index","Grid");
        }
        /// <summary>
        /// 更新
        /// 在 Batch=true, Batch=false下都可以使用
        /// Batch=true  将集合对象多次发送给该方法
        /// Batch=false 则发送单个对象
        /// <summary>
        public ActionResult Update2(User User)
        {
            if (User != null && ModelState.IsValid)
            {
                db.Entry(User).State = System.Data.Entity.EntityState.Modified;

                db.SaveChanges();
            }

            return RedirectToAction("Index", "Grid");
        }

前端 

// <DEMO.Models.User> 为指定获取远程数据的类型
// Model 则为本地数据
@(Html.Kendo().Grid<DEMO.Models.User>(Model)
        .Name("Grid")
        .Columns        // 列选项
        (       
            columns =>
            {
                // 绑定数据1
                columns.Bound(c => c.UserName);
                // 绑定数据2
                columns.Bound(c => c.PassWord);
                // 绑定外键数据
                // Inline 编辑模式下会出现下拉框, Popup模式下则没有
                // ViewData需要是一个IEnumerable数据
                // 或者可以是SelectList数据
                columns.ForeignKey(c => c.TreacherID, (System.Collections.IEnumerable)ViewData["teachers"], "ID", "Name");
                // 列模板,只有在绑定出错的情况下Template才会有效
                // 绑定正确的情况下只对ClientTemplate有效,我也不知道这是什么傻逼设定
                columns.Template(@<div>button</div>).ClientTemplate("<button>button2</button>")
                // 命令按钮
                columns.Command
                    (
                        command =>
                        {
                            // 选择, 在服务器模式下使用
                            command.Select();
                            // 编辑, 在Batch模式下必须使用 InCell模式
                            command.Edit();
                            //删除
                            command.Destroy();
                        }
                    );
            }
        )
        .ToolBar        // 是否支持工具栏
        (
            toolbar =>
            {
                // 添加按钮
                toolbar.Create();
                // 保存&取消按钮 在Batch模式下使用,必须使用InCell的编辑模式
                toolbar.Save();
                // 导出Excel
                // 不能再 Server 模式下使用
                toolbar.Excel();
                // 导出到Pdf
                toolbar.Pdf();
                // 自定义按钮
                toolbar.Custom();
            }
        )
        .Pageable       // 是否支持分页
        (
            pageable =>
                {
                    // 是否有刷新按钮
                    // 使用远程获取数据的情况下才可以使用
                    pageable.Refresh(true);
                    // 是否有选项选择一页显示多少数据,
                    // 重载.PageSizes(int[]) 表示给出几种选择
                    pageable.PageSizes(true);
                    // 显示可选择的页码数
                    pageable.ButtonCount(5);
                }
        )
        .Editable       // 是否支持编辑
        (
            editable => 
                {
                    // 编辑模式
                    // InCell 单元格中
                    // InLine 行
                    // PopUp 新窗口
                    editable.Mode(GridEditMode.InLine);
                }
        )
        .Selectable     // 是否支持选择
            (
                selectable => 
                    {
                        // 支持多选还是单选
                        selectable.Mode(GridSelectionMode.Multiple);
                        // 已行为单位还是单元格为单位
                        selectable.Type(GridSelectionType.Row);
                    }
            )
        .Sortable()     // 是否支持排序
        .Scrollable     // 固定表格高度 并在数据长度超出时给出滚动条
        (
            scr => 
                {
                    // 高度
                    scr.Height(200);
                    // 支持虚拟化读取数据
                    // 每次获取固定条数据,当滚动条滚动的时候重新读取新的数据
                    scr.Virtual(true);
                }
        )
        .Filterable()   // 是否支持筛选
        .Groupable()    // 是否支持分组
        .Navigatable()  // ?
        .DataSource     // 数据绑定选项
        (
            dataSource => dataSource
                    // 服务器模式, 每次操作都会请求服务器
                // .Server()
                    // 是否异步
                .Ajax()
                    // 是否批量发送数据
                    // 如果是 则批量更改数据后 向后台发送 IEnumerable<Type> 数据
                    // 如果否 则分批向后台传送 Type 数据
                    // 无法再服务器模式下使用
                .Batch(false)
                    // 默认一页显示多少条记录
                .PageSize(8)
                    // 在服务端操作, 需要在后台的方法中加 [DataSourceRequest]DataSourceRequest request 参数
　　　　　　　　      //  例如在分页的情况下, 每点击下一页都会访问一次服务器. 否则是一次性读取所有的数据到前端 由前端分页
                    // 无法再服务器模式下使用
                .ServerOperation(false)
                    //
                .Model
                (
                    model =>
                    {
                        // 指定主键, 
　　　　　　　　　　　　　　// 在只用自带的编辑模式的时候, 依靠主键来确定每条记录的唯一性, 否则会产生意想不到的结果
　　　　　　　　　　　　　　model.Id(p => p.ID);
                        // 插入新数据时默认值, 批量数据会产生一次
                        model.Field(p => p.TreacherID).DefaultValue(2);
                    }
                )
                    // 添加的数据发送的控制器
                .Create("Create", "Grid", new { parameter = 1 })
                    // 编辑的数据发送的控制器
                .Update("Update2", "Grid", new { parameter = 1 })
                    // 删除的数据发送的控制器
                .Destroy("Delete", "Grid", new { parameter = 1 })
                    // 绑定数据的事件
                .Events(events => 
                {
                    // 每次 Grid 单元格发生变化就触发
                    // 包括在编辑过程中没有保存的改变
                    e.Change("change1");
                    // 更新数据之后接受了服务端的响应之后触发
                    e.Sync("sy");
                    // 错误事件
                    e.Error("error_handler");
                })
                    // 从控制器中读取数据
                .Read(read => read.Action("GetData", "Grid"))
        )
        .Events(e =>
        {
            // 选择表格的行或者单元格时触发
            e.Change("change2");
            // 点击取消保存按钮时 (inline 或 popup 编辑模式下) 触发
            // 或者关闭 Popup 窗口时触发
            e.Cancel("cancel1");
            // 点击了 Edit 按钮 打开一个编辑框时触发
            e.Edit("edit1");
            // 移除一条记录的时候触发
            e.Remove("Remove");
            // 点击了 Custom 中的 Save 按钮触发的事件
            // 在实际数据传送到 Controller 之前??
            e.SaveChanges("saveChange1");
            // 点击了 Edit 中的 Update 按钮触发的事件
            // 在实际数据传送到 Controller 之前
            e.Save("save1");
            // 每次发生数据绑定都会触发
            e.DataBound("bound1");
        }
)

 

 

 

HTML

基础功能

后台

///////////////////////////
///       获取数据      ///
///////////////////////////
public ActionResult GetData()
{
    return Json(db.Users);
}

前台

<div id="grid"></div>

　　脚本

<script>
    $(function ()
    {
        $("#grid").kendoGrid
        (
            {
                dataSource: // 数据源设置
                {
                    transport:
                    {
                        // 读取设置
                        read:
                        {
                            url: "/Grid/GetData",
                            dataType: "json",
                            type: "POST"
                        },
                    }
                },
                columns:    // 行设置
                [
                    {
                        field: "UserName",
                        title: "用户名",
                    },
                    {
                        field: "PassWord",
                        title: "密码"
                    }
                ]
            }
        );
    });
</script>

 

方法函数

// 重新读取数据, 该操作会引发一次 read
$("#grid").data("kendoGrid").dataSource.read();
// 刷新数据, 针对前端grid已经更新掉的数据(针对已经更新完毕的), 不会引发一次read
$("#grid").data("kendoGrid").refresh();

 

 

使用方法:

1. 利用数据自定义某单元格

.Columns
    (
        c=>
        {
            c.Bound(d => d.ID);
            c.Bound(d => d.Name);
            c.Template(d => d.Sex).ClientTemplate
                (
                    "# if(Sex){ #" +
                        "<span style='color:red'>" +
                            "男" +
                        "</span>" +
                    "# }" +
                    "else { #" +
                        "2" +
                    "# } #"
                );
        }
    )

 

2. 自定义行

    .ClientRowTemplate(
            "# if(Sex){ #" +
                "<tr data-uid='#: uid #' class='tr_boy'>" +
            "# }" +
            "else { #" +
                "<tr data-uid='#: uid #' class='tr_girl'>" +
            "# } #" +
                "<td>" +
                        "#: Name # " +
                    "</td>" +
                    "<td>" +
                        "#: Sex #" +
                    "</td>" +
                "</tr>"
    )

 

 

$(function () {
    var detailgrid = $("#grid");
    
    /*
    * 为行添加双击事件
    */
    detailgrid.on('dblclick', 'tr', function (e) {
        // 获取当前选择行数据  
        // 需要 grid 开启 select 支持的情况下
        var row = detailgrid.data("kendoGrid").select();
        var dataItem = detailgrid.data("kendoGrid").dataItem(row);

        // grid 的 editRow 方法
        // 将当前行对象当做参数传入
        detailgrid.data("kendoGrid").editRow($(this));
    });
});