Kendo UI Grid结合Window完善Custom事件

今天来总结一下Grid控件的使用,在数据源绑定到Grid上后,我们肯定希望能对其进行编辑和删除,这里记录一下自己对于编辑的心得使用;

在asp.net mvc环境下做的

首先我们定义一个需要绑定数据实体;

    public class VehicleLocation
    {
        [DisplayName("车牌号")]
        public string CarNum { get; set; }
        [DisplayName("状态")]
        public int GPSOnLineStatus { get; set; }
        [DisplayName("经度")]
        [DataType("Number")]
        public double Longitude { get; set; }
        [DisplayName("纬度")]
        [DataType("Number")]
        public double Latitude { get; set; }
        [DisplayName("速度")]
        public decimal Speed { get; set; }
        [DisplayName("方向")]
        public decimal Angle { get; set; }
        [DisplayName("定位时间")]
        [DataType("DateTime")]
        public DateTime GPSTime { get; set; }
        [DisplayName("具体位置")]
        public string Address { get; set; }
        [DisplayName("方向")]
        public string AngleMsg
        {
            get
            {
                string angle = "0";
                if (this.Angle > 22 && this.Angle <= 68)
                {
                    angle = "东北";
                }
                else if (this.Angle > 68 && this.Angle <= 112)
                {
                    angle = "东";
                }
                else if (this.Angle > 112 && this.Angle <= 158)
                {
                    angle = "东南";
                }
                else if (this.Angle > 158 && this.Angle <= 202)
                {
                    angle = "南";
                }
                else if (this.Angle > 202 && this.Angle <= 248)
                {
                    angle = "西南";
                }
                else if (this.Angle > 248 && this.Angle <= 292)
                {
                    angle = "西";
                }
                else if (this.Angle > 292 && this.Angle <= 338)
                {
                    angle = "西北";
                }
                else
                {
                    angle = "北";
                }
                return angle;
            }
        }
    }

该对象作为显示在Grid上的实体;

下面介绍一下定义的Grid格式,看看最后一列,我们此处不使用它本身自带的command.Edit()方法来实现编辑按钮,因为那样的整个编辑界面就会固定化,按照实体对象属性个数逐个列出;

通过自定义方法,同样可以对编辑界面的模版进行设计;

@(Html.Kendo().Grid<VehicleLocation>()
    .Name("vehicleGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.CarNum).Width(100);
        columns.Bound(p => p.Longitude).Width(100);
        columns.Bound(p => p.Latitude).Width(100);
        columns.Bound(p => p.Speed).Width(100);
        columns.Bound(p => p.AngleMsg).Width(100);
        columns.Bound(p => p.GPSTime).Width(100);
        columns.Bound(p => p.GPSOnLineStatus).Width(100);
        columns.Command(command =>
        {
            command.Custom("edit").Text("编辑")
                .HtmlAttributes(new { @class = "k-icon k-edit" })
                .Click("editVehicleLocation");
        }).Width(172);
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(30)
        .Model(model => model.Id(p => p.CarNum))
        .Read(read => read.Action("BindingVechilesLocation", "Home"))
    )
)

然后,定义个弹出框'

@(Html.Kendo().Window().Name("Details")
    .Title("信息修改")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(300)
)

同时定义每个编辑按钮的click脚本事件;

<script>
    var windowObject;

    $(document).ready(function () {
        windowObject = $("#Details").data("kendoWindow");
    });

    function editVehicleLocation(e) {
        e.preventDefault();

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

        windowObject.refresh({
            url: "/Home/Test_Edit?carnum=" + dataItem.CarNum
        });
        windowObject.center().open();
    }
</script>

解释一下,点击"编辑"后会自动跳转到一个编辑页面/Home/Test_Edit,参数通过Request.Params["carnum"]获取;

在Controller中定义Test_Edit的控制器

        public ActionResult Test_Edit()
        {
            string carnum = Request.Params["carnum"];
            //从记录中获取符合条件的对象
            VehicleLocation vlocation = new VehicleLocation();
            return View(vlocation);
        }
        [HttpPost]
        public ActionResult Test_Edit(VehicleLocation vlocation)
        {
            //此处做编辑操作
            return View();
        }

上述主要介绍了Grid的自定义弹出window窗口的方法;

图一,数据列表

图二,点"编辑"效果

至于样式这些都是可以再继续调整的,这里就没有进行过多处理