T5 技巧 2：为Grid组件的每一行增加“删除/修改”链接。

现在正在使用T5开发一个小项目。 因为现在T5还正处于发展中。 而且没有像T4一样有许多的文档。 和例子(Workbench, Vlib)。 所以我会把在这个开发中遇到的一些问题记录下来。

记得在T4中是使用一组字符串来作为table columns。 为了加上删除/修改按钮的话，我们就只要加上"!operation" 这样的字符串， 然后用block render td就行了。但是到了T5中。 并没有提供这样的属性。

在看了Grid组件的参数后。 我们发现model 这个参数。 毫无疑问这个参数是用来定义Bean中要显示的列， 是否排序， 显示的顺序 等等。  具体可以看org.apache.tapestry.beaneditor.BeanModel。org.apache.tapestry.services.BeanModelSource.  org.apache.tapestry.beaneditor.PropertyModel. 这些接口和他们的实现类。

那我们要怎样增加这样的“删除/修改”列呢？ 因为column必须是要在Bean中的一个property。 所以最直接的方法是在Bean中增加这样的一个假的属性。  比如。

class User {

  private int id;
  private String name;
  
  // add a fake property. However this property shouldn't use except in grid render.
  private String operationColumn;

    
  //...............other properties...........

    //  .................getter/setter methods

}

<t:parameter t:name="operationColumnCell">
					<a t:type="ActionLink" t:id="deleteLink" context="currentRow.id">删除</a>
				</t:parameter>

ok.  这样我们就实现了这个“删除/修改”列。

但是大家可能都会觉得这样不爽。因为operationColumn污染了我们的User类。

下面介绍种不污染的方法。

我们还是要从model这个参数下手。。

我们需要build一个beanModel

package com.javaeye.dengyin2000.gtts.tapestry;



import java.lang.annotation.Annotation;



import org.apache.tapestry.PropertyConduit;



public class OperationPC implements PropertyConduit {

	public Object get(Object arg0) {

		return "";

	}



	public Class getPropertyType() {

		return String.class;

	}



	public void set(Object arg0, Object arg1) {

	}



	public <T extends Annotation> T getAnnotation(Class<T> arg0) {

		return null;

	}

}

public static BeanModel buildDriverBeanModel(BeanModelSource beanModelSource, ComponentResources componentSources){
		if (driverBeanModel == null){
			
			PropertyConduit operationPC = new OperationPC();
			
			driverBeanModel = beanModelSource.create(Driver.class, false, componentSources);
			driverBeanModel.remove("id", "sex", "photo", "address", "sexType", "national");
			driverBeanModel.get("name").label("姓名").order(0);
			driverBeanModel.get("idCard").label("身份证").order(1);
			driverBeanModel.get("telNo").label("电话号码").order(2);
			driverBeanModel.get("carNo").label("车牌号码").order(3);
			driverBeanModel.get("carLong").label("车长（米）").order(4);
			driverBeanModel.get("carWidth").label("车宽（米）").order(5);
			driverBeanModel.get("carHeight").label("车高（米）").order(6);
			
			[color=red][b]driverBeanModel.add("operation", operationPC).label("操作").order(7).sortable(false);[/b][/color]
		}
		return driverBeanModel;
	}

在 page 类。

      @Inject
	private BeanModelSource beanModelSource;
	@Inject
	private ComponentResources componentSources;
        ..........................................
	public BeanModel getDriverBeanModel(){
		return MiscUtils.buildDriverBeanModel(beanModelSource, getComponentSources());
	}   

  

html template:

<table t:id="driverGrid" t:type="Grid" model="driverBeanModel" source="driverSource" row="currentRow" empty="nodata" pagerPosition="bottom" rowsPerPage="12" class="xx">
[color=red][b]				<t:parameter t:name="operationCell">
					<a t:type="ActionLink" t:id="deleteLink" context="currentRow.id">删除</a>
				</t:parameter>[/b][/color]
			</table>

ok。

参考：http://www.nabble.com/T5---Adding-modify-delete-actions-to-a-Grid-t3370935.html#a9379935

评论

12 楼 koda 2007-08-22  

是啊，应该是这样哦:)

那么title文字的定制呢？

11 楼 dengyin2000 2007-08-22  

koda 写道

接下来的定制是：
1). 如何更改默认Title显示
2). 如何定制CSS

在你的页面中覆盖掉tapestry定义的css。 比如：

引用

table.t-data-grid {
border-collapse:collapse;
border-left:1px solid silver;
width:100%;
}

