dhtmlxgrid jsp标签

功能简介

DhtmlxGrid是一个纯Js的控件，能帮你把它约定格式的XML数据，在浏览器端通过Js渲染成表格。该表格具有以下特性：

• 支持IE6～9、chrome、firefox
• 丰富的Js API接口
• 支持Ajax提供数据源
• 支持冻结列、服务端排序、用户调整宽度、列位置调整
• 支持各种事件

我们基于KissU，对DhtmlxGrid的数据源和使用方式作了封装，允许您通过Jsp标签的方式配置Grid，能帮您把指定查询条件和Sql取到的数据，转换成DhtmlxGrid所需的格式，并提供给它渲染出来。

运作原理

原始使用方式

dhtmlxGrid能把指定规格的xml在前端渲染成html table，原始的使用方式如下：
html页面

<div id="gridbox" style="width:503px;height:120px;background-color:white;"></div>
<script>
          mygrid = new dhtmlXGridObject('gridbox');
          mygrid.setImagePath("../../codebase/imgs/");
          mygrid.setHeader("Author,Title");
          mygrid.setInitWidths("150,150");
          mygrid.setColAlign("left,left");
          mygrid.setColTypes("ro,link");
          mygrid.setColSorting("str,str");
          mygrid.setSkin("dhx_skyblue");
          mygrid.init();
          mygrid.loadXML("../common/grid_links.xml");
</script>

grid_links.xml

<rows>
	<row id="1">
		<cell>John Grisham</cell>
		<cell>Honore de Balzac^http://en./wiki/Honore_de_Balzac</cell>
	</row>
	<row id="2">
		<cell>Stephen King</cell>
		<cell>Alexandr Pushkin^http://en./wiki/Alexander_Pushkin</cell>
	</row>
	<row id="3" selected="1">
		<cell>Michel Oshpic</cell>
		<cell>Lewis Carroll^http://en./wiki/Lewis_Carroll</cell>
	</row>
</rows>

相信您能明白以上代码的含义，在这个Grid中，有个概念比较重要，那就是列类型，即Type。在setTypes中你可以看到，有列的类型是ro和link，分别表示只读列和超链接列，对于link比较特殊，它link的地址由提供的数据决定，数据里通过“^”符号把数据分段处理，分别表示显示出来的内容以及link到的地址。其他类型，比如img（图片）也是类似的道理，都是在返回的数据里需要提供图片路径、hint提示以及点击图片后的超链接地址。列的类型不一样，table你每个格子的行为也不一样，具体type的类型在后面会有介绍。

基于KissU.Java封装

相信您不太愿意每次都写那么一长串的Js代码，您项目也不会是静态的xml文件等着渲染。为止我们作了以下两个工作便于您更加容易使用：

1. 提供JSP标签配置Grid，而不是原始的JS编程式；
2. 提供Servlet响应Grid对数据的请求，只要Grid提供SqlId和查询条件，Servlet能按要求返回所需对应的XML格式数据

请求数据和渲染的过程如下图所示：

这样你即可采用下节描述的方式使用DhtmlxGrid

使用步骤

通过以下几步，您可以在KissU.Java的工程中使用DhtmlxGrid：

1. 下载dhtmlxGrid，把整个目录拷贝到Web工程的WebRoot/widgets目录下；
   
2. 拷贝dhtmlxGrid.tld到WebRoot/WEB-INF/tld目录下；
3. 打开工程的POM文件，增加对dhtmlxGrid的引用，注意里面的版本要改为最新版本；

     <dependency>
   	  <groupId>bingo.ui</groupId>
   	  <artifactId>bingo-grid-core</artifactId>
   	  <version>1.0.0</version>
   	  <type>jar</type>
   	  <scope>compile</scope>
     </dependency>
   

4. 在使用dhtmlxGrid的页面，还需要引入需要的js和css信息；

   <ui:combine widgets="dhtmlxgrid"></ui:combine>
   

5. 在web.xml里面声明为dhtmlxGrid提供数据的Servlet

   <!-- 配置Grid必须的Servlet -->
   <servlet>
   	<servlet-name>GridServlet</servlet-name>
   	<servlet-class>bingo.ui.grid.GridServlet</servlet-class>
   	<init-param>
   		<param-name>grid_script_path</param-name>
   		<param-value>../../script/dhtmlxGrid/imgs/</param-value>
   	</init-param>
   </servlet>
   
   <servlet-mapping>
   	<servlet-name>GridServlet</servlet-name>
   	<url-pattern>/grid/*</url-pattern>
   </servlet-mapping>
   

6. 打开taglibs.jsp，声明对dhtmlxGrid标签的引用

   <%@ taglib prefix="dg" uri="http://www./dhtmlxgrid.tld"%>
   

7. 打开applicationContext.xml文件，增加配置，允许通过标注的方式注册bean：

       <?xml version="1.0" encoding="UTF-8"?>
   
   <beans xmlns="http://www./schema/beans"  
          xmlns:xsi="http://www./2001/XMLSchema-instance"  
          xmlns:context="http://www./schema/context"  
          xsi:schemaLocation="http://www./schema/beans   
              http://www./schema/beans/spring-beans-3.0.xsd  
              http://www./schema/context  
              http://www./schema/context/spring-context-3.0.xsd"
          default-autowire="byName"> 
   	<!-- 属性文件读入 -->
   	<bean id="propertyConfigurer"
   		class="bingo.integration.spring.PropertyPlaceholderConfigurer">
   		<property name="propertiesPersister">
   			<bean class="bingo.common.core.spring.SpringPropertiesPersister"></bean>
   		</property>
   		<property name="locations">
   			<list>
   				<value>classpath:config/*.xml</value>
   			</list>
   		</property>
   	</bean>
   	
   	<context:annotation-config/>
   	
   	<context:component-scan base-package="bingo" />  
   </beans>
   

8. Grid数据导出到Excel文件，服务器端需要设置存放导出文件的临时目录，你需要在config.xml中配置：

   <!--DhtmlxGrid导出Excel文件的临时目录-->
   <entry key="Profile.DhtmlxGrid.Export_Excel_Path">c:\</entry>
   

9. 最后你可以在Jsp页面里面配置一个具体的表格了。

   <!-- 数据列表 -->
   <div class="datagrid" id='aip_system_function_div'>
   	<dg:grid container="aip_system_function_div" id="aip_system_function_grid">
   	        <dg:datasource selectSqlId="function.list" fixedQueryCondition="{type:'Page',parentId:'${param.parentId}'}"></dg:datasource>
   		<dg:operationColumn>
   		        <dg:action label="修改" onClick="updateFunction" id="update_menu" icon="/images/ico_edit.gif"></dg:action>
   			<dg:action label="删除" onClick="deleteFunction" id="delete_menu" icon="/images/ico_del.gif"></dg:action>
                   </dg:operationColumn>
   		<dg:column id="ID" width="0" header="功能ID" isKey="true"></dg:column>
   		<dg:column id="NAME" width="17" header="功能名称"></dg:column>
   		<dg:column id="CODE" width="20" header="功能代码"></dg:column>
   		<dg:column id="PARENT_NAME" width="12" header="所属模块"></dg:column>
   		<dg:column id="PARENT_ID" width="0" header="所属模块ID"></dg:column>
   		<dg:column id="URL" width="43" header="访问地址"></dg:column>
   	</dg:grid>
   </div>