如何在剑道模板中动态设置列
Posted
技术标签:
【中文标题】如何在剑道模板中动态设置列【英文标题】:How to set columns dynamically in Kendo template 【发布时间】:2016-08-13 04:53:20 【问题描述】:如何在剑道模板中为剑道网格动态设置列。在我的剑道网格中,列会根据用户偏好动态更改。如何动态创建剑道模板?我正在使用剑道 javascript,我可以切换到剑道 MVC如果同样的事情我可以在那里实现。还有其他方法可以实现吗?
<script id="rowTemplate" type="text/x-kendo-template">
<tr class="k-master-row">
<td>
<div>#=column1#</div>
</td>
<td><span class="mydesign" title="column2#"</span></td>
<td>#column3#</td>
<td>#=column4#</td>
</tr>
</script>
编辑:在剑道网格中,我们动态设置列。现在的问题是我们如何设置内容表和标题表的动态宽度。如果它超过了最大宽度,我们如何启用水平滚动条。有什么方法可以实现吗?
【问题讨论】:
可能最初全部加载,然后隐藏用户指定的那些 你能告诉我更多你想要在你的列中进行哪些更改吗?你想更改列中的值或列的某些 html 属性还是什么? 我想要不同的列..列值可以改变..假设我有列 a、b、c 现在我应该能够添加新列“d”或删除现有列“c” 好的,您想在网格的每一行中添加列吗?你有多行? 是的要求是应根据用户偏好显示列 【参考方案1】:我没有将 kendo 用于 MVC,但我仍然可以解释如何使用常规 kendo 函数来执行此操作。
基本上,您可以通过将 html 字符串传递给 kendo.template
来创建新的剑道模板实例。然后您可以将新模板实例分配给网格的rowTemplate
(或altRowTemplate
),然后调用dataSource.read()
强制刷新网格。
您可以生成自己的 html 字符串或更新页面中的现有模板,然后使用 jquery 的html()
将其转换为字符串。
例如:
var htmlTemplate = '';
if (userPreferences.likeRed)
htmlTemplate ='<tr class="k-master-row"><td style="background-color:red">#column1#</td></tr>'
else
htmlTemplate ='<tr class="k-master-row"><td style="background-color:green">#column1#</td></tr>'
$("#grid").data("kendoGrid").rowTemplate = kendo.template(htmlTemplate);
$("#grid").data("kendoGrid").dataSource.read();
【讨论】:
如何根据用户选择在Javascript中生成动态html? 其实生成的模板不是动态的。它是静态的,但基于用户的偏好构建(并在每次用户更新其偏好时重新创建)。【参考方案2】:要使用有条件选择的操作格式化Kendo Grid
列值,您可以使用以下合适的示例之一。更多信息:How Do I Have Conditional Logic in a Column Client Template?
下面是一些使用示例。借助这种方法,您可以轻松生成不同的模板。
Javascript 用户界面:
field: "EmployeeName", type: "string", width: "55px", title: "Employee Name",
template: "#= GetEditTemplate(data) #"
MVC 用户界面:
...
columns.Bound(t => t.EmployeeName)
.Title("Status Name")
.Template(@<text></text>)
.ClientTemplate("#= GetEditTemplate(data)#")
.Width("55px");
...
示例 I: 在此示例中,Model
通过使用 "data" 属性传递给 Javascript
方法,而模型属性在 em>“如果”条件。
<script>
//Change the color of the cell value according to the given condition
function GetEditTemplate(data)
var html;
if (data.StatusID == 1)
html = kendo.format(
//"<a class=\"k-button\" href='" + '@Url.Action("Edit1", "Controller")' + "/0" + " '>Edit</a> ",
"<span class='text-success'>" +
data.EmployeeName
+ "</span>"
);
else
html = kendo.format(
//"<a class=\"k-button\" href='" + '@Url.Action("Edit2", "Controller")' + "/0" + " '>Edit</a> ",
"<span class='text-danger'>Cancel</span>"
);
return html;
</script>
示例二:
<script>
function Getvalue(value)
// console.log(value);
if (value && value != null && value.indexOf("A") == 0)
return "<b style='color:red'>" + value + "</b>";
else
return "";
$(document).ready(function ()
$("#grid").kendoGrid(
dataSource: localDataSource,
columns: [
field: "FirstName",
title: "First Name", template: '#=Getvalue(FirstName)#'
],
);
);
</script>
希望这会有所帮助...
【讨论】:
【参考方案3】:这将在 ASP.NET MVC/Razor 中工作,如果您提前准备了动态列定义的集合,然后将它们放入 cshtml 的视图模型中。然后循环遍历集合并插入与数据源、标题标题、所需宽度等匹配的字段名称...
$("#grid-quick").kendoGrid(
pageable:
pageSizes: [10, 20, 50, 100]
,
sortable: mode: "multiple" ,
columns: [
@
foreach (var col in Model.Columns)
@: field: "@col.Name.Replace(".","_")", width: "@col.Width" + "px" ,
],
filterable: false,
dataSource:
serverPaging: true,
serverSorting: true,
pageSize: 20,
type: 'aspnetmvc-ajax',
schema:
data: "Data",
total: "Total",
model:
fields:
@
foreach (var col in Model.Columns)
@: "@col.Name.Replace(".","_")" : type: "string" ,
,
transport:
read:
url: oVariables.baseURL + "Query/DynamicResults",
dataType: "json",
type: "post"
);
【讨论】:
以上是关于如何在剑道模板中动态设置列的主要内容,如果未能解决你的问题,请参考以下文章
如何使用剃刀语法在剑道网格列模板中调用 javascript 函数