`
SavageGarden
  • 浏览: 216097 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

MVC模式实现JS树

阅读更多
      项目中页面上要用到树形结构,方便用户选择。虽然程序中已经有树的js组件,但那是选择人员的,现在这个需求是:有第三方提供的机构数据和机构下的基金中心数据,要求方便用户选择机构和基金中心。dojo?ext?懒的去网上搜了,自己来写一个。
      因为这个只有两级结构:机构-->基金中心,所以实现起来比较简单,但实现过程中感觉写这么个小东西很有趣,所以想整理下,使它能够应对比较一般的情况。两个晚上后,我觉得该是把它给人看看的时候了,虽然界面很丑。。。但是我想这种设计方式或许还是值得各位一看的吧,欢迎拍砖。
     针对公司、部门、人员,做以下设计:
Company
<company>
		<id>1001</id>
		<name>公司</name>
	</company>

Depart
<depart>
		<id>100101</id>
		<pid></pid>
		<cid>1001</cid>
		<name>父部门甲</name>
	</depart>

Person
<depart>
		<id>100101</id>
		<pid></pid>
		<cid>1001</cid>
		<name>父部门甲</name>
	</depart>

针对树的基本元素、构成、显示、赋值。。。做以下设计:
/jstree/js/treeBean.js
/**
 *	提供显示树的构造函数
 *	author 	SavageGarden
 *	version	1.0
 */
 
 /**
  *	公司的构造函数
  */
 function company(){
 	var id = "";
 	var name = "";
 }
 /**
  *	部门的构造函数
  */
 function depart(){
 	var id = "";
 	var pid = "";
 	var cid = "";
 	var name = "";
 }
 /**
  * 人员的构造函数
  */
 function person(){
 	var id = "";
 	var dep_id = "";
 	var dep_top_id = "";
 	var cid = "";
 	var name = "";
 }

M:提供构成树的基本元素-公司、部门、人员的构造函数
/jstree/js/treeShow.js
V:提供显示树时(展开、关闭、选中、取消)的函数
/jstree/js/treeFunc.js
C:提供与XML交互数据的函数
/jstree/js/formFunc.js
提供表单页与树页面交互的函数
如果在某个页面引用,需要在页面中引用此js文件
<script type="text/javascript" src="/jstree/js/formFunc.js"></script>
然后在页面上这样来引用
<table width="700px">
	<tr>
		<td width="10%">人员:</td>
		<td>
			<textarea id="personNameStr" name="personNameStr" readonly="readonly"></textarea>
			<input type="hidden" id="personIdStr" name="personIdStr"/>
			<a href="#" onclick="openTreeHtml('personIdStr','personNameStr');return false;">
		                  <img src="/jstree/img/lookup.gif" border="0">
			</a>
		</td>
	</tr>
</table>



分享到:
评论

相关推荐

    基于Ajax与MVC模式的信息系统的研究与设计

    针对MVC模式的B/S架构信息系统Web页面表现出的实时性较差的问题,尝试将Ajax融入MVC模式系统的结构设计之中,...最后用JavaScript编码处理页面中的对象,实现Ajax技术在MVC模式中的应用,提高信息系统Web页面的交互性。

    fractals:分形主要使用javascript和html5 canvas实现。 图的深度优先遍历和宽度优先遍历的示例。 面向对象的设计

    程序是使用面向对象的设计和MVC模式的变体来实现的,以将模型与视图层分离。 例子 tree_html5_canvas:包含使用javascript和html5 canvas的二叉树分形的基本实现。 tree_fractal_forest:与上面相同,并添加了生成...

    asp.net知识库

    SharpRewriter:javascript + xml技术利用#实现url重定向 采用XHTML和CSS设计可重用可换肤的WEB站点 asp.net的网址重定向方法的比较:面向搜索引擎友好 也谈 ASP.NET 1.1 中 QueryString 的安全获取写法 ASP.NET运行...

    Ext Js权威指南(.zip.001

    1.2.4 在javascript中使用json / 4 1.2.5 在.net中使用json / 8 1.2.6 在java中使用json / 12 1.2.7 更多有关json的信息 / 15 1.3 ext js 4概述 / 15 1.4 ext js的开发工具的获取、安装与配置介绍 / 18 1.4.1...

    asp.net学习大全(超全面的资料整合)

    MVC在Web系统中的模式与应用.doc NET中各种数据库连接大全.doc Treeview控件2.0与ACCESS数据库.txt TreeView使用集锦.txt Web Service服务.doc WEB中实现打印预览.txt 根据用户名生成注册码的算法.txt 关于asp.net...

    ASP.NET学习大全

    MVC在Web系统中的模式与应用.doc NET中各种数据库连接大全.doc Treeview控件2.0与ACCESS数据库.txt TreeView使用集锦.txt Web Service服务.doc WEB中实现打印预览.txt 根据用户名生成注册码的算法.txt 关于asp.net...

    python入门到高级全栈工程师培训 第3期 附课件代码

    05 MVC模式和MTV模式 06 django的一个简单应用 07 django静态文件之static 08 django的url控制系统 09 django的urlConf补充 第50章 01 django之视图函数的介绍 02 django视图之redirec 03 django模板之变量 04 ...

    类hackernews源码iNews.zip

    Hacker News本身也是开源的,...iNews里面有一些对操作器的浅显理解和实现,但并没有完全使用操作器来做,还是主要使用MVC作为基础,这种尝试会慢慢变得成熟,并可能逐步完全采用这种模式来开发。 标签:iNews

    Eclipse_Swt_Jface_核心应用_部分19

    8.2.3 实现接口的类 131 8.2.4 继承的类的方法 132 8.3 键盘事件 132 8.3.1 键盘事件程序示例 132 8.3.2 键盘事件的各种属性 134 8.4 鼠标事件 136 8.4.1 鼠标事件程序示例 136 8.4.2 鼠标事件的各种...

    JAVA上百实例源码以及开源项目源代码

    一个简单的CS模式的聊天软件,用socket实现,比较简单。 凯撒加密解密程序 1个目标文件 1、程序结构化,用函数分别实现 2、对文件的加密,解密输出到文件 利用随机函数抽取幸运数字 简单 EJB的真实世界模型(源代码...

    java源码包---java 源码 大量 实例

    一个简单的CS模式的聊天软件,用socket实现,比较简单。 凯撒加密解密程序 1个目标文件 1、程序结构化,用函数分别实现 2、对文件的加密,解密输出到文件 利用随机函数抽取幸运数字 简单 EJB的真实世界模型(源代码...

    jive.chm

    系统设计 1 jive设计思路 2 jive的工作内幕 3 Jive源代码研究 4 Jive中的设计模式 5 jive学习笔记 &lt;br&gt; 设计模式 1 大道至简-Java之23种模式一点就通 2 设计模式...

    JAVA上百实例源码以及开源项目

    一个简单的CS模式的聊天软件,用socket实现,比较简单。 凯撒加密解密程序 1个目标文件 1、程序结构化,用函数分别实现 2、对文件的加密,解密输出到文件 利用随机函数抽取幸运数字 简单 EJB的真实世界模型(源代码...

    java源码包2

    一个简单的CS模式的聊天软件,用socket实现,比较简单。 凯撒加密解密程序 1个目标文件 1、程序结构化,用函数分别实现 2、对文件的加密,解密输出到文件 利用随机函数抽取幸运数字 简单 EJB的真实世界模型(源...

    GoodProject Maven Webapp.zip

    后端使用的MVC三层架构模式 三层架构(3-tier architecture) 通常意义上的三层架构就是将整个业务应用划分为:界面层(User Interface layer)、业务逻辑层(Business Logic Layer)、数据访问层(Data access layer)。区分...

    DXE-shop网店系统 v1.2.zip

    系统采用了流行的MVC分层设计原则,架构优良,逻辑简洁清晰,性能卓越,无论前台后台,都会给您带来流畅的操作体验。 系统具有易于使用的模板主题功能,可以很容易地通过模板调整系统的外观风格,也可以通过第三方...

    java源码包3

    一个简单的CS模式的聊天软件,用socket实现,比较简单。 凯撒加密解密程序 1个目标文件 1、程序结构化,用函数分别实现 2、对文件的加密,解密输出到文件 利用随机函数抽取幸运数字 简单 EJB的真实世界模型(源...

    java源码包4

    一个简单的CS模式的聊天软件,用socket实现,比较简单。 凯撒加密解密程序 1个目标文件 1、程序结构化,用函数分别实现 2、对文件的加密,解密输出到文件 利用随机函数抽取幸运数字 简单 EJB的真实世界模型(源...

Global site tag (gtag.js) - Google Analytics