今天来总结一下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窗口的方法;
图一,数据列表
图二,点"编辑"效果
至于样式这些都是可以再继续调整的,这里就没有进行过多处理