Fatal编程技术网
  • javascript/
  • Javascript 剑道网格有时只渲染标题或数据

Javascript 剑道网格有时只渲染标题或数据

javascript jquery kendo-ui

Javascript 剑道网格有时只渲染标题或数据,javascript,jquery,kendo-ui,kendo-grid,Javascript,Jquery,Kendo Ui,Kendo Grid,我有一个非常简单的剑道网格，它显示带有标题的数据列表，并且在字段上可以有条件地进行编辑。这是在剑道视图的“show”操作中调用的函数中使用JQuery呈现并附加到DOM的 问题是每次加载页面时，要么数据不呈现，要么网格列标题不呈现。它总是一个或另一个，它唯一正确呈现的时间是我重新调用附加它的函数，就像我偶尔在页面状态改变时所做的那样 以下是我将其附加到页面的位置： form.find("#approvals").kendoGrid({ columns: [ { title

我有一个非常简单的剑道网格，它显示带有标题的数据列表，并且在字段上可以有条件地进行编辑。这是在剑道视图的“show”操作中调用的函数中使用JQuery呈现并附加到DOM的

问题是每次加载页面时，要么数据不呈现，要么网格列标题不呈现。它总是一个或另一个，它唯一正确呈现的时间是我重新调用附加它的函数，就像我偶尔在页面状态改变时所做的那样

以下是我将其附加到页面的位置：

form.find("#approvals").kendoGrid({
    columns: [
        { title: "Service", field: "PartDescription" },
        { title: "Component", field: "Component", width: "250px" },
        { title: "Status Last Modified", width: "250px", template: "#= kendo.toString(StatusModifiedDate, 'g') #", },
        { title: "Status", field: "Status", width: "135px", editor: statusDropDownEditor }
    ],
    editable: modifyState,
    edit: function (e) {
        if (e.container.find("input").attr("name") !== "Status") {
            this.closeCell();
        }
    }
});
这来自于显示剑道视图时激发的函数

问题在于要么数据不呈现，要么网格列不呈现 标题不会在每次加载页面时呈现

在不知道js代码中的“表单”是什么的情况下，尝试使用它来确保它在“正确”的时间加载。请随意修改gridData变量以匹配您的代码，并替换字段的字段

   <!DOCTYPE html>
<html>
<head>
     <script src="https://kendo.cdn.telerik.com/2017.1.118/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

</head>
<body id="theBod">
  <div id="approvals"></div>

  <script type="text/javascript">
   $(function () { // the dom is ready for jquery parsing 
    var gridData = [{
        "Name": "daya",
        "Role": "Developer",
        "Dept": "Dev",
        "Date": "\/Date(836438400000)\/",
        "Balance": 23
    }, {
        "Name": "siva",
        "Role": "Developer",
        "Dept": "Dev",
        "Date": "\/Date(836438400000)\/",
        "Balance": 23
    }, {
        "Name": "sivadaya",
        "Role": "Developer",
        "Dept": "Dev",
        "Date": "\/Date(836438400000)\/",
        "Balance": 23
    }, {
        "Name": "dayasiva",
        "Role": "Developer",
        "Dept": "Dev",
        "Date": "\/Date(836438400000)\/",
        "Balance": 23
    }];

    var form = $("#theBod");
    var foundForm = $(form).find("#approvals");

    if (typeof (foundForm) != "undefined") {
        // process grid component
        var grid = $(foundForm).kendoGrid({
            dataSource: {
                data: gridData,
                schema: {
                    model: {
                        fields: {
                            Name: { type: "string" },
                            Role: { type: "string" }
                        }
                    }
                },
                pageSize: 10,
            },
            editable: true,
            sortable: true,
            columns: [
                {
                    field: "Name",
                    title: "Name",
                },
                {
                    field: "Role",
                    title: "TheRole"
                }
            ]
        });

    } else {
        alert('no dom element located');
    }
});
  </script>
</body>
</html>


剑道UI片段
$（函数（）{//dom已准备好进行jquery解析
变量gridData=[{
“姓名”：“大雅”，
“角色”：“开发人员”，
“Dept”：“Dev”，
“日期”：“\/日期（836438400000）\/”，
“余额”：23
}, {
“名称”：“湿婆”，
“角色”：“开发人员”，
“Dept”：“Dev”，
“日期”：“\/日期（836438400000）\/”，
“余额”：23
}, {
“名称”：“sivadaya”，
“角色”：“开发人员”，
“Dept”：“Dev”，
“日期”：“\/日期（836438400000）\/”，
“余额”：23
}, {
“名称”：“dayasiva”，
“角色”：“开发人员”，
“Dept”：“Dev”，
“日期”：“\/日期（836438400000）\/”，
“余额”：23
}];
风险值形式=$（“董事会”）；
var foundForm=$（form）.find（#批准”）；
if（typeof（foundForm）！=“未定义”）{
//进程网格组件
var grid=$（foundForm）.kendoGrid({
数据源：{
数据：网格数据，
模式：{
型号：{
字段：{
名称：{type:“string”}，
角色：{type:“string”}
}
}
},
页面大小：10，
},
是的，
可排序：是的，
栏目：[
{
字段：“名称”，
标题：“姓名”，
},
{
字段：“角色”，
标题：“TheRole”
}
]
});
}否则{
警报（“未找到dom元素”）；
}
});
我为您添加了一个文件

jsBin未正确保存，抱歉。

表单是视图本身，抱歉。立即调用它没有帮助（只是尝试了一下）。这不是一个没有加载的问题，数据大部分时间都会出现，只是当它出现时，它没有标题。当它不进来时，它有没有数据的标题，但这是罕见的。你有一个样本json数据集与帖子共享吗？因为你的更新：这与我已经拥有的是一致的-一个数据源输入剑道网格-除了检查它是否能在附加之前找到“批准”。即使添加了检查，也不会失败，我也会遇到标题没有显示在列上方的问题。除了我可能遗漏的内容之外，您是否更改了其他内容？@lgh标题应为字符串值