`
SavageGarden
  • 浏览: 222066 次
  • 性别: 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>



分享到:
评论

相关推荐

    ASP.NET mvc tree 树 类似 TreeView 控件

    总之,虽然ASP.NET MVC没有内置的TreeView控件,但通过模型-视图-控制器的设计模式和前端技术的结合,我们可以灵活地创建出满足需求的树形结构,并实现丰富的交互功能。在实际开发中,可以根据项目特性和需求选择...

    Extjs4.0+MVC模式+存动态加载

    在这个主题中,我们将深入探讨如何在ExtJS 4.0中结合MVC模式实现动态加载功能。 **MVC模式** MVC模式是一种软件设计模式,它将应用程序分为三个主要部分:模型(Model)、视图(View)和控制器(Controller)。在...

    MVC2 或 MVC3 treegrid 树表 (树状表格) demo

    "MVC2 或 MVC3 TreeGrid 树表 (树状表格) Demo" 提供了一个实用的示例,展示了如何在ASP.NET MVC框架下实现具有层级结构的数据展示。这个Demo适用于那些需要以树形结构展示数据的项目,例如组织结构、产品分类或者有...

    ExtJS4.1实现的mvc模式经典入门案例

    本案例将深入探讨如何使用ExtJS 4.1实现MVC模式。 **一、模型(Model)** 在MVC模式中,模型是应用程序的核心,负责处理数据和业务逻辑。在ExtJS中,`Ext.data.Model`类是创建模型的基础。你可以定义字段(fields...

    学生信息小例子(asp.net mvc 2.0+ext Js 3.2+sql server)

    在这个例子中,EXT JS 被用来构建用户界面,实现与ASP.NET MVC后端的交互,如展示学生信息、执行增删改操作。 【SQL Server】 SQL Server是微软开发的关系型数据库管理系统,广泛应用于企业级数据存储和管理。在本...

    JqGrid控件 MVC 版

    总之,JqGrid控件MVC版为开发人员提供了一套完整的解决方案,用于构建功能丰富的数据表格应用,同时结合MVC模式,实现了良好的数据管理和用户交互。通过深入理解和熟练运用,开发者可以轻松创建出高性能、高交互性的...

    dtree实现的树支持多选

    DTree(通常指的是JavaScript实现的树形控件)允许用户通过勾选节点来实现多选功能,提升了用户在大量数据中的选择效率。以下将详细介绍dtree实现多选树的核心知识点: 1. **DHTML与JavaScript基础**:DTree基于...

    Ext4MVC开发 含treeview 及树单击事件

    通过监听并处理点击事件,我们可以实现当用户选择树节点时触发特定的功能,例如加载子节点、执行查询或跳转到新的页面。 Grid是另一种核心组件,用于显示二维数据表。在数据量较大时,Grid的分页、排序、过滤等功能...

    js树,包括梅子树和其他的相关树资料

    梅子树(Plum Tree)通常是指一种结合了Model-View-Controller(MVC)设计模式的JavaScript树控件。在MVC模式中,模型(Model)存储数据,视图(View)负责展示数据,控制器(Controller)处理用户交互。梅子树控件...

    Spring MVC + Mybatis + zTee 实现一个可增、删、改的无限级树

    5. **前端展示**:前端通常使用JavaScript库(如jQuery,AngularJS或Vue.js)来解析后端返回的树形数据,并渲染成可交互的树状视图。在本项目中,前端可能需要支持节点的拖拽、折叠、展开等操作。 6. **测试与优化*...

    Ztree+treeTable实现 Java实现 树形菜单 树形表格

    Ztree是一款基于JavaScript的树形插件,它提供了丰富的功能和良好的性能,广泛应用于网页端的数据展示。Ztree_v3是其第三个主要版本,具有更多的特性和优化。在Java项目中,我们通常会结合后台服务(如Spring MVC或...

    mvc加载zTree

    “mvc加载zTree”这个标题指出我们将探讨如何在ASP.NET MVC框架下使用zTree,一个流行的JavaScript树形插件。zTree是一个轻量级、可定制且功能丰富的库,常用于构建网站的目录结构、组织树或者层级展示数据。 **...

    史上最完美最简单js树形菜单

    标签中的"dtree"可能指的是DataTree,一个经典的JavaScript树形菜单插件。DataTree支持动态加载、异步数据获取,以及丰富的自定义样式和事件处理。在Struts项目中,我们可以利用Action返回JSON格式的数据,DataTree...

    MVCProject.rar

    MVC模式是一种广泛应用于Web应用程序开发的设计模式,它将应用程序分为三个主要组件:模型(Model)、视图(View)和控制器(Controller)。这种分离使得代码更加模块化,易于维护和扩展。 1. **模型(Model)**:...

    MVC easyui treegrid后台绑定树

    在本例中,我们看到了MVC模式的一个具体实现,即C# MVC框架下结合EasyUI TreeGrid控件的应用。 ### 二、EasyUI TreeGrid简介 **EasyUI**是一个基于jQuery的开源UI库,提供了一套完整的前端组件来帮助开发者快速...

    最新JAVA通用后台管理系统(ext-js,Hibernate,Spring mvc,spring)可用

    1. **Ext-js**:这是一款强大的JavaScript库,主要用于创建用户界面。它提供了丰富的组件库,如表格、表单、树形结构等,可以构建出美观且交互性强的前端界面。在后台管理系统中,Ext-js能够帮助开发者快速构建用户...

    struts简单示例+js树形菜单

    这个项目旨在帮助开发者理解如何在Struts框架下结合JavaScript实现交互式树形菜单,提升用户体验,同时也展示了MVC模式在实际开发中的应用。学习这个示例,可以帮助初学者快速掌握Struts框架和前端动态效果的结合,...

    ASP.NET MVC开发框架

    MVC模式是一种软件设计模式,将应用程序分为三个主要组件:模型(Model)、视图(View)和控制器(Controller)。模型负责数据处理和业务逻辑,视图负责用户界面展示,而控制器接收用户输入并协调模型和视图的交互...

    MVC2.0Demo.rar_mvc_mvc2 demo_treeview mvc2

    **模型(Model)**:在MVC模式中,模型负责管理应用程序的数据和业务逻辑。在本示例中,模型可能包含了用于存储和处理数据的实体类,如数据库中的表映射。开发者可以通过定义这些类来描述业务对象,并在业务逻辑中...

    easyui和mvc

    MVC模式在Web开发中扮演着关键角色,它将应用分为三个主要部分:模型(Model)、视图(View)和控制器(Controller)。模型负责处理数据和业务逻辑,视图负责展示数据,控制器则作为模型和视图之间的桥梁,处理用户...

Global site tag (gtag.js) - Google Analytics