如何在角度js中使用自定义精灵图标用于kendo ui treeview?

时间:2016-08-13 07:14:44

标签: css angularjs kendo-treeview

我使用kendo ui treeview in angular js



<div id="treeview">
    <div class="demo-section k-content">
        <div class="box-col">
            <h4>TreeView</h4>
            <div kendo-tree-view="tree"
                k-data-source="treeData"
                k-options="options"
                <%-- k-checkboxes="{'checkChildren': true, 'template': checkboxTemplate }"--%>
                k-on-change="selectedItem = dataItem">
                <span k-template>{{dataItem.text}}
                    <button class='k-button' type="button" ng-click='clickOnTree(dataItem)'>Select</button>
                </span>
            </div>
        </div>
        <div class="box-col" ng-show="selectedItem">
            <h4>Selected: {{selectedItem.text}}</h4>
            <button type="button" class="k-button" ng-click="addAfter(selectedItem)">Add item below</button>
            <button type="button" class="k-button" ng-click="addBelow(selectedItem)">Add child item</button>
            <button type="button" class="k-button" ng-click="remove(selectedItem)">Delete</button>
        </div>
    </div>
&#13;
&#13;
&#13;

我想使用精灵图标。我不想使用背景位置。我想直接设置背景图像。例如下面的css代码:

&#13;
&#13;
<style>
 #treeview .k-sprite {
           
        }

        .cross {
            background-image: url("mypath/mypic.png");
        }

        
</style>
&#13;
&#13;
&#13;

&#13;
&#13;
    $scope.treeData = new kendo.data.HierarchicalDataSource({
        data: [
              {
                  text: "item1", spriteCssClass: "cross"
              },
             
              { text: "item2", spriteCssClass: "otherclass" }
        ]
       
    });
&#13;
&#13;
&#13;

我该怎么做?

0 个答案:

没有答案