zoukankan      html  css  js  c++  java
  • asp.net mvc kendo Grid Filter

      以前做项目都是用asp.net WebForm,最近做一个简单的小网站,后台数据检索功能,公司买的kendo控件,以前也没用用过,搞了半天才搞好,写给一些刚用的人做个参考......

    先上一个效果图:

    需求:一个简单的搜索页面,可以使用kendo中Grid对列表进行显示,但是,如果把检索框加在外面怎么做呢,在kendo Grid中有一个Filter属性,可以对没一列进行检索,但是,必须得点击检索列时选择检索。如果把搜索框放在外面怎么实现呢,上代码......

    .cshtml

                    @(Html.Kendo().Grid<ShareProfileListModels>()
                          .Name("AllProfileGrid")
                          .Columns(columns =>
                          {
                              columns.Bound(p => p.Status)
                                  .Title("")
                                  .ClientTemplate("<input type='checkbox' #= Error ? checked='checked': '' # class='chkbx' />")
                                  .HtmlAttributes(new { style = "text-align: center" })
                                  .Width(50);
                              columns.Bound(e => e.ProfileId).Title("ProfileID").Width(120);
                              columns.Bound(e => e.ProfileName).Title("名称");
                              columns.Bound(e => e.SolutionName).Title("解决方案");
                          })
                          .Editable(editable => editable.Mode(GridEditMode.InCell))
                          .Pageable()
                          .Navigatable()
                          .Sortable()
                          .Scrollable()
                          .Pageable(pageable => pageable
                              .Refresh(false)
                              .PageSizes(true)
                              .ButtonCount(5)
                              .Messages(m =>
                                  m.ItemsPerPage("个页面一页")
                                      .Empty("没有页面数据")
                                      .First("首页").Last("末页").Next("下一页").Previous("前一页").Refresh("刷新")
                                      .Display("当前页显示总共 {2} 个页面中的第 {0}个到第{1} 个")))
                          .Groupable(g => g.Messages(e => e.Empty("Profile检索列表")))
                          .DataSource(dataSource => dataSource
                              .Ajax()
                              .Batch(true)
                              .PageSize(20)
                              .ServerOperation(false)
                              .Model(model => model.Id(p => p.ProfileId))
                              .Model(model =>
                                {
                                    model.Id(p => p.ProfileId);
                                    model.Field(p => p.ProfileId).Editable(false);
                                    model.Field(p => p.ProfileName).Editable(false);
                                    model.Field(p => p.SolutionName).Editable(false);
                                    model.Field(p => p.Status).Editable(true);
                                })
                              .Read(read => read.Action("AllProfileGrid_Read", "Admin"))
                              .Update("AllProfileGrid_Update", "Admin")
                          )
                          )

    <script>
    $(function () {
    $('#AllProfileGrid').on('click', '.chkbx', function () {
    var checked = $(this).is(':checked');
    var grid = $('#AllProfileGrid').data().kendoGrid;
    var dataItem = grid.dataItem($(this).closest('tr'));
    dataItem.set('Error', checked);
    });
    });

    $("#btnSearch").click(function () {
    $filter = new Array();

    $profileName = $("#ProfileName").val();
    $solutionName = $("#SolutionName").val();

    if ($firstName) {
    $filter.push({ field: "ProfileName", operator: "contains", value: $profileName });
    }

    if ($lastName) {
    $filter.push({ field: "SolutionName", operator: "contains", value: $solutionName });
    }

    var grid = $("#AllProfileGrid").data("kendoGrid");
    grid.dataSource.filter($filter);

    });

    </script>

     

    Controller.cs

            public ActionResult Management()
            {
                return View();
            }
    
            [AcceptVerbs(HttpVerbs.Post)]
            public ActionResult AllProfileGrid_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<ShareProfileListModels> shareProfiles)
            {
                if (shareProfiles != null && ModelState.IsValid)
                {
                    foreach (var product in shareProfiles)
                    {
                        //Update
                    }
                }
    
                return Json(shareProfiles.ToDataSourceResult(request, ModelState));
            }
    

      

  • 相关阅读:
    .NET[C#]使用LINQ从List<T>集合中获取最后N条数据记录的方法有哪些?
    这个匿名对象没有实现IComparable接口
    c/c++中define用法详解及代码示例
    几个常用Json组件的性能测试
    通过jQuery Ajax使用FormData对象上传文件
    《631962 揭秘Java虚拟机-JVM设计原理与实现.pdf【第8章】》 ——类方法解析
    《631962 揭秘Java虚拟机-JVM设计原理与实现.pdf【第7章】》 ——Java栈桢
    《OOP-Klass》
    《631962 揭秘Java虚拟机-JVM设计原理与实现.pdf【第6章】》——类变量解析
    《631962 揭秘Java虚拟机-JVM设计原理与实现.pdf【第5章】》——常量池解析
  • 原文地址:https://www.cnblogs.com/sundebin68/p/3588572.html
Copyright © 2011-2022 走看看