偶然发现这篇文章,链接文本,并通读,这篇文章有一个我想在我的网站上提供的东西的屏幕截图。这就是我要的,
jqGrid 是最好的方法吗?我想要的只是搜索参数界面。我想在选项卡式窗口中显示的搜索结果,接下来我将处理它。
偶然发现这篇文章,链接文本,并通读,这篇文章有一个我想在我的网站上提供的东西的屏幕截图。这就是我要的,
jqGrid 是最好的方法吗?我想要的只是搜索参数界面。我想在选项卡式窗口中显示的搜索结果,接下来我将处理它。
JqGrid 将自动构建图像中显示的搜索控件。因此,如果图像中的内容是您想要的,那么是的,JqGrid 就是要走的路,因为这就是我用来制作您在问题中包含的屏幕截图的内容。
自然,此控件基于 JqGrid,因此您需要使用它。搜索控件不是“独立的”(至少,不是设计使然)。不过,网格是非常可配置的,因此您可以得到您想要的外观。
如果您不能使用网格,那么您可能无法使用过滤器/搜索控件。但它只是 HTML,所以很容易复制。
我假设您想搜索自己的表单和控件,然后在 jqGrid 中显示结果。大多数在线找到的解决方案都使用 jqGrid 自己的搜索控件,这可能不是您的问题的首选选项。
我将展示一个关于如何完成此操作的简单示例:
1) 根据需要构建您的搜索表单:
@using (Html.BeginForm("Index", "Campaign", FormMethod.Post, new { id = "searchCampaigns" }))
{
<table class="DetailsTable" cellpadding="2" cellspacing="1">
<tr>
<td>Title</td>
<td>@Html.TextBoxFor(A => A.Titulo, new { Id = "search_title", })</td>
<td>Created by</td>
<td>@Html.DropDownListFor(A => A.CreatedByUserId, Model.UserList, new { Id = "search_createdBy" })
</td>
</tr>
<tr>
<td> </td>
<td colspan="3"><button type="button" onclick="javascript:search();">
Search !</button>
</td>
</tr>
</table>
2)
实现您的搜索功能以读取这些搜索字段:
<script type="text/javascript">
function search()
{
var searchValue_title = document.getElementById("search_title");
var searchValue_createdBy = document.getElementById("search_createdBy");
var extraQueryParameters = "";
extraQueryParameters = "?title=" + searchValue_title.value;
extraQueryParameters = extraQueryParameters + "&createdBy=" + searchValue_createdBy.value;
jQuery("#SearchResults").jqGrid().setGridParam({url : '@Url.Action("GridData")' + extraQueryParameters}).trigger("reloadGrid")
}
</script>
请注意,您实际上不需要使用 @HTML.TextBoxFor(...) 来创建输入元素。除非您想使用 MVC 3 的 dataAnnotation,否则您可以使用简单的元素。
搜索功能只是连接所有搜索参数并将它们附加到 GridData 操作。url 应该变成类似http://mySite/Controller/GridData?title=hello&createdBy=3的东西。然后将其馈送到电网。
3)按照这些思路实现 MVC 控制器功能:
public JsonResult GridData(string sidx, string sord, int? page, int? rows, int? createdBy, string title)
{
using (MyDataContext ddc = new MyDataContext())
{
var baseQuery = ddc.MyCampaign.AsQueryable();
string gridCaption = "Search Results";
if (!string.IsNullOrEmpty(titulo))
baseQuery = baseQuery.Where(A => A.Title.Contains(title));
if(createdBy.HasValue())
baseQuery = baseQuery.Where(A=>A.idCreationUser = createdBy.Value);
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows.HasValue ? rows.Value : 10;
int totalRecords = baseQuery.Count();
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
var ds = (from A in baseQuery
select new
{
ID = A.ID,
Title = A.Title,
}).OrderBy(sidx + " " + sord).Skip(pageIndex * pageSize).Take(pageSize).ToList();
var jsonData = new
{
total = totalPages,
page = page,
records = totalRecords,
rows = from A in ds
select new
{
id = A.ID,
cell = new[] { A.ID.ToString(), A.Title }
},
caption = gridCaption
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
}
4) 请注意以下问题:
C# 函数的参数名称必须与单击“搜索”按钮时在查询字符串构建中传递的参数匹配。.OrderBy(sidx + " " + sord) 方法要求您使用动态 Linq DLL,可在以下网址获得: http ://weblogs.asp.net/scottgu/archive/2008/01/07/dynamic-linq-part- 1-using-the-linq-dynamic-query-library.aspx 这有错误,但在大多数情况下,它可以工作:)