自己开发的web快速开发平台教程(4)，树形结构(Tree)的使用教程

最新推荐文章于 2024-05-16 09:59:37 发布

java_mars

最新推荐文章于 2024-05-16 09:59:37 发布

阅读量1.7k

点赞数

分类专栏： Java 文章标签： java web 应用

本文链接：https://blog.csdn.net/java_mars/article/details/8869192

版权

Java 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

树形也是很常用的一种数据表现结构，数据表的结构要满足记录主键、父级主键、节点显示字段，这三个字段即可。如下图

"文档档案"的一个表，表示文档的一个目录层次

这三个字段分别是

DOC_ID 主键

DOC_PARENT_ID 父id

DOC_DIR_NAME 档案目录的名称

为了显示这个树，我们得构造一个数据源

	<DataSet author="文档_TREE" name="DocTree" formatdate="" dataset_type="map" return_entity="" params="" params_type="" source="dhx"  put_fields="" return_fields="" >
		select * from lyt_document_dir  
	</DataSet>

这样我们就可以在页面对这个树进行配置了，和之前的教程一样，也是配置出现，代码如下

<BL:Tree  
    id="DocTree"  
    dataset="DocTree"   
    root_id="1" 
    root_text="档案目录" 
    out_fields="DOC_ID,DOC_PARENT_ID,DOC_DIR_NAME" 
    load_all="true" 
    init_tree_lib="true" 
    params="" 
    link_οnclick="go_DocPage" 
    expand_id="1" 
   
    rightmenu="true"
    rightmenu_operate_enitiy="LytDocumentDir"
    rightmenu_delete_checkdataset="DeleteDocTreeCheck">
</BL:Tree>

参数说明

id="DocTree"

>树的id，在页面通过id来引用。

dataset="DocTree"
>树的数据源，就是我们定义的DocTree对应的SQL。

root_id="1"

>树的根节点id。

 root_text="档案目录"

>树的根节点要显示的中文名称。

out_fields="DOC_ID,DOC_PARENT_ID,DOC_DIR_NAME"

>构成树的三个关键字段名称；主id，父id，显示节点字段，顺序不要搞错。

load_all="true"

>是否一次加载树的记录。如果是flase的话，则只展现当前可见范围的记录，即点节点再展现点击节点的树节点记录，用于大数据量的树结构展示。

init_tree_lib="true"

>是否初始化ui支持库。

params=""

>数据源的参数，这里是没有，要和数据源定义的参数名称一样。

link_οnclick="go_DocPage"

>点击节点要执行的js函数，参数是点击节点的id，如这里是 function go_DocPage(nodeId){}

expand_id="1"

>初始化时展开节点为1的所有树节点，这里是从根节点展开，所以是整个树一次性展开。

rightmenu="true"

>树是否支持右键菜单。如下图

rightmenu_operate_enitiy="LytDocumentDir"

>如果设置了支持右键菜单，则要操作的对应实体类名称。

rightmenu_delete_checkdataset="DeleteDocTreeCheck"

>如果设置了支持右键菜单，则要操作删除时，判断是否有子节点的数据源名称，如果存在子节点，则不充许删除。如果不设置这个校验的数据源，则充许随便删除。

如下图

这样我们就配置完成了这个档案目录树，当然具体业务场景有不同配置形式。特别是这个根节点，要非常灵活。平台的树除了支持这样的静态根id配置，还支持动态的根节点配置，这样才能实现不同角色可以浏览不同层次结构的树记录。或省、市、地区等类似多级管理的业务需求。有了这个支持，这个树就能适应不同的业务情况了，即只配置一次，即可根据当前用户的权限来分别展示其权限范围的树形结构。

在这个例子，我们把这个树放在扩展layout单元格b的区域里，加入LayoutItem的设置如下行

         <BL:LayoutItem id="b2" parent_layout_id="c1" title="档案目录树" object_id="DocTree_main" parent_layout_cell="b"></BL:LayoutItem>

如果忘了如何配置Layout，请看教程第一篇。

object_id="DocTree_main"

>把这个树的dom对象放到这个单元格，dom引用规则是树id+"_main"，和Grid一样。

最后的效果如下图

最后整个页面的完整代码如下

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/bl_tag.tld" prefix="BL"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
        <BL:RootBase id="blRoot" valid_login="false"></BL:RootBase>
    <title></title>
	<script type="text/javascript">
		//Grid按钮单击
		 function onBtnClick(_id,grid_object){
		 	if(_id=='moduleTool0'){
		 		//新增
		 		bl_global.grid_addrow(grid_object,['系统名称','0','1']);
		 	}
		 	if(_id=='moduleTool2'){
		 		//保存
		 		bl_global.grid_save(grid_object,true);
		 	}
 		 	if(_id=='moduleTool4'){
 		 		//删除
 		 		var app_id = grid_object.getSelectedRowId();
				var kmap = new keyMap();
				kmap.setValue('APP_ID',app_id); 		 		
 		 		if(app_id!=''&&bl_global.queryDataset('deleteAppCheck',kmap)==''){
				   bl_global.pop_dialog('确定删除已选择记录?','yesno',null,null,null,'bl_global.grid_delete(grid_applicationGrid);','bl_global.dialog_close()');
 		 		}else{
					if(app_id==''){
						bl_global.pop_dialog('请选择应用系统！','warn',null,null,null,'bl_global.dialog_close()',null);
					}else{
						bl_global.pop_dialog('不能删除已经引用的应用系统！','warn',null,null,null,'bl_global.dialog_close()',null);
					} 		 			
 		 		}
		 	}
		 }	
	
	
		 
	</script>
  </head>
  <body id="body_layout">
 
 <BL:Tree  
	id="DocTree"  
    dataset="DocTree"   
    root_id="1"
    root_text="档案目录" 
    out_fields="DOC_ID,DOC_PARENT_ID,DOC_DIR_NAME" 
    load_all="true"
    init_tree_lib="true" 
    params="" 
    link_οnclick="go_DocPage" 
    expand_id="1" 
    rightmenu="true"
    rightmenu_operate_enitiy="LytDocumentDir"
    rightmenu_delete_checkdataset="DeleteDocTreeCheck">
