LEAP框架開发使用指南-选择树控件.doc

LEAP框架开发使用指南-选择树控件 SELECT d.resid ID, d.NAME,d.presid PID,d. NAME DETAIL FROM rims_duty d order by d.seq 查询数据如下： 图1 树型数据列表 将上述SQL添加至对应SQL配置文件如下： !-- 岗位树 -- entry key=sys_rims.duty.tree ![CDATA[SELECT d.resid ID, d.NAME,d.presid PID,d. NAME DETAIL FROM rims_duty d order by d.seq ]] /entry 第二步：树型标签使用 图2 树型效果 上图包含树型控件的两个使用案例：一般树和复选选择树； 一般树的使用：当点击中某一节点，触发一个Action动作，同时传入该节点的ID和NAME； 标签使用： div class=treecss div t:stree sqlId=sys_rims.duty.tree action=doAction rootValue=0 showType=simple cascade=false rootName=华泰联合证券大研究体系 /t:stree /div /div 显然div class=treecss /div定义了该树所在页面区域的CSS风格，一般定义其背景颜色和高度宽度等，标签t:stree /t:stree才是形成树的标签，属性sqlId的值sys_rims.duty.tree对应SQL配置文件中entry /entry所对应的key=sys_rims.duty.tree，属性action的值doAction对应触发的JS函数function doAction(){},属性showType的值simple标识该树为一般树，其有两个选择另一个为chehck标识为复选选择树，cascade=false表示当前不支持级连选择，即选择父节点同时选中其所有子节点，一般在选择树里使用该属性，rootValue和rootName分别表示其根节点的值和显示名称，根节点的ID值应与SQL里的根节点ID值对应一致；上述标签即可形成一般树如下图所示： 图3 一般树效果 节点ID和NAME值的获取： 以点击上树某一节点触发相应JS函数doAction为例： function doAction(id,type){ var _id =id; var _node = rims.tree.getSelectedNode(); var _name = _node.text; …… …… } 对于一般树的ID可以直接通过参数传递获取，只需要将该函数方法定义为function doAction(id,type){} 即可，其中id即为当前节点值，通过var _node = rims.tree.getSelectedNode()来获取当前点击的节点id，通过_node.text来获取选中节点的显示名称name，参数type为扩展字段对应SQL里的detail在某些情况下可以用来做控制参数使用。例如类型选择等等； 复选选择树的使用： div class=treecss div t:stree sqlId=sys_rims.duty.tree checkedValue =%=dutyID % rootValue=0 showType=check cascade=false rootName=华泰联合证券大研究体系 /t:stree /div /div 标签使用：如上所示，改变属性showType值为check，默认checkedValue =%=dutyID %值为空，为一空的选择树，若对其赋值则勾选相应节点，赋值格式为一id字符串的拼凑以逗号隔开，如“10001,10002,10003”,复选树如下图所示： 图4 复选树效果 复选树勾选节点值的回传：上图定义了两个按钮“保存”和“关闭”，如下： div align=center input type=button value=保存 class=inputcss1 onclick=showSelectedNode()/ input type=button value=关闭 class=inputcss1 onclick=window.close()/ /divshowSelectedNode()对勾选的节点值进行传递处理如下： function showSelectedNode(){ var selectedNode = getTreeRoot().getSelecte