如何在剑道模板中动态设置列

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 函数

如何在剑道网格中手动设置列值

如何制作可编辑的假剑道网格特定列?

在剑道的日期管道中包含变量值(动态格式):AngularJS

如何在剑道组合框中更改/设置值

如何动态更改剑道网格的列集