您的位置: 首页  >  文章  >  MVC Kendo总结之-----> Grid（Edit、Cancel、Save、First、Prev、Next、Last）

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

分类: 文章 • 2024-10-14 16:55:10

原文出处：http://blog.****.net/u013028110/article/details/48521379

[csharp] view plain copy
  1. @(Html.Kendo().Button()  
  2.    .Name("EDIT")  
  3.    .Content("Edit")  
  4.    .Events(events => {  
  5.       events.Click("editClick");  
  6.    })  
  7. )  
  8. @(Html.Kendo().Button()  
  9.    .Name("CANCEL")  
  10.    .Content("Cancel")  
  11.    .Events(events => {  
  12.       events.Click("cancelClick");  
  13.    })  
  14. )  
  15. @(Html.Kendo().Button()  
  16.    .Name("SAVE")  
  17.    .Content("Save")  
  18.    .Events(events => {  
  19.       events.Click("saveClick");  
  20.    })  
  21. )  
  22. <div id="divGrd" style="margin:2px 0px 0px 0px;width:100%;">  
  23.    @(Html.Kendo().Grid<Kendo_Web_UI.Models.OnePieceModel>()  
  24.       .Name("grdOnePiece")//类似于HTML的ID，唯一的  
  25.       .Selectable(selectable =>//Grid选中设置  
  26.       {  
  27.          selectable.Enabled(true);//是否可以选中  
  28.          selectable.Type(GridSelectionType.Row);//选中行还是单元格；Row为行模式；Incell为单元格模式  
  29.          selectable.Mode(GridSelectionMode.Single);//选中一行还是可以选中多行；Single为单选；Multiple为多选  
  30.       })  
  31.       .Sortable()//是否允许排序  
  32.       .DataSource(dataSource => dataSource//Grid的数据源  
  33.          .Ajax()  
  34.          .Read(read =>  
  35.          {  
  36.             read.Action("GetDataSource", "Home");//获取数据源的路径及函数名  
  37.             //read.Data("Parent_Discipline.returnParameters");//函数所需参数  
  38.          })  
  39.          .Model(model =>//设置Grid中哪儿些字段可以编辑  
  40.             {  
  41.                model.Id(p => p.HeroID);//Id字段必须的  
  42.                model.Field(p => p.HeroName).Editable(false);//不可编辑  
  43.                model.Field(p => p.HeroLocation).Editable(false);//不可编辑  
  44.                model.Field(p => p.HeroKills).Editable(true);//可编辑  
  45.             })  
  46.       )  
  47.       //.HtmlAttributes(new { style = "height:400;" })//给Grid添加属性或者CSS样式  
  48.       .Scrollable(sl=>sl.Height(520))//设置Grid的滚动条，520表示当高度超出520时显示滚动条  
  49.       //.Scrollable()//滚动条也可以直接设置，无需参数  
  50.       .Resizable(resizable => resizable.Columns(true))//设置Grid是否可以手动调整列宽  
  51.       .Columns(columns =>//Grid列设置  
  52.       {  
  53.          columns.Bound(hzw => hzw.HeroName)//Bound设置该列要显示的是哪儿个字段的值  
  54.             .Title("HerotName")//列头上显示的内容  
  55.             .Sortable(false)//该列是否可排序  
  56.             .Width("16%")//列宽  
  57.             //.HeaderTemplate("<input id='hero' type='checkbox'  />")//列头显示的模板，在此显示为Checkbox  
  58.             .HtmlAttributes(new { style = "overflow:hidden;white-space:nowrap;text-overflow:clip;" });//为该列添加属性或者CSS样式  
  59.             //.HeaderHtmlAttributes(new { style = "overflow:hidden;white-space:nowrap;text-overflow:clip;" });//为列头添加属性或者CSS样式  
  60.          columns.Bound(hzw => hzw.HeroLocation).Title("HeroLocation").Sortable(true)  
  61.             .Width("16%")  
  62.             .HtmlAttributes(new { style = "overflow:hidden;white-space:nowrap;text-overflow:clip;" });  
  63.          columns.Bound(hzw => hzw.HeroKills).Title("HerotKills").Sortable(true)  
  64.             .Width("16%")  
  65.             .HtmlAttributes(new { style = "overflow:hidden;white-space:nowrap;text-overflow:clip;" });  
  66.       })  
  67.       .Events(events =>//Grid事件  
  68.       {  
  69.          //events.Change("grdSelectedChanged");  
  70.          events.DataBound("grdDataBound");  
  71.          events.Edit("grdEdit");  
  72.       })  
  73.    )  
  74. </div>  
  75. @(Html.Kendo().Button()  
  76.    .Name("FIRST")  
  77.    .Content("First")  
  78.    .Events(events => {  
  79.       events.Click("firstClick");  
  80.    })  
  81. )  
  82. @(Html.Kendo().Button()  
  83.    .Name("PREV")  
  84.    .Content("Prev")  
  85.    .Events(events => {  
  86.       events.Click("prevClick");  
  87.    })  
  88. )  
  89. @(Html.Kendo().Button()  
  90.    .Name("NEXT")  
  91.    .Content("Next")  
  92.    .Events(events => {  
  93.       events.Click("nextClick");  
  94.    })  
  95. )  
  96. @(Html.Kendo().Button()  
  97.    .Name("LAST")  
  98.    .Content("Last")  
  99.    .Events(events => {  
  100.       events.Click("lastClick");  
  101.    })  
  102. )  
