代码之家 › 专栏 › 技术社区 › Chris

剑道网格模板未正确显示引导切换,仅在列中显示复选框

kendo-grid kendo-ui jquery

Chris · 技术社区 · 7 年前

我正在使用引导切换插件,并试图通过使用模板使其在剑道网格中正确显示,它显示的只是复选框,而不是开关的外观,我知道该插件工作正常,因为如果我使用一个普通的旧表,它会出现。

下面是使用一张普通的旧桌子时的外观

请参见“选项”列中的切换开关?这就是我试图进入剑道格网选项栏的内容,但正如你在下面看到的,使用剑道格网看起来是这样的

$(document).ready(function() {

  $('#grid').kendoGrid({
    height: 500,
    dataSource: colData,
    columns: [{
        field: "field",
        title: "Columns"
      },
      {
        field: "Options",
        title: "Options",
        template: hereItIs
      }
    ]
  });
});

function hereItIs() {
  var input = '<input type="checkbox" checked data-toggle="toggle" />';
  return input;
}
var colData = [{
    "field": "Apple"
  },
  {
    "field": "Orange"
  },
  {
    "field": "Pear"
  },
  {
    "field": "Plum"
  },
  {
    "field": "Grape"
  },
  {
    "field": "Banana"
  },
  {
    "field": "Watermelon"
  }
];

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.mobile.all.min.css" />

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>


<div id="grid"></div>

你知道为什么拨动开关不能在剑道格网中正确显示吗?

1 回复 | 直到 7 年前

Jörgen Moen 7 年前

我必须添加一个初始值设定项才能使其工作:

$(function() {
  $('.bootToggle').bootstrapToggle();
})

我必须添加一个类来知道它应该在哪里初始化。。

<input type="checkbox" checked data-toggle="toggle" class="bootToggle" />

我做了一支笔来查看 result (我的第一支钢笔,所以我希望它能用) (在pen中,我改为templateId而不是template,但这只是因为我通常只做mvc telerik ui,并且习惯于templateId)。。。

推荐文章

Haytham · 来自远程数据的剑道UI条形图系列名称

8 年前

user7678643 · “使用问题”复选框

8 年前

Kenny Lucero · Javascript-JQuery-Kendo-为什么要执行我的函数

8 年前

nineveh.Y · KendoUI add treelist工具栏模板导致“TypeError:(中间值)。toLowerCase不是函数”

8 年前

Zayn malik · 剑道网格自定义按钮的mouseover或mouseenter或onhover事件?

8 年前

CMartins · Kendo UI MVC网格主题更改

8 年前

anand · 仅为叶节点启用复选框

8 年前

firienn · ASP中的剑道网格。Net MVC:防止刷新网格上的数据。设置选项

8 年前

Xion · 剑道排序问题

8 年前

dscythe · 如何删除剑道中复选框中的这些蓝色条/边框

8 年前