web ix 学习(一) 首页 tree

最新推荐文章于 2021-07-17 18:44:53 发布

b7410852963

最新推荐文章于 2021-07-17 18:44:53 发布

阅读量791

点赞数

分类专栏： JAVA 文章标签： web

本文链接：https://blog.csdn.net/b7410852963/article/details/49023531

版权

JAVA 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<link rel="stylesheet" href="css/webix.css" type="text/css" media="screen" charset="utf-8">
		<script src="js/webix.js" type="text/javascript" charset="utf-8"></script>

		<title>Flat skin</title>

		<style>
			.transparent {
				background-color: transparent;
			}
			.main_title {
				font-size: 19px;
				line-height: 48px;
			}
			a.check_flight {
				color: #367ddc;
			}
			.webix_row_select a.check_flight {
				color: #fff;
			}
			/*.registration .webix_accordionitem_header{
				background-color: #95a5a6;
				box-shadow: 0 1px #95a5a6, 0 1px 1px #95a5a6 inset;
			}*/
			
			.blue_row {
				background-color: #cbdeeb !important;
			}
			.blue_row .webixtype_form {
				font-size: 18px;
			}
			/* */
			
			.webix_tree_item {
				height: 40px;
				line-height: 40px
			}
			.webix_tree .webix_scroll_cont>.webix_tree_leaves {
				padding: 0
			}
			.webix_view {
				background: #f1f1f1 !important
			}
			.webix_tree_item.webix_selected,
			.webix_tree_item.webix_selected span {
				background-color: #27ae60;
				padding-right: 0
			}
			.webix_tree_branch_1 .webix_tree_item {
				padding-left: 24px;
				padding-right: 10px
			}
			.webix_tree_branch_1>.webix_tree_item {
				padding: 5px 0 4px 0;
				line-height: 40px
			}
			.webix_tree_branch_1 {
				border-bottom: 1px solid #e5e5e5
			}
			.webix_tree_item.webix_selected span,
			.webix_tree_item span {
				margin: 0;
				padding: 1px
			}
			.webix_tree_item.webix_selected .webix_icon {
				color: #fff
			}
			.webix_icon {
				width: 25px;
				padding-left: 12px !important;
				text-align: center
			}
			.dashboard .webix_icon {
				font-size: 18px
			}
			.webix_tree_leaves .webix_tree_leaves {
				margin-left: 0
			}
		</style>
	</head>

	<body>

		<script type="text/javascript">
			webix.type(webix.ui.tree, {
				name: "awesome",
				height: 40,
				icon: function(e) {
					for (var t = "", i = "", a = 1; a <= e.$level; a++)
						if (a == e.$level && e.$count) {
							var n = e.open ? "down" : "right";
							t += "<span class='" + i + " webix_icon fa-angle-" + n + "'></span>"
						}
					return t
				},
				folder: function(e) {
					return e.icon ? "<span class='webix_icon icon fa-" + e.icon + "'></span>" : ""
				}
			});
			var tree_data = [{
				id: "main",
				value: "Main",
				open: !0,
				data: [{
					id: "dashboard",
					value: "Dashboard",
					icon: "home",
					$css: "dashboard",
					details: "reports and statistics"
				}, {
					id: "orders",
					value: "Orders",
					icon: "check-square-o",
					$css: "orders",
					details: "order reports and editing"
				}, {
					id: "products",
					value: "Products",
					icon: "cube",
					$css: "products",
					details: "all products"
				}, {
					id: "product_edit",
					value: "Product Edit",
					icon: "pencil-square-o",
					details: "changing product data"
				}]
			}, {
				id: "components",
				open: !0,
				value: "Components",
				data: [{
					id: "datatables",
					value: "Datatables",
					icon: "table",
					details: "datatable examples"
				}, {
					id: "charts",
					value: "Charts",
					icon: "bar-chart-o",
					details: "charts examples"
				}, {
					id: "forms",
					value: "Forms",
					icon: "list-alt",
					details: "forms examples"
				}]
			}, {
				id: "uis",
				value: "UI Examples",
				open: 1,
				data: [{
					id: "calendar",
					value: "My Calendar",
					icon: "calendar",
					details: "calendar example"
				}, {
					id: "files",
					value: "File Manager",
					icon: "folder-open-o",
					details: "file manager example"
				}]
			}];
			var grid_data = [{
				id: 1,
				value: "The Shawshank Redemption"
			}, {
				id: 2,
				value: "The Godfather"
			}, {
				id: 3,
				value: "The Godfather: Part II"
			}, {
				id: 4,
				value: "The Good, the Bad and the Ugly"
			}, {
				id: 5,
				value: "My Fair Lady"
			}, {
				id: 6,
				value: "12 Angry Men"
			}];
			webix.ui({
				rows: [{
					type: "header",
					template: "Go App!"
				}, {
					cols: [{
						id:"app:menu",
						view: "tree",
						type: "awesome",
						data: tree_data,
						gravity: 0.3,
						activeTitle: !0,
						select: !0,
						tooltip: {
							template: function(e) {
								return e.$count ? "" : e.details
							}
						},
						on: {
							onBeforeSelect: function(e) {
								return this.getItem(e).$count ? !1 : void 0
							},
							onAfterSelect: function(e) {
								var t = this.getItem(e);
								/*this.$scope.show("./" + e);
			
			webix.$$("title").parse({title:t.value, details:t.details})*/
			
			
			console.log(e);
			console.log(t.value);
			console.log(t.details);
							}
						}
					}, {
						view: "datatable",
						autoConfig: true,
						data: grid_data
					}]
				}]
			})
		</script>
	</body>

</html>