[csharp] view plain copy
  1. namespace Kendo_Web_UI.Models  
  2. {  
  3.    public class OnePieceModel  
  4.    {  
  5.       public int HeroID { get; set; }  
  6.       public string HeroName { get; set; }  
  7.       public string HeroLocation { get; set; }  
  8.       public string HeroKills { get; set; }  
  9.    }  
  10. }  
[javascript] view plain copy
  1. <script>  
  2.        var hzt = new Array();  
  3.   
  4.        function nextClick() {  
  5.           var grid = $("#grdOnePiece").data("kendoGrid");  
  6.           grid.select(grid.select().next());  
  7.        };  
  8.   
  9.        function prevClick() {  
  10.           var grid = $("#grdOnePiece").data("kendoGrid");  
  11.           grid.select(grid.select().prev());  
  12.        };  
  13.   
  14.        function firstClick() {  
  15.           var grid = $("#grdOnePiece").data("kendoGrid");  
  16.           grid.select($($("#grdOnePiece").find("tr").get(1)));  
  17.        };  
  18.   
  19.        function lastClick() {  
  20.           var grid = $("#grdOnePiece").data("kendoGrid");   
  21.           grid.select($($("#grdOnePiece").find("tr").get($("#grdOnePiece").find("tr").length - 1)));  
  22.        };  
  23.   
  24.        function editClick() {  
  25.           var grid = $("#grdOnePiece").data("kendoGrid");  
  26.           var gridSelectedItem = grid.select();  
  27.           grid.setOptions({  
  28.              editable: {  
  29.                 enable:true,  
  30.                 mode:"incell"  
  31.              }  
  32.           });  
  33.           grid.refresh();  
  34.           //grid.select($($("#grdOnePiece").find("tr").get($("#grdOnePiece").find("tr").length - 1)));  
  35.           //gridSelectedItem = null;  
  36.           setTimeout(function () {  
  37.              $("#grdOnePiece").data("kendoGrid").select($($("#grdOnePiece").find("tr").get($("#grdOnePiece").find("tr").length - 1)));  
  38.           }, 10);  
  39.        };  
  40.   
  41.        function cancelClick() {  
  42.           var grid = $("#grdOnePiece").data("kendoGrid");  
  43.           grid.cancelRow();  
  44.           grid.setOptions({  
  45.              editable: false  
  46.           });  
  47.        }  
  48.   
  49.        function saveClick() {  
  50.           var grid = $("#grdOnePiece").data("kendoGrid");  
  51.           var strJsons = "";  
  52.           for (i = 0; i < grid.dataSource._data.length; i++) {  
  53.              var dataID=$.inArray(grid.dataSource._data[i].HeroID,hzt);  
  54.              if (dataID != -1) {  
  55.                 var jsonhz = {  
  56.                    "HeroID": grid.dataSource._data[i].HeroID,  
  57.                    "HeroName": grid.dataSource._data[i].HeroName,  
  58.                    "HeroLocation": grid.dataSource._data[i].HeroLocation,  
  59.                    "HeroKills": grid.dataSource._data[i].HeroKills,  
  60.                 }  
  61.                 strJsons += (JSON.stringify(jsonhz)) + "^";  
  62.              }  
  63.           }  
  64.           $.ajax({  
  65.              type:"POST",  
  66.              url: "Home/OnePiece",  
  67.              data: {  
  68.                 datas: strJsons  
  69.              },  
  70.              dataType: "json",  
  71.              success: function (res) {  
  72.                 alert(res);  
  73.              },  
  74.              error: function () { }  
  75.           });  
  76.        }  
  77.   
  78.        function grdDataBound() {//作用是在Grid绑定数据后自动选中第一条数据  
  79.           var grid = $("#grdOnePiece").data("kendoGrid");  
  80.           grid.select($($("#grdOnePiece").find("tr").get(1)));//get(0)得到的是列头那一行，所以使用get(1)  
  81.           //alert($("#grdOnePiece").find("tr").length);  
  82.        }  
  83.   
  84.        function grdEdit(e) {//作用是用于记录哪儿些数据被编辑过  
  85.           //alert("lyy");  
  86.           var arrayId = $.inArray(e.model.HeroID, hzt);  
  87.           if (arrayId == -1) {  
  88.              hzt.push(e.model.HeroID);  
  89.          }  
  90.        }  
  91. </script>  
