踩 jstree的简单应用 如果有开发中用的朋友可以交流一下~~
参见 http://www.jstree.com/
标签: jstree 代码片段(1)
[代码] [JavaScript]代码
view sourceprint?
001 jstree主要是看后台如何组织数据
002
003 java类:
004
005 public class TreeAction extends BaseAction implements IAuthIdGetter, IOperationLog {
006
007 /**
008 * 序列号
009 */
010 private static final long serialVersionUID = 1L;
011
012 /**
013 * 数据list
014 */
015 private List<TreeDomain> treeList = new ArrayList<TreeDomain>();
016
017 /**
018 * 日志相关
019 */
020 private static LogService logger = LogService.getLogger(OneCMDBTreeAction.class);
021
022 /**
023 * 获取展示树
024 * @return String
025 */
026 public String showTree() {
027 logger.info(getText("function.title") + getText("log.showTree.begin"));
028 this.parseXml();
029 logger.info(getText("function.title") + getText("log.showTree.end"));
030 return SUCCESS;
031 }
032
033 /**
034 * @return
035 */
036 public void parseXml() {
037 try {
038 CMDBUtil cmdb = new CMDBUtil();
039 // 创建DOM工厂
040 DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance();
041 DocumentBuilder db = dbf.newDocumentBuilder();
042 String treeXml = cmdb.getXML();// getXML();
043 logger.info(treeXml);
044 byte source[] = treeXml.getBytes("UTF-8");
045 InputStream is = new ByteArrayInputStream(source);
046 Document document = db.parse(is);
047 // 显示的节点id
048 String alias = "";
049 // 树节点要展示的名称
050 String displayName = "";
051 // 获取所有名称为template的节点
052 NodeList nodeIdList = document.getElementsByTagName("template");
053 for (int i = 0; i < nodeIdList.getLength(); i++) {
054 Node node = nodeIdList.item(i);
055 // 获取节点要显示的id
056 alias = node.getAttributes().getNamedItem("alias").getNodeValue();
057 displayName = node.getAttributes().getNamedItem("displayName").getNodeValue();
058 if ("Ci".equals(alias)) {
059 TreeDomain domain = new TreeDomain();
060 domain.setDisplayName(displayName);
061 domain.setShowId(alias);
062 domain.setParentId("0");
063 treeList.add(domain);
064 //调用递归算法
065 findList(alias, nodeIdList);
066 }
067 }
068 } catch (Exception e) {
069 // TODO Auto-generated catch block
070 logger.info("parseXml error :" + e);
071 }
072 }
073
074 /**
075 * 递归获取Ci节点下的所有子节点
076 * @param id "Ci"
077 * @param nodeIdList
078 */
079 public void findList(String id, NodeList nodeIdList) {
080 for (int i = 0; i < nodeIdList.getLength(); i++) {
081 Node node = nodeIdList.item(i);
082 Node derivedNode = node.getFirstChild().getNextSibling();
083 if ("derivedFrom".equals(derivedNode.getNodeName())) {
084 // 当前node的id
085 String alias = node.getAttributes().getNamedItem("alias").getNodeValue();
086 // 当前node的显示名称
087 String displayName = node.getAttributes().getNamedItem("displayName")
088 .getNodeValue();
089 Node refNode = derivedNode.getFirstChild().getNextSibling();
090 if (refNode.getAttributes().getNamedItem("alias") != null) {
091 String pid = refNode.getAttributes().getNamedItem("alias").getNodeValue();
092 if (id.equals(pid)) {
093 TreeDomain domain = new TreeDomain();
094 domain.setDisplayName(displayName);
095 domain.setShowId(alias);
096 domain.setParentId(pid);
097 treeList.add(domain);
098 findList(alias, nodeIdList);
099 }// end if id
100 }// end if refNode
101 }// end if
102 }// end for i
103 }
104
105 /**
106 * 读取树的内容
107 * @return
108 */
109 public String getXML() {
110 String xml = "";
111 ByteArrayOutputStream out = new ByteArrayOutputStream();
112 InputStream is = null;
113 try {
114 is = new FileInputStream("C:\\cloud\\template.xml");
115 byte[] b = new byte[1024];
116 int n;
117 while ((n = is.read(b)) != -1) {
118 out.write(b, 0, n);
119 }// end while
120 byte treebyte[] = out.toByteArray();
121 String str = new String(treebyte, "UTF-8");
122 xml = str;
123 // logger.info(xml);
124 } catch (Exception e) {
125 // TODO Auto-generated catch block
126 e.printStackTrace();
127 } finally {
128 if (is != null) {
129 try {
130 is.close();
131 } catch (Exception e) {
132 // log.error(e);// TODO
133 }// end try
134 }// end if
135 if (out != null) {
136 try {
137 out.close();
138 } catch (Exception e) {
139 // log.error(e);// TODO
140 }// end try
141 }// end if
142 }
143 return xml;
144 }
145
146 @Override
147 public String getOpType() {
148 // TODO Auto-generated method stub
149 return null;
150 }
151
152 @Override
153 public String getOperationFunction() {
154 // TODO Auto-generated method stub
155 return null;
156 }
157
158 @Override
159 public String getOperationInfo() {
160 // TODO Auto-generated method stub
161 return null;
162 }
163
164 public List<TreeDomain> getTreeList() {
165 return treeList;
166 }
167
168 public void setTreeList(List<TreeDomain> treeList) {
169 this.treeList = treeList;
170 }
171 }
172
173 <script type="text/JavaScript">
174 <!--
175 var iconCss = "background: url(././././themes/default/images/ico_file.png;) no-repeat scroll center center transparent;";
176 var iconUrl = "././././themes/default/images/ico_file.png ";
177 $(function(){
178 $("#resourceTree").jstree({
179 "xml_data" : {
180 "ajax" : {
181 "url" : "showTree.action"
182 },
183 "xsl" : "flat"
184 },
185 "ui" : {
186 "initially_select" : [ "NJCMP_Pm_info_tab" ]
187 },
188 "plugins" : [ "themes", "xml_data","ui"]
189 })
190 .bind("open_node.jstree",function (e,data){
191 var data = $(data.rslt.obj);
192 var $parentUL = $("ul",data);
193 var $content = $("ul",$parentUL);
194 if($content.html() == null ){
195 $("a",$parentUL).attr("icon",iconUrl);
196 $("ins:odd",$parentUL).attr("style",iconCss);
197 }
198 })
199 .bind("select_node.jstree", function (event, data){
200 var id = data.rslt.obj.attr("id");
201 var data = $(data.rslt.obj);
202 var $parentUL = $("ul",data);
203 var $content = $("ul",$parentUL);
204 if($content.html() == null ){
205 url = "<%=request.getContextPath()%>/getbase.action?CIName=" + id;
206 $("#framezc").attr("src",url);
207 }
208 })
209 .bind("loaded.jstree", function (e, data){
210 $("#resourceTree").css("background-color","#f4f6f8");
211 $("#resourceTree").css("overflow","auto");
212 $("#resourceTree").css("height","700px");
213 $("#resourceTree").jstree("toggle_node","#NJCMP_PM");
214 url = "<%=request.getContextPath()%>/getbase.action?CIName='NJCMP_Pm_info_tab'";
215 $("#framezc").attr("src",url);
216 });
217 });
218 //-->
219 </script>
220
221 <div id="resourceTree"></div>
de]
分享到:
相关推荐
其高效、易用和可扩展的特性,使其在各种Web应用中广泛应用,无论是企业级后台管理界面,还是用户友好的前端导航,都能看到JSTree的身影。掌握JSTree的使用,将有助于提升项目的交互体验和开发效率。
在IT行业中,构建交互式用户界面是至关重要的,特别是当涉及到数据可视化时,例如创建树形结构来展示层次关系的数据。...开发者可以通过JavaScript和Java的配合,实现数据的后台处理和前台展示,提供流畅的用户体验。
前台<pre><ul id="ttt" checkbox="true"></ul></pre>,js代码:<pre>function treeload(){ //树加载 $("#ttt").tree({ url:"tree_data2.do", }); },通过调用Springmvc从后台返回tree
Java中前台往后台传递多个id参数的实例 在 Java 中,前台往后台传递多个 id 参数是非常常见的场景...这个实例展示了如何在 Java 中前台往后台传递多个 id 参数,包括前台 JS 代码的处理、后台的处理和Ajax请求的处理。
前台代码可直接复制粘贴,js代码需要修改url路径,后台代码主要需要修改泛型集合和foreach循环中的内容。
2. **EasyJWeb与EXT技术结合**:EasyJWeb是一个轻量级的Java Web框架,它与Ext JS的结合,可以创建出既有后台Java处理能力,又有前台富交互体验的Web应用。在"基于EasyJWeb开发的AJAX综合演示程序,用到了EXT等技.zip...
前后台分离是一种现代Web应用的架构模式,它将业务逻辑(后台)与用户界面(前台)进行解耦。这种模式使得前后端可以独立开发,提高效率,同时有利于维护和扩展。在电商领域,前后台分离有助于实现快速响应和高性能...
tree_load.asp -- 动态加载树示例,后台部分 tree.mdb -- 动态加载树示例,数据库 alai_imagelist.js -- 图片列表控件程序 Alai_win.js -- 浮动窗口控件程序 Alai_win_xp.js -- 浮动窗口控件程序XP风格版 bihua.js...
7. includes:前台共用的文件和函数,包括各种模块和插件。 - codetable:语言对应代码表。 - fckeditor:HTML文本编辑器。 - modules:包含各种转换、定时任务、整合插件、支付接口、送货方式等。 - ... 8. ...
`PageManage.aspx.designer.cs`则是由Visual Studio自动生成的设计器文件,包含了对前台控件的引用和声明。 1. **树的数据源**:EXT.NET的树形控件可以通过两种方式加载数据:同步加载(Synchronous)和异步加载...
《精通JS脚本之ExtJS框架》附有配套光盘,提供了书中实例的源代码和视频教学文件。此外,读者还可以通过访问itzcn网站来获得即时在线帮助。 《精通JS脚本之ExtJS框架》可以作为Web开发的自学参考书,也可以作为...
《精通JS脚本之ExtJS框架》附有配套光盘,提供了书中实例的源代码和视频教学文件。此外,读者还可以通过访问itzcn网站来获得即时在线帮助。 《精通JS脚本之ExtJS框架》可以作为Web开发的自学参考书,也可以作为...
体的实现是当我鼠标移入“长袖”这个分类时,出现三个icon (如图),按“增加”按钮,会发送ajax异步请求到后台,在数据库库中增加以“长袖”为父类id 的一个子分类,成功后返回到前台,然后相应的节点下动态添加子...
其中,`.php`文件是后台的主要控制脚本,`help\zh_cn`为中文帮助文档,`images`存储后台界面使用的图片,`includes`包含了后台共用的文件和函数,`js`包含后台JavaScript脚本,`styles`是后台CSS样式表,`templates`...
EC程序文件说明主要涵盖了EC系统...总结来说,EC程序文件结构严谨,分为前后台程序、数据存储、模板样式、语言支持等多个方面,确保了电商网站的正常运行和高效管理。理解这些文件的功能对于维护和定制EC系统至关重要。
在Web应用程序开发中,ExtJS和Direct Web Remoting (DWR)是两种常见的技术,用于构建富客户端界面和实现服务器端交互...在这样的项目中,这两个文件起到了桥梁的作用,连接了后台服务和前台展示,简化了开发者的工作。
- **includes:** 包含后台共用的文件和函数库,提高代码复用性。 - **js:** 后台JavaScript脚本,增强交互体验。 - **styles:** CSS样式表,用于美化后台界面。 - **templates:** 后台模板文件,*.htm格式,...
1. 后台采用EJS(EasyJWeb+JPA+Spring2.5),前台UI结合传统HTML和Ext。 **九、蓝源OA系统** 1. 技术架构同样基于EJS和Ext,权限系统采用acegi。 2. 功能涵盖日常办公、信息中心、组织机构管理等多个方面。 **十、...
Sales Representative 1 test5 供应商1 供应商1 - Exotic Liquids44 1 系统特色 1,不采用code-behind机制,不使用任何服务器控件,全面将工作放在前台实现,后台只处理数据部分。页面还是用aspx后缀,继承于统一的...