</BL:Tree> 
 
 
  <BL:Grid id="LytXmglPage" 
  primary="PRO_ID"  
  colsort="str,str,str,str,str,str,str,str" 
  headerfields="PRO_NAME,PRO_HTPH,PRO_QD_DATE,PRO_WTDW,PRO_XMBZ_DW,PRO_CD_DW,PRO_START_DATE,PRO_END_DATE" 
  dataset="LytXmglPage" 
  params="PRO_TYPE_ID,PRO_YEAR" 
  colwidths="*,80,80,140,140,140,90,90"
  coltypes="link,ed,ro,ro,ro,ro,ro,ro" 
  valid_cols=",NotEmptyAndExist,ValidInteger,,,,,"
  header="项目名称,合同编号,签订日期,委托单位,项目保证单位,承担单位,开始日期,结束日期" 
  hiddencol="" 
  collink="onViewPro"
  linkindex="PRO_NAME"
  init_grid_lib="true" 
  sub_grid_url=""
  ispage="true"  
  table="LytXmglProject"
  
  defaultsort="PRO_QD_DATE,DESC" >
  </BL:Grid>
 
 
  <BL:Grid  id="applicationGrid" primary="APP_ID" valid_cols="NotEmptyAndExist,," colsort="str,int,long" headerfields="APP_NAME,APP_DEFAULT,APP_PARENT_ID" dataset="app_all_list" colwidths="*,60,30" coltypes="ed,ch,ed"  header="名称,是否默认,d"  hiddencol="APP_PARENT_ID" init_grid_lib="true" ispage="true"  colalign="left,left,center" table="DhxApplication" defaultsort="APP_ID,ASC">
  </BL:Grid>
 
 
<div id="demo_div" >  
  您的大名： <input type="text" style="width: 90px">  
  </div> 
  
  <BL:Layout patterns="3T" parentid="body_layout" id="p" init_layout_jslib="true">
  	<BL:LayoutItem inner_grid_id="LytXmglPage" height="200" id="a1" parent_layout_id="p" title="链接到百度" url="" object_id="LytXmglPage_main" parent_layout_cell="a" statusbar="<font color=red>这是</font>状态栏a"></BL:LayoutItem>
  	<BL:LayoutItem inner_toolbar_id="moduleTool" inner_grid_id="applicationGrid" id="b1" parent_layout_id="p" title="链接到17173.com" url="" object_id="applicationGrid_main" parent_layout_cell="b" >
  	  			<BL:ToolBar  skins="dhx_web"  id="mTool" parentid="" οnclick="onBtnClick" layout_toolbar_id="moduleTool" grid_id="applicationGrid">
		  			<BL:ToolBarItem index="0" name="新增" button_mode="btn" id="moduleTool" icon="new.gif"></BL:ToolBarItem>	
					<BL:ToolBarItem index="1" name="" button_mode="sep" id="moduleTool"></BL:ToolBarItem>	
					<BL:ToolBarItem index="2" name="保存" button_mode="btn" id="moduleTool" icon="save.gif"></BL:ToolBarItem>	
					<BL:ToolBarItem index="3" name="" button_mode="sep" id="moduleTool"></BL:ToolBarItem>	
					<BL:ToolBarItem index="4" name="删除" button_mode="btn" id="moduleTool" icon="att_delete.png"></BL:ToolBarItem>
				</BL:ToolBar>	
  	</BL:LayoutItem>
 	<BL:LayoutItem id="c1" append_layout="true" patterns="3T" parent_layout_id="p" title="<font color=red>加载</font>页面的一个div" parent_layout_cell="c">  
         <BL:LayoutItem id="a2" parent_layout_id="c1" title="子布局" object_id="demo_div" parent_layout_cell="a"></BL:LayoutItem>  
         <BL:LayoutItem id="b2" parent_layout_id="c1" title="档案目录树" object_id="DocTree_main" parent_layout_cell="b"></BL:LayoutItem>  
         
         
    </BL:LayoutItem>  
  </BL:Layout>	  
  </body>
</html>

到这里，我们已经学习了如何配置Layout，Grid，Toolbar，Tree的配置，已经具备了快速搭建项目模块开发的能力

总结一下，需要学习的内容有

1.平台的各个组件标签属性

2.写SQL

3.写JS

应该还是很简单吧，下一篇我们将学习平台的表单Form构建。

java_mars

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
自己开发的web快速开发平台教程(4)，树形结构(Tree)的使用教程

树形也是很常用的一种数据表现结构，数据表的结构要满足记录主键、父级主键、节点显示字段，这三个字段即可。如下图"文档档案"的一个表，表示文档的一个目录层次这三个字段分别是 DOC_ID 主键DOC_PARENT_ID 父idDOC_DIR_NAME 档案目录的名称为了显示这个树，我们
复制链接

扫一扫

专栏目录