[csharp] view plain copy
  1. [AcceptVerbs(HttpVerbs.Post)]  
  2. public ActionResult OnePiece(string datas)  
  3. {  
  4.    List<OnePieceModel> OnePieceList = new List<OnePieceModel>();  
  5.    List<OnePieceModel> OnePieceListDatas = new List<OnePieceModel>();  
  6.    string[] strs = datas.Split('LYY');  
  7.    foreach (string item in strs)  
  8.    {  
  9.       OnePieceModel team = (OnePieceModel)JsonConvert.DeserializeObject(item, typeof(OnePieceModel));  
  10.       OnePieceList.Add(team);  
  11.    }  
  12.    for (int i = 0; i < OnePieceList.Count - 1; i++)  
  13.    {  
  14.       OnePieceModel dataItem = new OnePieceModel();  
  15.       dataItem = OnePieceList[i];  
  16.       OnePieceListDatas.Add(dataItem);  
  17.    }  
  18.    return Json(true);  
  19. }  

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

实用小技巧：

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

[csharp] view plain copy
  1. var currentSelectedIndex = 0;  
  2. var grid = $("#grdbase").data("kendoGrid");  
  3. var gridSelectedItem = null;  
  4. if (grid.dataSource._data != null && grid.dataSource._data.length > 0) {  
  5.     gridSelectedItem = grid.select();  
  6.   }  
  7. else {  
  8.   gridSelectedItem = null;  
  9.  }  
  10. var gridSelectedItemDatas = null;  
  11. if (gridSelectedItem != null) {  
  12.       gridSelectedItemDatas = grid.dataItem(gridSelectedItem);  
  13.   }  
  14. else {  
  15.       gridSelectedItemDatas = null;  
  16.   }  
  17. for (var i = 0; i < grid.dataSource._data.length; i++) {  
  18.    if (gridSelectedItemDatas == grid.dataSource._data[i]) {  
  19.         currentSelectedIndex = i + 1;//currentSelectedIndex即为Grid中当前选中数据的Index  
  20.         break;  
  21.    }  
  22. }  

相关推荐