MVC Kendo总结之-----> Grid

@(Html.Kendo().Button()
   .Name("EDIT")
   .Content("Edit")
   .Events(events => {
      events.Click("editClick");
   })
)
@(Html.Kendo().Button()
   .Name("CANCEL")
   .Content("Cancel")
   .Events(events => {
      events.Click("cancelClick");
   })
)
@(Html.Kendo().Button()
   .Name("SAVE")
   .Content("Save")
   .Events(events => {
      events.Click("saveClick");
   })
)
<div id="divGrd" style="margin:2px 0px 0px 0px;width:100%;">
@(Html.Kendo().Grid<Kendo_Web_UI.Models.OnePieceModel>()
.Name("grdOnePiece")//类似于HTML的ID，唯一的
.Selectable(selectable =>//Grid选中设置
{
selectable.Enabled(true);//是否可以选中
selectable.Type(GridSelectionType.Row);//选中行还是单元格；Row为行模式；Incell为单元格模式
selectable.Mode(GridSelectionMode.Single);//选中一行还是可以选中多行；Single为单选；Multiple为多选
})
.Sortable()//是否允许排序
.DataSource(dataSource => dataSource//Grid的数据源
.Ajax()
.Read(read =>
{
read.Action("GetDataSource", "Home");//获取数据源的路径及函数名
//read.Data("Parent_Discipline.returnParameters");//函数所需参数
})
.Model(model =>//设置Grid中哪儿些字段可以编辑
{
model.Id(p => p.HeroID);//Id字段必须的
model.Field(p => p.HeroName).Editable(false);//不可编辑
model.Field(p => p.HeroLocation).Editable(false);//不可编辑
model.Field(p => p.HeroKills).Editable(true);//可编辑
})
)
//.HtmlAttributes(new { style = "height:400;" })//给Grid添加属性或者CSS样式
.Scrollable(sl=>sl.Height(520))//设置Grid的滚动条，520表示当高度超出520时显示滚动条
//.Scrollable()//滚动条也可以直接设置，无需参数
.Resizable(resizable => resizable.Columns(true))//设置Grid是否可以手动调整列宽
.Columns(columns =>//Grid列设置
{
columns.Bound(hzw => hzw.HeroName)//Bound设置该列要显示的是哪儿个字段的值
.Title("HerotName")//列头上显示的内容
.Sortable(false)//该列是否可排序
.Width("16%")//列宽
//.HeaderTemplate("<input id='hero' type='checkbox'  />")//列头显示的模板，在此显示为Checkbox
.HtmlAttributes(new { style = "overflow:hidden;white-space:nowrap;text-overflow:clip;" });//为该列添加属性或者CSS样式
//.HeaderHtmlAttributes(new { style = "overflow:hidden;white-space:nowrap;text-overflow:clip;" });//为列头添加属性或者CSS样式
columns.Bound(hzw => hzw.HeroLocation).Title("HeroLocation").Sortable(true)
.Width("16%")
.HtmlAttributes(new { style = "overflow:hidden;white-space:nowrap;text-overflow:clip;" });
columns.Bound(hzw => hzw.HeroKills).Title("HerotKills").Sortable(true)
.Width("16%")
.HtmlAttributes(new { style = "overflow:hidden;white-space:nowrap;text-overflow:clip;" });
})
.Events(events =>//Grid事件
{
//events.Change("grdSelectedChanged");
events.DataBound("grdDataBound");
events.Edit("grdEdit");
})
)
</div>
@(Html.Kendo().Button()
   .Name("FIRST")
   .Content("First")
   .Events(events => {
      events.Click("firstClick");
   })
)
@(Html.Kendo().Button()
   .Name("PREV")
   .Content("Prev")
   .Events(events => {
      events.Click("prevClick");
   })
)
@(Html.Kendo().Button()
   .Name("NEXT")
   .Content("Next")
   .Events(events => {
      events.Click("nextClick");
   })
)
@(Html.Kendo().Button()
   .Name("LAST")
   .Content("Last")
   .Events(events => {
      events.Click("lastClick");
   })
)

namespace Kendo_Web_UI.Models
{
public class OnePieceModel
{
public int HeroID { get; set; }
public string HeroName { get; set; }
public string HeroLocation { get; set; }
public string HeroKills { get; set; }
}
}

