0

有没有人有如何将 JQuery Sparklines 插件集成到 Kendo Grid 模板中的示例？

JQuery 迷你图

我认为这很简单，但每次我做类似的事情时：模板：<span class="inlinebar">75,25,0,100</span> 只有值 75,25,0,100 显示在网格中，而不是实际的迷你图。

如果有人可以发布示例或解决方案，我将不胜感激。谢谢！

代码示例：

<script>
$('.inlinebar').sparkline('html', {type: 'bullet'});    
$(document).ready(function() {                                              
        $("#grid").hide();

        var grid = $("#grid").kendoGrid({
                dataSource: {
                    transport: {
                        read: {
                            url: "/Services/testService",
                            dataType: "json",
                            type: "GET",
                            data: {                                
                            }
                        }
                    },
                    schema: {
                        model: {
                            fields: {
                                field1: {type: "number"},
                                field2: {type: "number"},
                                field3: {type: "number"}
                            }
                        }                
                    },
                    pageSize: 15
                },
                selectable:"cell",
                toolbar: kendo.template($("#template").html()), 
                height: 350,                
        filterable: true,        
        scrollable: true,
        sortable: true,                
        pageable: true,
                columns: [
                    {field: "field1", title: "Field 1"},
                    {field: "field2", title: "Field 2", template:'<span class="inlinebar">75,25,0,100</span>'},
                    {field: "field3", title: "Field 3"}
                    ]                          
                    });

4

1 回答 1

1

您的代码有几个问题。

  1. $('inlinebar').sparkline('html', {type: 'bullet'});您没有为类使用正确的 jQuery 选择器（.前面缺少inlinebar）
  2. 由于您是通过 ajax 加载数据，因此迷你图在您的 Kendo UI 网格有机会初始化之前执行，因此它现在的状态将永远无法工作。您需要在 Kendo 的dataBound事件中执行迷你图代码（请参阅此处http: //docs.kendoui.c​​om/api/web/grid#events ）。这样，当迷你图执行时，数据和您的跨度就在那里。
于 2012-08-27T18:41:03.777 回答