咸鱼的翻身技术

JAVA/JAVASCRIPT

JS-TREE的设计需求

随着接触的项目越多,接触的树也越来越多,但是并没有一个很诚心合意的Tree
这次公司产品升级,特制定新的Tree的设计需求,如下

一,数据构造方式
1,支持JSP/Webwork/Structs通过遍历构造树数据
2,支持通过AJAX模式,能够解析Array,JSON和XML数据,一次性构造树的数据 V1暂不实现对XML支持
3,支持通过AJAX模式,能够解析Array,JSON和XML数据,多次构造树的数据
二,树和节点的数据模型及方法,以及节点业务数据的关系
1,树需要以下基本属性及方法
  URL : AJAX模式下用 读取数据的后台地址 默认是null 不做读取操作
  LAZY : AJAX模式下用 读取后台数据的方式,TRUE是分批读,FALSE是一次读完,默认TRUE
  POST : AJAX模式下,发送什么样的数据到后台  MAP/JSON/XML 默认MAP
  TYPE : 树的呈现类型  NORMAL 基本树 CHECKBOX 多选树 RADIO 单选树 默认NORAMAL
  SELECTPARENT : 如果是可选树,选择某个节点的时候,判断是否选中所有数据的父节点 默认TRUE
  SELECTCHILD : 如果是可选树,选择某个节点的时候,判断是否选中所有数据的子节点 默认TRUE
  EDITABLE : 是否支持编辑 默认FALSE 暂不实现
  DRAGABLE : 是否支持拖拽 默认TRUE 暂不实现
 
  _DATAS : 存放业务数据的数据
  _READERS : 存放业务数据和树节点数据的映射关系
  _NODES : 存放树节点的JSON数据
 
  addMapper(Mapper mapper) 增加业务数据和树节点映射关系
  addData(Array data/JSON data/XML data) 非AJAX模式增加业务数据
  _addNode(Node node) 往_NODES增加树节点
  removeNode(id/node) 根据node的id或者node自身删除节点
  removeData(Array data/JSON data/XML data) 根据业务数据删除节点

  expand(Node node) 展开node下面所有的节点 如果node为空 展开所有节点
  collapse(Node node) 收缩node下所有节点 如果node为空 收缩所有节点
 
  selectNode() 选择某个节点
  getSelectedNode() 返回选中的节点
  getSelectedNodes() 返回所有选中的节点
  render(el) 在el下面render树
  toString() 获得tree的html代码
 
2,节点需要有以下基本属性及方法
  ID : 唯一标识
  PID : 父节点的唯一标识
  NAME : 节点名称
  TITLE : 节点描述,并作为每个节点的tooltip
  TYPE : 节点类型
  ICON : 图标的属性
  CHECKED : 如果树是个多选树,节点的选中状态 默认false
 
  _el : 绑定的html代码
  _data : 绑定的data数据

  render() 在父节点下面render
  toString() 获得tree的html代码
  destroy() 删除节点时,删除所有相关数据

3,Reader有以下属性和节点 接口类
  ArrayReader 数组的映射类 实现类
  JSONReader json对象的映射类 实现类
  XMLReader xml对象的映射类 实现类

  map : 映射对象
  getNode(data) : 根据不同的对象作的映射



 
 


posted on 2008-10-17 17:26 hopesfish 阅读(728) 评论(0)  编辑 收藏 引用 所属分类: javascript

只有注册用户登录后才能发表评论。