table.t-data-grid thead tr {
background:#990000 url(../images/sprites.gif) repeat-x scroll 0pt -1300px;
color:white;
}

div.t-data-grid-pager span.current {
background:#FFFFFF none repeat scroll 0%;
border:1px solid #CCCCCC;
color:#CCCCCC;
padding:2px 5px;
text-decoration:none;
}

div.t-data-grid-pager a:hover {
background:#CC0000 none repeat scroll 0%;
color:#FFFFFF;
}

div.t-data-grid-pager a {
border:1px solid silver;
color:#CC0000;
font-size:medium;
margin-right:5px;
padding:2px 5px;
text-decoration:none;
}

div.t-data-grid-pager span.current {
border:1px solid silver;
color:black;
font-size:medium;
margin-right:5px;
padding:2px 5px;
text-decoration:none;
}

效果如下：  （上面的示例代码就是来自这个页面。）

10 楼 koda 2007-08-22  

接下来的定制是：
1). 如何更改默认Title显示
2). 如何定制CSS

9 楼 dengyin2000 2007-08-22  

koda 写道

我又去Tapestry5里求证了一下，楼主使用的方式是对的。另外有时我们可能只想显示bean类的某些属性，怎么做？
楼主的做法像这样：
driverBeanModel.remove("id", "sex", "photo", "address", "sexType", "national");
还有一种做法是在bean的getter方法前说明annoation.
@NonVisual
public String getPhoto(.....

相比之下，我觉得楼主的做法更好（集中设定），而且如果bean是hiernate实体类，如果用@NonVisual，必然污染了bean，不好维护。

我确实是因为不想使用NonVisual annoation。 因为如果我有两个table。  一个需要这个属性， 另外一个不需要这个属性的话， 用NonVisual是不行的。。

8 楼 koda 2007-08-22  

我又去Tapestry5里求证了一下，楼主使用的方式是对的。另外有时我们可能只想显示bean类的某些属性，怎么做？
楼主的做法像这样：
driverBeanModel.remove("id", "sex", "photo", "address", "sexType", "national");
还有一种做法是在bean的getter方法前说明annoation.
@NonVisual
public String getPhoto(.....

相比之下，我觉得楼主的做法更好（集中设定），而且如果bean是hiernate实体类，如果用@NonVisual，必然污染了bean，不好维护。

7 楼 dengyin2000 2007-08-22  

koda 写道

我的意思是楼主使用
PropertyConduit接口，他是不是一个内部类阿(tapestry内部的类)
如果是的话，应该有更更好的方法来实现这个功能

			driverBeanModel.add("operation", new PropertyConduit() {
				public Object get(Object arg0) {
					return "";
				}

				public Class getPropertyType() {
					return String.class;
				}

				public void set(Object arg0, Object arg1) {
				}

				public <T extends Annotation> T getAnnotation(Class<T> arg0) {
					return null;
				}
			}).label("操作").order(7).sortable(false);

你的意思是这样？？

我觉得这个应该放到一个static field里面， 以便重用。。

引用

如果你用的正确的接口类，我就越发怀疑起Tapestry5是否违背了其简单性的承诺。

这句是什么意思？  我哪里没有正确使用接口了？？    你在解释下tapestry5的简单性。

6 楼 koda 2007-08-22  

我的意思是楼主使用
PropertyConduit接口，他是不是一个内部类阿(tapestry内部的类)
如果是的话，应该有更更好的方法来实现这个功能

5 楼 hitalang 2007-08-22  

谢谢,期待好文ing

4 楼 dengyin2000 2007-08-21  

koda 写道

我不确信你是否调用了Tapestry的内部类。如果你用的正确的接口类，我就越发怀疑起Tapestry5是否违背了其简单性的承诺。

什么意思？  直接点。。

3 楼 koda 2007-08-21  

我不确信你是否调用了Tapestry的内部类。如果你用的正确的接口类，我就越发怀疑起Tapestry5是否违背了其简单性的承诺。

2 楼 dengyin2000 2007-08-21  

biaoming 写道

我也在T5的分页列表,这个方法对我非常有用,但是能不能实现通过一个复选框组,如标个全选的呢?

你看看T4的 checkboxGroup。  基本上都是一样的吧。

在你的bean中加一个boolean selected  然后用checkbox binding到这个属性。。

1 楼 biaoming 2007-08-21  

我也在T5的分页列表,这个方法对我非常有用,但是能不能实现通过一个复选框组,如标个全选的呢?