Question

我尝试使用Kendo的TreeView创建一个简单的树。

HTML代码如下：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="kendo.common.min.css" />
<link rel="stylesheet" href="kendo.default.min.css" />
<link rel="stylesheet" href="kendo.default.mobile.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.core.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.data.min.js"></script>
 <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.treeview.min.js"></script>
</head>

<body>
<script>
//To check if the scripts are loading
var len = $('script').filter(function () {
                return ($(this).attr('src') == 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js');
            }).length;

            //if there are no scripts that match, the load it
            if (len === 0) {
                $.getScript('https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js');
                console.log("jquery not loading");
            }
            else
                console.log("jquery loading");

//

            var len = $('script').filter(function () {
                return ($(this).attr('src') == 'http://kendo.cdn.telerik.com/2017.1.118/js/kendo.data.min.js');
            }).length;

            //if there are no scripts that match, the load it
            if (len === 0) {
                $.getScript('http://kendo.cdn.telerik.com/2017.1.118/js/kendo.data.min.js');
                console.log("treeview kendo not loading");
            }
            else
                console.log("treeview kendo loading");


            len = $('script').filter(function () {
                return ($(this).attr('src') == 'http://kendo.cdn.telerik.com/2017.1.118/js/kendo.core.min.js');
            }).length;

            //if there are no scripts that match, the load it
            if (len === 0) {
                $.getScript('http://kendo.cdn.telerik.com/2017.1.118/js/kendo.core.min.js');
                console.log("core kendo not loading");
            }
            else
                console.log("core kendo loading");

            len = $('script').filter(function () {
                return ($(this).attr('src') == 'http://kendo.cdn.telerik.com/2017.1.118/js/kendo.treeview.min.js');
            }).length;

            //if there are no scripts that match, the load it
            if (len === 0) {
                $.getScript('http://kendo.cdn.telerik.com/2017.1.118/js/kendo.treeview.min.js');
                console.log("data kendo not loading");
            }
            else
                console.log("data kendo loading");



var inlineDefault = new kendo.data.HierarchicalDataSource({
    data: [
        { text: "Furniture", items: [
            { text: "Tables & Chairs" },
            { text: "Sofas" },
            { text: "Occasional Furniture" }
        ] },
            { text: "Decor", items: [
            { text: "Bed Linen" },
            { text: "Curtains & Blinds" },
            { text: "Carpets" }
        ] }
    ]
});
$("#treeview").kendoTreeView({
    dataSource: inlineDefault
});
</script>
<div id="example">

<div class="demo-section k-content">
<h4>Inline data</h4>
<div id="treeview"></div>
</div>

<style>
.box .k-textbox {
width: 100px;
}
</style>
</div>
</body>
</html>

此HTML页面由Node js提供，如下所示：

var nano = require('nano')('http://localhost:5984');
var express = require('express');
var app = express();
var fs = require ('fs');
var bp = require('body-parser');
var urlencodedParser = bp.urlencoded({extended: false});

app.set('port',process.env.PORT || 3001);

app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    next();
});

app.get('/a',function(req,res){
    res.status(200).sendFile(__dirname+"/a.html");
});

app.get('/kendo.common.min.css',function(req,res){
    res.setHeader('content-type','text/css');
    res.sendFile(__dirname+"/kendo.common.min.css");
});

app.get('/kendo.default.min.css',function(req,res){
    res.setHeader('content-type','text/css');
    res.sendFile(__dirname+"/kendo.default.min.css");
});

app.get('/kendo.default.mobile.min.css',function(req,res){
    res.sendFile(__dirname+"/images/kendoui.woff");
});


app.get('/images/kendoui.woff?v=1.1 ',function(req,res){
    res.setHeader('content-type','text/css');
    res.sendFile(__dirname+"/kendo.default.mobile.min.css");
});

app.get('/kendo.core.min.js',function(req,res){
    res.setHeader('content-type','text/javascript');
    res.sendFile(__dirname+'/kendo.core.min.js');
});

app.get('/kendo.treeview.min.js',function(req,res){
    res.setHeader('content-type','text/javascript');
    res.sendFile(__dirname+'/kendo.treeview.min.js');
});

app.get('/kendo.data.min.js',function(req,res){
    res.setHeader('content-type','text/javascript');
    res.sendFile(__dirname+'/kendo.data.min.js');
});

app.listen (app.get( 'port' ), function (){
console.log ('Express started on http://localhost:' +
app.get ('port') + '; press Ctrl-C to terminate.' );
});

因此，这个HTML代码示例就是我找到here的一个例子。这里唯一的区别是html和kendo js文件是从我的nodeJs服务器加载的。并检查javascripts是否正在加载，我做了一个我在StackOverflow上找到的测试。除了TreeView之外的所有东西都在加载。 Chrome的开发者工具不会抛出任何错误，Node也不会。有人请解释为什么这不是加载。

提前感谢你。

编辑：所以在使用@LuizFernandodaSilva的评论之前，当我跑步时，Chrome中的控制台看起来像这样。我假设脚本正在加载。继续他的评论，我切换到CDNs的javascript和CSS和控制台显示与上面完全相同但不加载树。

Answer 1

回到示例并复制了那里提供的代码（找不到这个和提供的示例之间的区别）。重新运行它，它的工作原理。

Java脚本未加载快速

1 个答案: