Kendo Grid 在 Read() 中传递附加参数
Kendo Grid pass additional parametert in Read()
我已经对我的 kendo 网格应用了外部过滤,它可以很好地处理单个文本框和一个按钮。但现在我需要在网格上方添加另一个文本框和一个按钮,并根据单击的按钮调用相应的 method.For,我需要将其他参数传递给网格。
我已经如下添加了 2 个文本框和 2 个按钮,目前 Read() 调用 additionalData() 发送其中一个文本框的值。如何传递其他文本框的值?
<div style="margin-bottom: 5px;">
@Html.TextBox("compSearch", (string)TempData["searchString"], new { id = "txtCompanySearch", style = "width: 400px;" })
<button id="searchButton" class="button" type="button" style="text-align:center;" onclick="searchAccounts()">
<span>Search</span>
<img src="~/Content/images/magnifier.png" />
</button>
<input type="hidden" id="hdnSrchString" value="@ViewBag.searchString" />
@Html.TextBox("compSearchByMasterRateSheetId", (string)TempData["searchStringMRS"], new { id = "txtCompanySearchByMasterRateSheetId", style = "width: 400px;" })
<button id="searchByMasterRateSheetIdButton" class="button" type="button" style="text-align:center;" onclick="searchAccountsMRS()">
<span>Search By Master Rate Sheet ID</span>
<img src="~/Content/images/magnifier.png" />
</button>
<input type="hidden" id="hdnSrchStringMRS" value="@ViewBag.searchStringMRS" />
</div>
<div class="k-content">
@(Html.Kendo().Grid<Customer>()
.Name("accountsGrid")
.Columns(col =>
{
col.Bound(c => c.CustomerName).Title("Account").Width("30%");
col.Bound(c => c.SourceSystemId).Title("B ID").Width("20%");
col.Bound(c => c.AccountManager).Title("Account Manager").Width("30%");
col.Bound(c => c.IsExternalQuotingEnabled).Title("External Quoting Enabled?").Width("20%");
})
.SetLevel3Defaults(Model)
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetCompanyInfo", "Home").Data("additionalData"))
.PageSize(20)
)
)
additionalData方法如下:
function additionalData() {
return {
searchString: $("#txtCompanySearch").val()
}
}
首先,不需要 ViewBag - 只需像这样参数化您的服务器操作:
[HttpPost]
public ActionResult GetCompanyInfo(string searchString, string searchStringMRS)
{
if (!string.IsNullOrWhiteSpace(searchString))
{ search by searchString }
else
{ search by searchStringMRS }
...
}
然后更改您的附加数据:
function additionalData() {
return {
searchString: $("#txtCompanySearch").val(),
searchStringMRS: $("#txtCompanySearchByMasterRateSheetId").val()
}
}
这些将按名称匹配并传递到您的 READ 操作中。只需保留1个按钮即可触发过滤。
此外,您还可以将过滤器移至网格的工具栏。参见 here。
我已经对我的 kendo 网格应用了外部过滤,它可以很好地处理单个文本框和一个按钮。但现在我需要在网格上方添加另一个文本框和一个按钮,并根据单击的按钮调用相应的 method.For,我需要将其他参数传递给网格。
我已经如下添加了 2 个文本框和 2 个按钮,目前 Read() 调用 additionalData() 发送其中一个文本框的值。如何传递其他文本框的值?
<div style="margin-bottom: 5px;">
@Html.TextBox("compSearch", (string)TempData["searchString"], new { id = "txtCompanySearch", style = "width: 400px;" })
<button id="searchButton" class="button" type="button" style="text-align:center;" onclick="searchAccounts()">
<span>Search</span>
<img src="~/Content/images/magnifier.png" />
</button>
<input type="hidden" id="hdnSrchString" value="@ViewBag.searchString" />
@Html.TextBox("compSearchByMasterRateSheetId", (string)TempData["searchStringMRS"], new { id = "txtCompanySearchByMasterRateSheetId", style = "width: 400px;" })
<button id="searchByMasterRateSheetIdButton" class="button" type="button" style="text-align:center;" onclick="searchAccountsMRS()">
<span>Search By Master Rate Sheet ID</span>
<img src="~/Content/images/magnifier.png" />
</button>
<input type="hidden" id="hdnSrchStringMRS" value="@ViewBag.searchStringMRS" />
</div>
<div class="k-content">
@(Html.Kendo().Grid<Customer>()
.Name("accountsGrid")
.Columns(col =>
{
col.Bound(c => c.CustomerName).Title("Account").Width("30%");
col.Bound(c => c.SourceSystemId).Title("B ID").Width("20%");
col.Bound(c => c.AccountManager).Title("Account Manager").Width("30%");
col.Bound(c => c.IsExternalQuotingEnabled).Title("External Quoting Enabled?").Width("20%");
})
.SetLevel3Defaults(Model)
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetCompanyInfo", "Home").Data("additionalData"))
.PageSize(20)
)
)
additionalData方法如下:
function additionalData() {
return {
searchString: $("#txtCompanySearch").val()
}
}
首先,不需要 ViewBag - 只需像这样参数化您的服务器操作:
[HttpPost]
public ActionResult GetCompanyInfo(string searchString, string searchStringMRS)
{
if (!string.IsNullOrWhiteSpace(searchString))
{ search by searchString }
else
{ search by searchStringMRS }
...
}
然后更改您的附加数据:
function additionalData() {
return {
searchString: $("#txtCompanySearch").val(),
searchStringMRS: $("#txtCompanySearchByMasterRateSheetId").val()
}
}
这些将按名称匹配并传递到您的 READ 操作中。只需保留1个按钮即可触发过滤。
此外,您还可以将过滤器移至网格的工具栏。参见 here。