MVC Kendo总结之-----> Grid（Edit、Cancel、Save、First、Prev、Next、Last）

最新推荐文章于 2021-06-20 06:28:56 发布

chelen_jak

最新推荐文章于 2021-06-20 06:28:56 发布

阅读量1.1k

点赞数

分类专栏： Kendo

Kendo 专栏收录该内容

71 篇文章

订阅专栏

原文出处：http://blog.youkuaiyun.com/u013028110/article/details/48521379

[csharp]view plain copy 
   
 @(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");  
    })  
 )  

[csharp]view plain copy 
   
 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; }  
    }  
 }  

[javascript]view plain copy 
   
 <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>  

[csharp]view plain copy 
   
 [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);  
 }  

实用小技巧：

1.判断当前Grid选中的是第几条数据：

[csharp]view plain copy 
   
 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;  
    }  
 }  