JSP表格模板升级（2）-- 动态加载v.s.自定义标签初始化表格

        前文《用JSP创建一个表格模板》中，我们已经创建了一个基本的jsp表格模板。这个模板究竟如何使用呢？本文介绍一下笔者用到的两种方式：调用Ajax动态更新页面，或用自定义标签来初始化。

调用Ajax动态更新：

        这是笔者使用的一种基本方式，也是主要方法。前端页面预留一个显示表格的区域或弹框，给用户提供一个触发点，例如一个按钮，点击按钮之后，调用带参数的Ajax请求jsp页面，将正常返回的数据填充到预留的表格区域中即可。

        听起来很复杂的样子对吧？如果你觉得复杂，说明你对jquery不熟悉。运用jquery的load方法，我们可以很容易的实现上面的一系列动作。例如我们在页面上定义一个用于显示表格的div：

<div id=”myTable”></div>

        然后调用load方法来获取并加载一个jsp表格，load的使用可以参考以下两种方式：

//方式一
$(‘#myTable’).load(“_tb2ColParam.jsp?method=maintenanceStatus&zoneid=320200&dateFrom=2012&dateTo=2013”, function(){});
//方式二
$(‘#myTable’).load(“_tb2ColParam.jsp”,{
    ‘method’:’maintenanceStatus’,
    ‘zoneid’:’320200’,
    ‘dateFrom’:’2012’,
    ‘dateTo’:’2013’
    },function(){
	//calls back
    }
);

            如果项目中没有使用jquery的话，对ajax的一般封装总有吧，用ajax请求jsp模板，将正常返回的内容（此处用data表示）填充到表格div即可：

document.getElementById(‘myTable’).innerHTML = data;

             使用这种方式，我们可以很方便地，随时在页面中加载或更新一个表格。

自定义标签：

              利用jquery，我们还可以很方便地用另一种方式加载jsp表格模板：自定义标签，核心代码还是用到了load函数。当然用jquery能实现的东西，我们也可以用原生javascript来实现，具体的写法笔者就不赘述了，有兴趣的读者可以自行研究。需要说明的是，这种方式没有在IE7及更老版本的IE浏览器中进行测试，所以请验证后使用。

        首先我们自定义一个html标签，例如myTb标签，然后指定一些自定义属性，标明我们要请求的jsp模板的路径、参数等：

<myTb url="../segs/_tb2ColParam.jsp" param="method=maintenanceStatus& zoneid=320200&dateFrom=2012&dateTo=2013"></myTb>

            接下来，我们将这个自定义标签放在一个合适的位置，例如放在一个div中：

<div id=”tg_bable”>
	<myTb url="../segs/_tb2ColParam.jsp" param="method=maintenanceStatus&zoneid=320200&dateFrom=2012&dateTo=2013"></myTb>
</div>

           最后，在合适的时机（例如页面加载完成之后）用javascript来初始化并填充表格：

//页面加载完成之后执行
$(function(){
		//遍历页面上的所有自定义标签
	 		$('myTb').each(function(i,e){
				//转换为jquery对象
	 			e = $(e);
//用自定义标签的url属性和param属性调用jsp模板，并填充到父元素中，替换掉自定义标签
	 			e.parent().load(e.attr('url'), e.attr('param'));
	 		});	
});

             核心代码仍然是利用load，需要注意的是，笔者的写法是将表格填充到了自定义标签的父元素中，并替换掉了父元素中的所有子元素，包括自定义标签。所以这种写法应该在自定义标签的外面直接包裹一个专用div。

        此种方式有利于前端界面的模块化，适用于直接用html组织一些固定不变的表格，放在固定位置的自定义标签里，在静态页面加载完毕的时候，统一进行初始化。