(公司专用)jQuery制作TreeView
浏览数：345 /
时间：2015年06月09日
申明要加载的js库和css
1 <link href="../../Js/res/red/gl.css" type="text/css" rel="Stylesheet" /> 2 <link href="style/styles.css" type="text/css" rel="Stylesheet" /> 3 4 <script type="text/javascript" src="../../Js/jquery.js"></script> 5 <script type="text/javascript" src="../../Js/gl.lib.js"></script> 6 <script type="text/javascript" src="../../Js/gl.ui.js"></script> 7 <script type="text/javascript" src="../../Js/ui/gl.ui.gtreeView.js"></script> 8 9 <style type="text/css"> 10 #divTree { position:absolute; left:5px; top:5px; bottom:5px; width:300px } 11 #divData { position:absolute; left:310px; top:5px; bottom:5px; right:5px } 12 #ifrmData { width:100%; height:100% } 13 </style>
实现TreeView的JS
这个JSON数组
1 var controls = [ 2 { text: "UI", nodes: [ 3 { text: "树(GTreeView)", nodes: [ 4 { text: "简单例子", url: "framework/ui/gtreeView.htm" }, 5 { text: "代码树(缓存模式)", url: "framework/lib/gcacher.htm" }, 6 { text: "代码树(后端)", url: "framework/ui/gtreeView.service.code.htm" }, 7 { text: "树列表", url: "framework/ui/gtreeView.cols.htm" } 8 ] 9 }, 10 11 { text: "表格(GTableView)", nodes: [ 12 { text: "简单例子", url: "framework/ui/gtableView.htm" }, 13 { text: "多行表头及统计行", url: "framework/ui/gtableView.mulit.htm" } 14 ] 15 }, 16 17 { text: "阴影(GShadow)", url: "framework/ui/gshadow.htm" }, 18 { text: "复选框(GCheckBox)", url: "framework/ui/gcheckBox.htm" }, 19 { text: "按钮/组(GButton)", url: "framework/ui/gbutton.htm" }, 20 { text: "信息提示(GTips)", url: "framework/ui/gtips.htm" }, 21 { text: "下拉日历(GDatePicker)", url: "framework/ui/gdatePicker.htm" }, 22 { text: "流程图(GEasyFlowChart)", url: "framework/ui/geasyFlowchart.htm" }, 23 { text: "X列表框(GItemList)", url: "framework/ui/gitemList.htm" }, 24 { text: "标题栏(GTitleBar)", url: "framework/ui/gtitleBar.htm" }, 25 { text: "录入(GInputText)", url: "framework/ui/ginputText.htm" }, 26 { text: "查找(GInputFind)", url: "framework/ui/ginputFind.htm" }, 27 { text: "自动补齐(GAutoSuggest)", url: "framework/ui/gautoSuggest.htm" }, 28 { text: "验证(GValidateInput)", url: "framework/ui/gvalidateInput.htm" }, 29 { text: "业务按钮列表(GOperButtons)", url: "framework/ui/goperButtons.htm" }, 30 31 { text: "标签栏(GTabBar)", url: "framework/ui/gtabBar.htm" }, 32 { text: "进度条(GProcessBar)", url: "framework/ui/gprocessBar.htm" }, 33 { text: "对话框(GDialog)", url: "framework/ui/gdialog.htm" }, 34 { text: "下拉列表(GComboBox)", url: "framework/ui/gcomboBox.htm" }, 35 { text: "工具条(GToolBar)", url: "framework/ui/gtoolBar.htm" }, 36 { text: "下拉菜单(GPopupMenu)", url: "framework/ui/gpopupMenu.htm" } 37 ] 38 }, 39 40 { text: "Prj", nodes: [ 41 { text: "主页布局(GLayout)", nodes: [ 42 { text: "简单例子", url: "framework/prj/glayout.htm" }, 43 { text: "后端取数", url: "framework/prj/glayout.service.htm" } 44 ] 45 }, 46 { text: "简单布局(GEasyLayout)", url: "framework/prj/geasyLayout.htm" }, 47 { text: "简单编辑器组(GEasyEditor)", url: "framework/prj/geasyEditor.htm" } 48 ] 49 }, 50 51 { text: "lib", nodes: [ 52 { text: "缓存-代码", url: "framework/lib/gcacher.htm" }, 53 { text: "简拼", url: "framework/lib/jp.htm" } 54 ] 55 }, 56 57 { text: "需团队确认", nodes: [ 58 { text: "主页面初始化加载", url: "framework/mode/HomePage/Default.htm" }, 59 { text: "开发模式(组长<->队员)", url: "framework/mode/ProjectTeam/Default.htm" } 60 ] 61 }, 62 63 { text: "BUG汇总", nodes: [ 64 { text: "BUG汇总", url: "other/bugs.htm" }, 65 { text: "按钮组", url: "framework/lib/gcryptic.htm" } 66 ] 67 } 68 ];
JS实现TreeView代码
var node_controls = function (nodes) { for (var i = nodes.length - 1; i >= 0; i--) { var node = nodes[i]; node.icon = node.nodes ? 0 : 1; //如果有子节点 icon=0,也就是这个父节点的icon是第0个图片 按下面来说是ico-07 node.enabled = node.nodes ? false : true; //如果有子节点 enabled=false,也就是说这个父节点不可点击触发 if (node.nodes) node_controls(node.nodes); } } node_controls(controls); var new_tree = $.gtreeView("divTree", { border: true, images: ["ico-07", "ico-08"], //前面的图片是父节点的图片，只要有子节点就是父节点，图片就是ico-07 nodes: [{ text: "控件实例", icon: 0, enabled: false, nodes: controls}], onselectchanged: function (that, node) { $E("ifrmData").src = node.url; } });
页面的布局
1 <body> 2 <div id="divTree"></div> 3 <div id="divData"><iframe id="ifrmData" frameborder="0" scrolling="no"></iframe></div> 4 </body>
TreeView效果
styles.css里面的css
1 .ico-01 { background-image:url(01.gif) } 2 .ico-02 { background-image:url(02.gif) } 3 .ico-03 { background-image:url(03.gif) } 4 .ico-04 { background-image:url(04.gif) } 5 .ico-05 { background-image:url(05.gif) } 6 7 .ico-06 { background-image:url(06.gif) } 8 .ico-07 { background-image:url(07.gif) } 9 .ico-08 { background-image:url(08.gif) } 10 .ico-09 { background-image:url(09.gif) } 11 .ico-10 { background-image:url(10.gif) } 12 13 .ico-11 { background-image:url(11.gif) } 14 .ico-12 { background-image:url(12.gif) }
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
