JQgrid - treegrid错误
我看过相关的问题 This question
并试图申请我的任务。 我得到了网格的标题，上面有一些悬挂的气泡，上面写着“正在加载...”，没有任何反应。当我运行控制台时，在那里我看到一个错误，上面写着：
SCRIPT5007: Unable to get value of the property 'stype': object is null or undefined
jquery.jqGrid.min.js, line 72 character 461
像这样：
1）Oleg提出的解决方案开箱即用。那是他的json和他的javascript。谢谢。
2）我有一个类似于Oleg使用的Json数据。这是
{
"results":[
{
"analysisStatus":null,
"label":"SPR - Test Only - Cost Analyzer 1-GUI Prototype",
"leaf":false,
"level":0,
"lockedBy":"",
"overrideCostingMRC":955.2800,
"overrideCostingNRC":3739.7900,
"overrideCostingUsage":151.7300,
"overridePricingMRC":1531.4800,
"overridePricingNRC":2580.0000,
"overridePricingUsage":210.4800,
"parent":"",
"proposedCostingMRC":955.2800,
"proposedCostingNRC":3739.7900,
"proposedCostingUsage":151.7300,
"proposedPricingMRC":1531.4800,
"proposedPricingNRC":2580.0000,
"proposedPricingUsage":210.4800,
"rowId":36624,
"standardCostingMRC":955.2800,
"standardCostingNRC":3739.7900,
"standardCostingUsage":151.7300,
"standardPricingMRC":1531.4800,
"standardPricingNRC":2580.0000,
"standardPricingUsage":210.4800
},
{
"label":"Broadspeed DIA 3.0: 1.5 Mb\/s",
"leaf":false,
"level":1,
"overrideCostingMRC":299.9400,
"overrideCostingNRC":118.4400,
"overrideCostingUsage":0.0000,
"overridePricingMRC":444.0000,
"overridePricingNRC":800.0000,
"overridePricingUsage":0.0000,
"parent":36624,
"proposedCostingMRC":299.9400,
"proposedCostingNRC":118.4400,
"proposedCostingUsage":0.0000,
"proposedPricingMRC":444.0000,
"proposedPricingNRC":800.0000,
"proposedPricingUsage":0.0000,
"rowId":54130,
"standardCostingMRC":299.9400,
"standardCostingNRC":118.4400,
"standardCostingUsage":0.0000,
"standardPricingMRC":444.0000,
"standardPricingNRC":800.0000,
"standardPricingUsage":0.0000
},
{
"label":"Broadview PRI: Measured GR",
"leaf":false,
"level":1,
"overrideCostingMRC":298.1700,
"overrideCostingNRC":208.0000,
"overrideCostingUsage":115.7600,
"overridePricingMRC":409.6800,
"overridePricingNRC":800.0000,
"overridePricingUsage":210.4800,
"parent":36624,
"proposedCostingMRC":298.1700,
"proposedCostingNRC":208.0000,
"proposedCostingUsage":115.7600,
"proposedPricingMRC":409.6800,
"proposedPricingNRC":800.0000,
"proposedPricingUsage":210.4800,
"rowId":54131,
"standardCostingMRC":298.1700,
"standardCostingNRC":208.0000,
"standardCostingUsage":115.7600,
"standardPricingMRC":409.6800,
"standardPricingNRC":800.0000,
"standardPricingUsage":210.4800
},
{
"label":"Wild Card - Customer",
"leaf":true,
"level":2,
"overrideCostingMRC":0.0000,
"overrideCostingNRC":0.0000,
"overrideCostingUsage":0.0000,
"overridePricingMRC":234.0000,
"overridePricingNRC":0.0000,
"overridePricingUsage":0.0000,
"parent":54130,
"proposedCostingMRC":0.0000,
"proposedCostingNRC":0.0000,
"proposedCostingUsage":0.0000,
"proposedPricingMRC":0.0000,
"proposedPricingNRC":0.0000,
"proposedPricingUsage":0.0000,
"rowId":388316,
"standardCostingMRC":0.0000,
"standardCostingNRC":0.0000,
"standardCostingUsage":0.0000,
"standardPricingMRC":0.0000,
"standardPricingNRC":0.0000,
"standardPricingUsage":0.0000
},
{
"label":"Wild Card - Customer",
"leaf":true,
"level":2,
"overrideCostingMRC":0.0000,
"overrideCostingNRC":0.0000,
"overrideCostingUsage":0.0000,
"overridePricingMRC":40.0000,
"overridePricingNRC":0.0000,
"overridePricingUsage":0.0000,
"parent":54130,
"proposedCostingMRC":0.0000,
"proposedCostingNRC":0.0000,
"proposedCostingUsage":0.0000,
"proposedPricingMRC":0.0000,
"proposedPricingNRC":0.0000,
"proposedPricingUsage":0.0000,
"rowId":404097,
"standardCostingMRC":0.0000,
"standardCostingNRC":0.0000,
"standardCostingUsage":0.0000,
"standardPricingMRC":0.0000,
"standardPricingNRC":0.0000,
"standardPricingUsage":0.0000
},
{
"label":"Wild Card - Customer",
"leaf":true,
"level":2,
"overrideCostingMRC":0.0000,
"overrideCostingNRC":0.0000,
"overrideCostingUsage":0.0000,
"overridePricingMRC":0.0000,
"overridePricingNRC":0.0000,
"overridePricingUsage":0.0000,
"parent":54131,
"proposedCostingMRC":0.0000,
"proposedCostingNRC":0.0000,
"proposedCostingUsage":0.0000,
"proposedPricingMRC":0.0000,
"proposedPricingNRC":0.0000,
"proposedPricingUsage":0.0000,
"rowId":404098,
"standardCostingMRC":0.0000,
"standardCostingNRC":20.0000,
"standardCostingUsage":0.0000,
"standardPricingMRC":0.0000,
"standardPricingNRC":0.0000,
"standardPricingUsage":0.0000
},
{
"label":"Wild Card - Customer",
"leaf":true,
"level":2,
"overrideCostingMRC":0.0000,
"overrideCostingNRC":0.0000,
"overrideCostingUsage":0.0000,
"overridePricingMRC":3.25,
"overridePricingNRC":0.0000,
"overridePricingUsage":0.0000,
"parent":54131,
"proposedCostingMRC":0.0000,
"proposedCostingNRC":0.0000,
"proposedCostingUsage":0.0000,
"proposedPricingMRC":0.3000,
"proposedPricingNRC":0.0000,
"proposedPricingUsage":0.0000,
"rowId":404099,
"standardCostingMRC":0.0000,
"standardCostingNRC":0.0000,
"standardCostingUsage":0.0000,
"standardPricingMRC":0.0000,
"standardPricingNRC":0.0000,
"standardPricingUsage":0.0000
}
] }
我的定义网格的javascript代码如下所示：
<script type="text/javascript">
$(document).ready(function (){
$.getJSON('sources/cost-analyzer2.json', function(data){
console.log(data.results);
var this_grid;
this_grid = $this_app.define_grid("#grid-results", {
caption: 'Proposals',
pager: '#pager-results',
data: $.extend(true, [], data.results),
datatype: "local",
height: 'auto',
rowNumbers: true,
colNames:['Id', 'Description','Price MRC', 'Cost MRC','Price NRC', 'Cost NRC',
'Price Usage', 'Cost Usage',
'Price MRC', 'Cost MRC','Price NRC', 'Cost NRC', 'Price Usage', 'Cost Usage',
'Price MRC', 'Cost MRC','Price NRC', 'Cost NRC', 'Price Usage', 'Cost Usage'
],
colModel: [
{ name: 'rowId', index: 'rowId', width: 20, hidden:true},
{ name: 'label', index: 'abel', width: 100},
{ name: 'standardPricingMRC', index: 'standardPricingMRC', width: 70},
{ name: 'standardCostingMRC', index: 'standardCostingMRC', width: 70},
{ name: 'standardPricingNRC', index: 'standardPricingNRC', width: 70},
{ name: 'standardCostingNRC', index: 'standardCostingNRC', width: 70},
{ name: 'standardPricingUsage', index: 'standardPricingMRC', width: 70},
{ name: 'standardCostingUsage', index: 'standardCostingMRC', width: 70},
{ name: 'proposedPricingMRC', index: 'proposedPricingMRC', width: 70},
{ name: 'proposedCostingMRC', index: 'proposedCostingMRC', width: 70},
{ name: 'proposedPricingNRC', index: 'proposedPricingNRC', width: 70},
{ name: 'proposedCostingNRC', index: 'proposedCostingNRC', width: 70},
{ name: 'proposedPricingUsage', index: 'proposedPricingMRC', width: 70},
{ name: 'proposedCostingUsage', index: 'proposedCostingMRC', width: 70},
{ name: 'overridePricingMRC', index: 'overridePricingMRC', width: 70},
{ name: 'overrideCostingMRC', index: 'overrideCostingMRC', width: 70},
{ name: 'overridePricingNRC', index: 'overridePricingNRC', width: 70},
{ name: 'overrideCostingNRC', index: 'overrideCostingNRC', width: 70},
{ name: 'overridePricingUsage', index: 'overridePricingMRC', width: 70},
{ name: 'overrideCostingUsage', index: 'overrideCostingMRC', width: 70}
],
localReader: {
repeatitems: false,
root: "data.results"
},// end of localReader
treeGrid: true,
treeGridModel: 'adjacency',
treedatatype: "local",
ExpandColumn: 'label',
inline_editing: false
});// end of define_grid -->
$("#grid-results").jqGrid('gridResize');
$("#grid-results").jqGrid('setGroupHeaders', {
useColSpanStyle: false,
groupHeaders:[
{startColumnName: 'standardPricingMRC', numberOfColumns: 6, titleText: 'Standard'},
{startColumnName: 'proposedPricingMRC', numberOfColumns: 6, titleText: 'Proposed'},
{startColumnName: 'overridePricingMRC', numberOfColumns: 6, titleText: 'Override'}
]
});
$("#grid-results").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders:[
{startColumnName: 'standardPricingMRC', numberOfColumns: 2, titleText: 'MRC'},
{startColumnName: 'standardPricingNRC', numberOfColumns: 2, titleText: 'NRC'},
{startColumnName: 'standardPricingUsage', numberOfColumns: 2, titleText: 'Usage'},
{startColumnName: 'proposedPricingMRC', numberOfColumns: 2, titleText: 'MRC'},
{startColumnName: 'proposedPricingNRC', numberOfColumns: 2, titleText: 'NRC'},
{startColumnName: 'proposedPricingUsage', numberOfColumns: 2, titleText: 'Usage'},
{startColumnName: 'overridePricingMRC', numberOfColumns: 2, titleText: 'MRC'},
{startColumnName: 'overridePricingNRC', numberOfColumns: 2, titleText: 'NRC'},
{startColumnName: 'overridePricingUsage', numberOfColumns: 2, titleText: 'Usage'}
]
});
}); <!-- end of getJSon() -->
});<!-- end of ready() -->
</script>
如果我删除以下行，我会在网格中看到我的数据很好，但是没有TREE。
treeGrid: true,
treeGridModel: 'adjacency',
treedatatype: "local",
ExpandColumn: 'label',
有人可以帮忙吗？我做错了什么？
谢谢
2 个答案:
答案 0 :(得分：1)
我为你修好了，请查看演示。问题是最后4条记录的父ID指向第一个节点而不是3个节点。您需要添加id字段，以便parent字段可以指向。以下是您需要配置为的对象层次结构：
为什么2个项目显示在第1级的第2个项目下面是因为你把数据放在第2个项目之后，你只需要在第1个第2个项目之前移动它。
[
{
"leaf":false,
"level":0,
"parent":"",
"rowId":36624,
id:36624,
expanded:true,
loaded:true
},
{
"leaf":false,
"level":1,
"parent":36624,
"rowId":54130,
id:54130,
isLeaf:false
},
{
"leaf":true,
"level":2,
"parent":54131,
"rowId":388316,
id:388316,
isLeaf:true,
expanded:false
},
{
"leaf":true,
"level":2,
"parent":54131,
"rowId":404097,
id:404097,
isLeaf:true
},
{
"leaf":false, ---> This obj goes after the 2 before.
"level":1,
"parent":36624,
"rowId":54131,
id:54131,
isLeaf:false
},
{
"leaf":true,
"level":2,
"parent":54131,
"rowId":404098,
id:404098,
isLeaf:true
},
{
"leaf":true,
"level":2,
"parent":54131,
"rowId":404099,
id:404099,
isLeaf:true
}
]
希望它有所帮助。
的 Demo
答案 1 :(得分：0)
我已经解决了这个问题。显然，id列实际上需要被调用＆＃34; id＆＃34;而不是我的数据如何驱动。我不得不改变后端以正确获取名称。此外，它要求映射到json数据的dataobject具有方法 getIsLeaf ，而不是Java（后端）通常如何为布尔值创建getter - 只需 isLeaf（） 。
唯一的问题仍然是，树似乎有点弯曲。如果我有两行，并展开第一行，则展开的子树出现在网格的最后一个元素下面。
此处更新了javascript代码。
<script type="text/javascript">
$(document).ready(function (){
var mydata ;
$.getJSON('sources/cost-analyzer2.json', function(data){
mydata=$.extend(true, [], data.results) ;
console.log(mydata);
$("#grid-results").jqGrid({
datatype: "local",
data: mydata, // will not used at the loading,
// but during expanding/collapsing the nodes
colNames:['Id', 'Description','Price MRC', 'Cost MRC','Price NRC', 'Cost NRC',
'Price Usage', 'Cost Usage',
'Price MRC', 'Cost MRC','Price NRC', 'Cost NRC', 'Price Usage', 'Cost Usage',
'Price MRC', 'Cost MRC','Price NRC', 'Cost NRC', 'Price Usage', 'Cost Usage'
],
colModel: [
{ name: 'id', index: 'id', width: 20, hidden:true},
{ name: 'label', index: 'label', width: 100},
{ name: 'standardPricingMRC', index: 'standardPricingMRC', width: 70},
{ name: 'standardCostingMRC', index: 'standardCostingMRC', width: 70},
{ name: 'standardPricingNRC', index: 'standardPricingNRC', width: 70},
{ name: 'standardCostingNRC', index: 'standardCostingNRC', width: 70},
{ name: 'standardPricingUsage', index: 'standardPricingMRC', width: 70},
{ name: 'standardCostingUsage', index: 'standardCostingMRC', width: 70},
{ name: 'proposedPricingMRC', index: 'proposedPricingMRC', width: 70},
{ name: 'proposedCostingMRC', index: 'proposedCostingMRC', width: 70},
{ name: 'proposedPricingNRC', index: 'proposedPricingNRC', width: 70},
{ name: 'proposedCostingNRC', index: 'proposedCostingNRC', width: 70},
{ name: 'proposedPricingUsage', index: 'proposedPricingMRC', width: 70},
{ name: 'proposedCostingUsage', index: 'proposedCostingMRC', width: 70},
{ name: 'overridePricingMRC', index: 'overridePricingMRC', width: 70},
{ name: 'overrideCostingMRC', index: 'overrideCostingMRC', width: 70},
{ name: 'overridePricingNRC', index: 'overridePricingNRC', width: 70},
{ name: 'overrideCostingNRC', index: 'overrideCostingNRC', width: 70},
{ name: 'overridePricingUsage', index: 'overridePricingMRC', width: 70},
{ name: 'overrideCostingUsage', index: 'overrideCostingMRC', width: 70}
],
height:'auto',
//pager : "#ptreegrid",
sortname: 'id',
treeGrid: true,
treeGridModel: 'adjacency',
treedatatype: "local",
ExpandColumn: 'label',
caption: "Sample Tree View Model"
});
$("#grid-results")[0].addJSONData({
total: 1,
page: 1,
records: mydata.length,
rows: mydata
});
$("#grid-results").jqGrid('gridResize');
});
});
</script>
知道为什么会这样吗？ 也有人知道事件是否在Jqgrid - tree上实现了吗？
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？