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

最新推荐文章于 2021-08-04 14:12:47 发布

扬天靜雲

最新推荐文章于 2021-08-04 14:12:47 发布

阅读量3.1k

点赞数

分类专栏：工作技术学习文章标签： MVC Kendo Grid

本文链接：https://blog.csdn.net/u013028110/article/details/48521379

版权

技术同时被 3 个专栏收录

91 篇文章 0 订阅

订阅专栏

学习

43 篇文章 0 订阅

订阅专栏

工作

35 篇文章 0 订阅

订阅专栏

@(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);
      }

实用小技巧：

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

   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;
      }
   }