我几乎直接从演示中获得了以下代码：
$("#treetable").fancytree({
extensions: ["table"],
table: {
indentation: 20, // indent 20px per node level
nodeColumnIdx: 0 // render the node title into the 1st column
},
source: {url: "productTree.json"},
rendercolumns: function(e, data) {
var node = data.node,
$tdList = $(node.tr).find(">td");
// (index #0 is rendered by fancytree - see above)
$tdList.eq(1).text(node.modeldet);
$tdList.eq(2).text(node.key);
$tdList.eq(3).text(node.inclusion);
}
});
这是 JSON：
[
{"title": "All Products", "key": "*", "folder": true, "children": [
{"title": "Smart Product 1", "key": "Smart", "inclusion": "Mandatory", "folder": true, "children": [
{"title": "Simple A", "key": "One Time Fee", "modeldet": "0-50 Units"},
{"title": "Simple B", "key": "Per Unit or Metered Usage", "modeldet": "More than 50 Units"}
]},
{"title": "Simple A", "key": "One Time Fee", "inclusion": "Mandatory"},
{"title": "Simple B", "key": "Per Unit or Metered Usage", "inclusion": "Mandatory"},
{"title": "Simple C", "key": "Reservation", "inclusion": "Optional", "extraClasses": "my-extra-class" },
{"title": "Simple D", "key": "Service or Recurring Fee", "inclusion": "Optional", "extraClasses": "my-extra-class" }
]}
]
树呈现，但包含数据的唯一列是“标题”和“键”。其他都是空白的。