Q
点击展开html
-1
A
回答
0
我认为你正在寻找树视图。如果你能做到这一点使用jQuery插件
0
我发现这个jsfiddle漂亮的实施,你在找什么。
var data = [{
"id": "1",
"name": "Corporate Headquarters",
"budget": "1230000",
"location": "Las Vegas",
"children": [{
"id": "2",
"name": "Finance Division",
"budget": "423000",
"location": "San Antonio",
"children": [{
"id": "3",
"name": "Accounting Department",
"budget": "113000",
"location": "San Antonio"
}, {
"id": "4",
"name": "Investment Department",
"budget": "310000",
"location": "San Antonio",
children: [{
"id": "5",
"name": "Banking Office",
"budget": "240000",
"location": "San Antonio"
}, {
"id": "6",
"name": "Bonds Office",
"budget": "70000",
"location": "San Antonio"
}, ]
}]
}, {
"id": "7",
"name": "Operations Division",
"budget": "600000",
"location": "Miami",
"children": [{
"id": "8",
"name": "Manufacturing Department",
"budget": "300000",
"location": "Miami"
}, {
"id": "9",
"name": "Public Relations Department",
"budget": "200000",
"location": "Miami"
}, {
"id": "10",
"name": "Sales Department",
"budget": "100000",
"location": "Miami"
}]
}, {
"id": "11",
"name": "Research Division",
"budget": "200000",
"location": "Boston"
}]
}];
var source = {
dataType: "json",
dataFields: [{
name: "name",
type: "string"
}, {
name: "budget",
type: "number"
}, {
name: "id",
type: "number"
}, {
name: "children",
type: "array"
}, {
name: "location",
type: "string"
}],
hierarchy: {
root: "children"
},
localData: data,
id: "id"
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function() {
}
});
// create jqxTreeGrid.
$("#treeGrid").jqxTreeGrid({
source: dataAdapter,
altRows: true,
width: 680,
theme:'energyblue',
checkboxes: true,
ready: function() {
$("#treeGrid").jqxTreeGrid('expandRow', '1');
$("#treeGrid").jqxTreeGrid('expandRow', '2');
},
columns: [{
text: "Name",
align: "center",
dataField: "name",
width: 300
}, {
text: "Budget",
cellsAlign: "center",
align: "center",
dataField: "budget",
cellsFormat: "c2",
width: 250
}, {
text: "Location",
dataField: "location",
cellsAlign: "center",
align: "center"
}]
});
$("#jqxbutton").jqxButton({
theme: 'energyblue',
height: 30
});
$('#jqxbutton').click(function() {
$("#treeGrid").jqxTreeGrid('checkRow',2);
});
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet"/>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="treeGrid"></div>
<input type="button" style="margin: 20px;" id="jqxbutton" value="Check a row" />
0
您的图片说,你要像JSON树。
你可以通过使用几个Jquery插件来做到这一点。这里是一个 - github链接,Z-Tree
相关问题
- 1. JavaScript函数展开html部分点击
- 2. 点击展开div
- 3. jQuery accordian - 点击展开,点击关闭
- 4. 展开类别当点击
- 5. JavaScript:点击展开区域
- 6. jquery点击展开下来
- 7. mahapps SplitButton点击展开
- 8. 点击展开菜单
- 9. 点击展开DropDown List
- 10. HTML + jquery在点击和悬停操作时展开表格
- 11. 展开导航菜单通过CSS/HTML按钮,点击后
- 12. 如何在点击时展开html多选框
- 13. CardView动画:在点击时展开并展开?
- 14. 展开点击更改为自动展开
- 15. SVG菱形展开动画点击时
- 16. 点击分组列的展开图标
- 17. 实施“点击这里展开”容器
- 18. ExpandableListView在点击时不会展开
- 19. (jquery)点击div展开css转换
- 20. p:treeNode在标签上展开点击
- 21. 点击展开的PHP嵌套菜单
- 22. 展开/折叠div点击多个div
- 23. 点击它可以展开JTextArea或JTextPane?
- 24. jQuery的崩溃点击展开DIV
- 25. 在点击展开div类的宽度
- 26. 点击展开部件的名称
- 27. 在bigcommerce上点击函数展开sidecaegorylist
- 28. 点击展开div与转换
- 29. 展开导航菜单点击
- 30. 用流畅动画展开div点击
新手或没有,你需要显示你已经尝试和你卡住的地方。不只是有人通过为我工作帮助我!问问你自己,你觉得它如何工作?点击一下,然后打开,再次点击它关闭。内容是在点击时添加还是从一开始就已经存在?等等。首先通过它。 – javaBean007
@ javaBean007我不是要求某人为我写完整的代码。我只想叫它叫什么名字,然后我就可以开始自己学习了! – Maz341