自己开发的web快速开发平台教程(3)，工具条(Toolbar)的使用教程

最新推荐文章于 2021-06-18 18:01:56 发布

java_mars

最新推荐文章于 2021-06-18 18:01:56 发布

阅读量1.4k

点赞数

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

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

版权

Java 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

接上一篇，工具条(toolbar)是做什么用的，就不详说了。到目前这止，我们不需要写一行js，一行java代码，通过配置就实现了布局(layout)、列表(grid)的展现。好，这时我们要给它加上操作，这个角色就是toolbar来承担，下面是这实例，这个实例接着前二篇继续编写。

现在我要操作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>

然后在layout的b单元格上配置

<BL:LayoutItem inner_toolbar_id="moduleTool" inner_grid_id="applicationGrid" id="b1" ......

说明

inner_toolbar_id="moduleTool"

>此单元格内生成id名字为moduleTool的toolbar对象

最后生成的界面如下图

工具条的属性就比较简单了，说明如下

<BL:Toolbar .... 主配置

skins="dhx_web"

>皮肤，基本平台的每个控件都有这个属性。方便换皮肤。

id="mTool"

>id，此工具条的id，以后通过这个id来引用工具条对象

parentid=""

>父容器的id，与grid类似，toolbar可以附着于页面内的任一html容器元素内，一般可以用div,td,span等，看你自己需要了。在这里因为是附着于layout的单元格内，所以就不用设置，得用layout_toolbar_id这个属性。

οnclick="onBtnClick"

>定义工具条的单击js事件函数，然后得自己实现这个 function onBtnClick(btnId){}，这个等下再说明怎么实现。

layout_toolbar_id="moduleTool"

>指定该单元格生成工具条的引用id，见前面的parentid。

grid_id="applicationGrid"

>指定这个工具条要操作的列表(grid)。这里写前面配置列表的id。

<BL:ToolbarItem ....每个按钮的配置

index="0"

>按钮的索引号。

 name="新增"

>显示的名称。

button_mode="btn"

>按钮的模式，btn=按钮，sep＝分隔符，opt=下拉，txt=一个textbox，输入框。

id="moduleTool"

>与toolbar主配置对应。

 icon="new.gif"

>按钮的图标，平台的图标放到指定的图标目录后，就只用写图片的名字就行了。可以是gif,png,jpg等，网页能显示的图形文件都可以。

下面我们要实现按钮的单击操作，前面我们说过，要自己实现这个js函数，代码如下

<script>
	//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>

下面对上边的代码进行一一说明

bl_global ->是平台的一个页面全局对象，在用平台开发时，即可使用，不用自己声明。

写的模式全是 bl_global.方法名(参数1,参数n)

按照以前的经验，平台在项目一般开发只用掌握20多个这样的方法即可。学习也比较容易。

代码说明：

function onBtnClick(_id,grid_object){

>单击事件的声明，_id=传递过来按钮的id；grid_object=传递过来对应要操作的grid对象，直接用就可以了，已经是要操作的grid。

if(_id=='moduleTool0'){

>判断是点了哪个按钮，组成方式为toolbar的id加索引号，这里就是 moduleTool0(点了新增)，moduleTool1(点了保存)，moduleTool2(点了删除)。

    bl_global.grid_addrow(grid_object,['系统名称','0','1']);

>对指定的grid新增一行记录，grid_object=要操作的grid对象，['系统名称','0','1']=新增时，每一列对应的默认值，这个例子，有三列，分别是"名称,是否默认,上一级的id"。

在这里，我们注意到第二列的类型是ch，表明是一个checkbox类型列，checkbox类型列，只有二个值，一个是0，一个是1。0表示未选中，1表示选中。所以我的设置是0，大家可以根据不同的业务场景来设置不同的默认值，或者是不设置。执行效果如下图

我们看到第一行，数据已经新增了一行，第二列的checkbox是没有选中的，如果设置为1，则就会是选中的状态。

但此时是没有保存到数据库的，所以第二个按钮，就是做保存的操作。

if(_id=='moduleTool2'){
		 		//保存
		 		bl_global.grid_save(grid_object,true);
		 	}

>保存事件，grid_object=要保存的grid对象，true=保存时是否要校验grid单元格值的合法性。true要校验，false不要校验。

前面我们设置了第1个列的校验规则是

valid_cols="NotEmptyAndExist,,"

不能为空，且不能名称重复。如果我输入为空，保存时就会如下图

我们看到，没通过的单元格内，会有一条红色的底线，表明这个单元格输入不合法，不充许保存；

如果我们输入的值有重复，如"进销存系统"，就是已有的数据，也会是这个效果。

如果我们输入的校验通过，则会提示如下图

表明这个输入已经存入到数据库了，但是我们都没写到一行java代码，而保存是一般是通过后台java类实现的，这怎么回事呢，关键在于

<BL:Grid ...... table="LytXmglProject" ...

这个配置

table=要更新的实体表的名称

加了这个配置，就可以自动完成对该表的新增、更新、删除操作了。

最后我们再看删除的代码。

var app_id = grid_object.getSelectedRowId();

>取得当前选择行的主键值。

var kmap = new keyMap();

>构造一个hashmap

kmap.setValue('APP_ID',app_id);

>把值set入

bl_global.queryDataset('deleteAppCheck',kmap)

>执行查询数据集(SQL)，deleteAppCheck=数据源的名称，这个SQL是判断这个记录是否已经被别的表引用。根据业务场景而定。kmap=要查询的参数值对象，有了这个我们就不用去构造 url='a=1&b=c&d=0'　这样的东东了，只要按这个函数执行即可，参数就会自动传入到后台。

 bl_global.pop_dialog('确定删除已选择记录?','yesno',null,null,null,'bl_global.grid_delete(grid_applicationGrid);','bl_global.dialog_close()');

>如果校验通过，选了记录而没有被引用，则弹出提示对话框

   1)确定删除已选择记录?

显示的提示文本。

   2) 'yesno'

对话框的模式为确定按钮和取消按钮。

   3)'bl_global.grid_delete(grid_applicationGrid);','bl_global.dialog_close()'

点击确定时，执行删除方法；点击关闭时，执行对话框关闭方法。

其他的对话框提示也差不多，只不过校验不通过时，给出另一个提示，并且只有确定按钮。

到现在为止，已经简单的说明了平台的三个比较常用组件的用法，基本都是配置完成，但还是很基本的一般业务场景，具体更为复杂的业务场景也可以实现，但写不了这么多。如果在使用过程中有什么问题可以问我。

总结一下，现在该例子的所有代码如下

<%@ 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: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"
  onrow_dblclick="onsk"
  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>  
  </BL:Layout>	  
  </body>
</html>

提示一下，所有的平台标签属性在eclipse工程中，可以通过把光标定位到指定的<BL:XXXX 内，再按　ALT+/　即可自动弹出该标签的所有配置属性，大家不需要去记这些属性怎么写，只需要学习这些属性有什么用，怎么配置即可。

下一篇教程我将讲述树形Tree的使用。