JAVA开发-选择树控件

LEAP框架-选择树控件使用指南 LEAP框架开发使用指南-选择树控件 第一步：树型SQL拼写规则 为形成一棵树且支持多级，需要必须对每一个树型节点定义其当前节点值（ID）、父亲节点值（PID），以及节点显示名称（NAME）；如下示SQL： SELECT d.resid ID, d.NAME,d.presid PID,d. NAME DETAIL FROM rims_duty d order by d.seq 查询数据如下： 图1 树型数据列表 将上述SQL添加至对应SQL配置文件如下： 第二步：树型标签使用 图2 树型效果 上图包含树型控件的两个使用案例：一般树和复选选择树； 1）​ 一般树的使用：当点击中某一节点，触发一个Action动作，同时传入该节点的ID和NAME； a)​ 标签使用： 显然定义了该树所在页面区域的CSS风格，一般定义其背景颜色和高度宽度等，标签 才是形成树的标签，属性sqlId的值"sys_rims.duty.tree"对应SQL配置文件中 所对应的key="sys_rims.duty.tree"，属性action的值"doAction"对应触发的JS函数function doAction(){},属性showType的值"simple"标识该树为一般树，其有两个选择另一个为"chehck"标识为复选选择树，cascade="false"表示当前不支持级连选择，即选择父节点同时选中其所有子节点，一般在选择树里使用该属性，rootValue和rootName分别表示其根节点的值和显示名称，根节点的ID值应与SQL里的根节点ID值对应一致；上述标签即可形成一般树如下图所示： 图3 一般树效果 b)​ 节点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在某些情况下可以用来做控制参数使用。例如类型选择等等； 2）​ 复选选择树的使用： a)​ 标签使用：如上所示，改变属性showType值为"check"，默认checkedValue ="<%=dutyID %>"值为空，为一空的选择树，若对其赋值则勾选相应节点，赋值格式为一id字符串的拼凑以逗号隔开，如“10001,10002,10003”,复选树如下图所示： 图4 复选树效果 b)​ 复选树勾选节点值的回传：上图定义了两个按钮“保存”和“关闭”，如下： 当点击“保存”按钮，触发JS函数showSelectedNode()对勾选的节点值进行传递处理如下： function showSelectedNode(){ var selectedNode = getTreeRoot().getSelected(); DutyService.saveDutyUserByDutyIdsService(_id, getCheckValues()+'', function(){ var obj = window.dialogArguments; window.close(); obj.rimsusergrid.reload() ;//父面的一个列表重载 }); } 因上复选树是以模式对话框形式打开，所以勾选相应节点后，通过getCheckValues()方法获取勾选节点值，然后可以调用DWR方法对勾选节点值处理后，将结果回传父页面，下面简单介绍模式对话框配合复选树的使用。 c)​ 模式对话框配合复选树的使用： 父页面触发复选树弹出的JS函数： function selectUserDuty(val){ var sFeatures = 'dialogWidth:310px;dialogHeight:310px;'; var url='${path}/sys/userdutytree.jsp'; var tempReturnValue=showModalDialog(url,window,sFeatures); } 弹出子页面回传函数： Function returnResult(){ var obj = window.dialogArguments; window.close(); obj.rimsusergrid.reload() ;//父面的一个列表重载 } 其中，url对应包含上述复选树标签的树页面，完成相应勾选操作后重载父页面。