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窗口的方法;

圖一,數據列表

圖二,點"編輯"效果

至於樣式這些都是可以再繼續調整的,這裏就沒有進行過多處理