<script>
var hzt = new Array();

function nextClick() {
var grid = $("#grdOnePiece").data("kendoGrid");
grid.select(grid.select().next());
};

function prevClick() {
var grid = $("#grdOnePiece").data("kendoGrid");
grid.select(grid.select().prev());
};

function firstClick() {
var grid = $("#grdOnePiece").data("kendoGrid");
grid.select($($("#grdOnePiece").find("tr").get(1)));
};

function lastClick() {
var grid = $("#grdOnePiece").data("kendoGrid");
grid.select($($("#grdOnePiece").find("tr").get($("#grdOnePiece").find("tr").length - 1)));
};

function editClick() {
var grid = $("#grdOnePiece").data("kendoGrid");
var gridSelectedItem = grid.select();
grid.setOptions({
editable: {
enable:true,
mode:"incell"
}
});
grid.refresh();
//grid.select($($("#grdOnePiece").find("tr").get($("#grdOnePiece").find("tr").length - 1)));
//gridSelectedItem = null;
setTimeout(function () {
$("#grdOnePiece").data("kendoGrid").select($($("#grdOnePiece").find("tr").get($("#grdOnePiece").find("tr").length - 1)));
}, 10);
};

function cancelClick() {
var grid = $("#grdOnePiece").data("kendoGrid");
grid.cancelRow();
grid.setOptions({
editable: false
});
}

function saveClick() {
var grid = $("#grdOnePiece").data("kendoGrid");
var strJsons = "";
for (i = 0; i < grid.dataSource._data.length; i++) {
var dataID=$.inArray(grid.dataSource._data[i].HeroID,hzt);
if (dataID != -1) {
var jsonhz = {
"HeroID": grid.dataSource._data[i].HeroID,
"HeroName": grid.dataSource._data[i].HeroName,
"HeroLocation": grid.dataSource._data[i].HeroLocation,
"HeroKills": grid.dataSource._data[i].HeroKills,
}
strJsons += (JSON.stringify(jsonhz)) + "^";
}
}
$.ajax({
type:"POST",
url: "Home/OnePiece",
data: {
datas: strJsons
},
dataType: "json",
success: function (res) {
alert(res);
},
error: function () { }
});
}

function grdDataBound() {//作用是在Grid绑定数据后自动选中第一条数据
var grid = $("#grdOnePiece").data("kendoGrid");
grid.select($($("#grdOnePiece").find("tr").get(1)));//get(0)得到的是列头那一行，所以使用get(1)
//alert($("#grdOnePiece").find("tr").length);
}

function grdEdit(e) {//作用是用于记录哪儿些数据被编辑过
//alert("lyy");
var arrayId = $.inArray(e.model.HeroID, hzt);
if (arrayId == -1) {
hzt.push(e.model.HeroID);
}
}
</script>

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult OnePiece(string datas)
{
List<OnePieceModel> OnePieceList = new List<OnePieceModel>();
List<OnePieceModel> OnePieceListDatas = new List<OnePieceModel>();
string[] strs = datas.Split('LYY');
foreach (string item in strs)
{
OnePieceModel team = (OnePieceModel)JsonConvert.DeserializeObject(item, typeof(OnePieceModel));
OnePieceList.Add(team);
}
for (int i = 0; i < OnePieceList.Count - 1; i++)
{
OnePieceModel dataItem = new OnePieceModel();
dataItem = OnePieceList[i];
OnePieceListDatas.Add(dataItem);
}
return Json(true);
}

var currentSelectedIndex = 0;
var grid = $("#grdbase").data("kendoGrid");
var gridSelectedItem = null;
if (grid.dataSource._data != null && grid.dataSource._data.length > 0) {
gridSelectedItem = grid.select();
}
else {
gridSelectedItem = null;
}
var gridSelectedItemDatas = null;
if (gridSelectedItem != null) {
gridSelectedItemDatas = grid.dataItem(gridSelectedItem);
}
else {
gridSelectedItemDatas = null;
}
for (var i = 0; i < grid.dataSource._data.length; i++) {
if (gridSelectedItemDatas == grid.dataSource._data[i]) {
currentSelectedIndex = i + 1;//currentSelectedIndex即为Grid中当前选中数据的Index
break;
}
}