功能簡介

DhtmlxGrid是一個純Js的控件，能幫你把它約定格式的XML數據，在瀏覽器端通過Js渲染成表格。該表格具有以下特性：

支持IE6～9、chrome、firefox

豐富的Js API接口

支持Ajax提供數據源

支持凍結列、服務端排序、用戶調整寬度、列位置調整

支持各種事件

我們基于KissU，對DhtmlxGrid的數據源和使用方式作了封裝，允許您通過Jsp標簽的方式配置Grid，能幫您把指定查詢條件和Sql取到的數據，轉換成DhtmlxGrid所需的格式，并提供給它渲染出來。

運作原理

原始使用方式

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

html頁面

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");

grid_links.xml

John Grisham

Honore de Balzac^http://en.wikipedia.org/wiki/Honore_de_Balzac

Stephen King

Alexandr Pushkin^http://en.wikipedia.org/wiki/Alexander_Pushkin

Michel Oshpic

Lewis Carroll^http://en.wikipedia.org/wiki/Lewis_Carroll

相信您能明白以上代碼的含義，在這個Grid中，有個概念比較重要，那就是列類型，即Type。在setTypes中你可以看到，有列的類型是ro和link，分別表示只讀列和超鏈接列，對于link比較特殊，它link的地址由提供的數據決定，數據里通過“^”符號把數據分段處理，分別表示顯示出來的內容以及link到的地址。其他類型，比如img(圖片)也是類似的道理，都是在返回的數據里需要提供圖片路徑、hint提示以及點擊圖片后的超鏈接地址。列的類型不一樣，table你每個格子的行為也不一樣，具體type的類型在后面會有介紹。

基于KissU.Java封裝

相信您不太愿意每次都寫那么一長串的Js代碼，您項目也不會是靜態的xml文件等著渲染。為止我們作了以下兩個工作便于您更加容易使用：

提供JSP標簽配置Grid，而不是原始的JS編程式；

提供Servlet響應Grid對數據的請求，只要Grid提供SqlId和查詢條件，Servlet能按要求返回所需對應的XML格式數據

請求數據和渲染的過程如下圖所示：

這樣你即可采用下節描述的方式使用DhtmlxGrid

使用步驟

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

下載dhtmlxGrid，把整個目錄拷貝到Web工程的WebRoot/widgets目錄下；

拷貝dhtmlxGrid.tld到WebRoot/WEB-INF/tld目錄下；

打開工程的POM文件，增加對dhtmlxGrid的引用，注意里面的版本要改為最新版本；

bingo.ui

bingo-grid-core

1.0.0

jar

compile

在使用dhtmlxGrid的頁面，還需要引入需要的js和css信息；

在web.xml里面聲明為dhtmlxGrid提供數據的Servlet

GridServlet

bingo.ui.grid.GridServlet

grid_script_path

../../script/dhtmlxGrid/imgs/

GridServlet

/grid/*

打開taglibs.jsp，聲明對dhtmlxGrid標簽的引用

打開applicationContext.xml文件，增加配置，允許通過標注的方式注冊bean： <?xml version="1.0" encoding="UTF-8"?>

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xmlns:context="http://www.springframework.org/schema/context"

xsi:schemaLocation="http://www.springframework.org/schema/beans

http://www.springframework.org/schema/beans/spring-beans-3.0.xsd

http://www.springframework.org/schema/context

http://www.springframework.org/schema/context/spring-context-3.0.xsd"

default-autowire="byName">

class="bingo.integration.spring.PropertyPlaceholderConfigurer">

classpath:config/*.xml

Grid數據導出到Excel文件，服務器端需要設置存放導出文件的臨時目錄，你需要在config.xml中配置：

c:\

最后你可以在Jsp頁面里面配置一個具體的表格了。

總結

以上是生活随笔為你收集整理的dhtmlxgrid导出的js_dhtmlxgrid jsp标签的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。