以前做项目都是用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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
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));
} |