GT-Grid高级使用教程

最新推荐文章于 2025-06-27 00:00:00 发布

lishengbo

最新推荐文章于 2025-06-27 00:00:00 发布

阅读量1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JAVA EE 文章标签： json struts function jquery object 数据库

本文链接：https://blog.youkuaiyun.com/lishengbo/article/details/5809884

JAVA EE 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了GT-Grid组件的应用场景和技术细节，包括如何处理弹出窗口返回值及单元格状态显示、自定义渲染HTML元素的方法，以及GT-Grid的常用API和与struts2-json-plugin插件的常见问题解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.1.1. 序言

GT-Grid是一款国人开发的列表显示组件，免费但不开源，由于不开源，GT-Grid中存在一些问题我们无法修改，幸好不是什么大问题。我在下面介绍的代码都来自于浙江移动需求管理平台，由于Word的排版问题，代码格式不是很正确，另外我只写了一部份代码在上面(把所有的代码都罗列出来本是就是一件很难的事情)，大家可以参考RDMP中的源代码。

1.1.2. 弹出窗口返回值，并在单元格右上角显示修改状态

在子窗体中返回数据并修改对应的单元格数据，这时，由于GT-GRID本身没有相应的API来实现，我们需要自己编写代码来实现。

1.1.2.1. 新建子窗体页面

子窗体页面代码可以随便大家怎么写，我主要介绍在父窗体中打开子窗体的代码：

一、父窗体代码：

　　　//接收返回值

returnValue=window.showModalDialog(‘URL’,window,'dialogWidth=305px;dialogHeight=395px;');

//以下代码用来处理字符串

var str=returnValue.replace(/[/r/n]/g,"");

str=str.replace(" ","");

var json=eval("("+str+")");

var tdid="";

var text="";

var strmark="";

var type="";

　　　　　　//遍历JSON

for(var index in json)

{

var value=json[index];

tdid=value.tdId;

text=value.trids;

strmark=value.strmark;

type=value.settype;

if(strmark=="")

{

remarkMap.remove(tdid);

}

//以下值用来保存人员，备注，ID号，以便插入到数据库

//压入备注信息

remarkMap.put(tdid,strmark);

//压入测试人员

dateHashMap.put(tdid, text);

//压入ID号

idMap.put(tdid,tdid);

typeMap.put(tdid,type);

break;

}

//由于grid　API中没有改动CELL值的方法，所以需要手动修改

$("#"+tdid).html(text);

//利用JQUERY删除原有样式

$("#"+tdid).parent().parent(".gt-col-grid1-g_testor").removeClass("gt-col-grid1-g_testor");

//利用JQUERY设置修改后的样式

$("#"+tdid).parent().parent().addClass("gt-col-grid1-g_testor gt-cell-updated");

//设定HTML

$("#div"+tdid).html(strmark);

//删除样式 $("#div"+tdid).parent().parent().removeClass("gt-col-grid1-remark");

//利用JQUERY设置修改后的样式

$("#div"+tdid).parent().parent().addClass("gt-col-grid1-remark gt-cell-updated");

}else{

alert("本开发任务已经分配测试人员");

}

二、子窗体：

　　　//设定返回值

window.returnValue="[{'tdId':'"+tdid+"','trids':'"+strids+"','strmark':'"+strmark+"','settype':'"+settype+"'}]";

window.close();

1.1.3. 自定义渲染HTML元素

GT-Grid可以自定义渲染HTML中的任何一种元素，但前提是必须是HTML元素。

1.1.3.1. 自定义复选框

复选框操作是我们在开发中经常用到的操作，例如批量删除，对修改后的数据进行批量提交等操作。GT-GRID中定义的复选框有两种方式，一种是用GT-GRID自带的属性，一种是调用renderer渲染一个表单元素，这一点非常类似EXT中的元素渲染。

一、使用GT-GRID自带属性设置复选框

isCheckColumn : true

这段代码可以在GRID中显示复选框，并且可以用以下代码取出数据

rows=eval(GT.$json(GT.$grid('grid1').getSelectedRecords()));

并且需要在GT-GRID中加上以下属性,以检查行是否被选中

selectRowByCheck="true"

示例代码：

<g:gt-grid id="grid1" dataset="dsConfig" columns="colsConfig"

loadURL="josn-param-father" saveURL="paramfathersave"

toolbarContent="nav | goto |pagesize |state" remotePaging="true"

toolbarPosition="bottom"

selectRowByCheck="true" width="99%" height="300" />

二、使用renderer渲染表单元素

renderer:function(value, record, columnObj, grid, colNo,rowNo)

{

input="/t<input class='gt-f-check' style='margin-left:2px' name='gt_grid1_chk_id' type='checkbox'></input>";

}

注意：自定义渲染复选框时，一定要在input元素中加上class='gt-f-check'这个样式，否则没法用GT.$grid('grid1').getSelectedRecords()得到所选中的数据

1.1.3.2. 自定义下拉框

GT-GRID自身提供的下拉框有诸多缺陷，例如无法从数据库加截数据，有时候我们需要从数据库取出例如人员之类的信息，这个时候，我们就需要自己来初始化下拉框了。下图是在单元格中显示下拉框。

一、渲染下拉框

我们需要设置一个ID号，这个ID号是数据库中某一个表的主键，当然也可以自已生成

renderer : function(value, record, columnObj, grid, colNo,rowNo) {

return

"<select id='"+record['id']+"'class='gt-editor-text'></select>";

}

二、初始化数据

这里我们从Action里面将数据处理好，可以是一个List，或者是MAP等数据结构。利用JSON_PLUGIN（JSON插件）处理数据后并返回到客户端。我们在数据加载之后调用onComplete这个事件来处理我们的数据

onComplete : function(){

var param={g_system:"${g_system_1}",planDate:"${planDate_1}"};

$.post("planonDate",param,function(obj) {

//遍历集合取出ID，根据这个ID号来得到下拉框

for(var p in idMap.container){

var select=document.getElementById(p);

if(select==null)

{

continue;

}

else

{

updatePlanDate(select,obj);

}

});

}

//实始化GR-GRID数据

function updatePlanDate(select,obj)

{

var attribute = eval('(' + obj + ')');

var planonlineMap = attribute["planonlineMap"];

var waitArrlist = attribute["planDateList"];

var data = "";

for(var index in waitArrlist)

{

var object = waitArrlist[index];

var option=new Option();

option.value=object;

option.text=object;

select.options.add(option);

}

for(var p in dateMap.container)

{

$("#"+p).attr("value",dateMap.get(p));

}

三、取出数据

var rows = eval(GT.$json(GT.$grid('grid1').getSelectedRecords()));

if(rows.length==0)

{

alert("请选择要修改的计划上线时间");

}

else

{

for ( var Object in rows) {

var row = rows[Object];

//利用jquery取出下拉框的数据

　　var value=$ ("#"+row.id).val();

strjsonisOnline = strjsonisOnline + "{ id : '"+ row.id+"', planDate : '"+value+"',planDate_old:'"+row.g_planondate+"'},";

}

1.1.4. GT-GRID常用API

以下API主要用来对Grid的数据进行增删改查，通常需要结合服务器进行操作

GT.$grid("grid1").add(); 增加一行数据

GT.$grid("grid1").reload(); 刷新数据

GT.$grid("grid1").del(); 删除一行数据

GT.$grid("grid1").query(‘参数列表，不需要参数时不写’); 查询数据

GT.$grid("grid1").save(); 保存数据

1.1.5. GT-GRID与struts2-json-plugin插件问题

本平台利用Struts2中的json插件为GR-GRID提供了服务端数据源，在使用中出现了一些问题，我在下面将一一介绍（这些问题是我在实际开发中遇到的）

1.1.5.1. GT-GRID的单元格中空值出现null 字符

该问题是由于struts2-json-plugin插件引起的，该插件已被我修改部份代码并重新编译打包，使用时请使用struts2_json_plugins2.1.8.1.jar 这个版本，否则可能会出现null字符的问题。

1.1.5.2. GT-GRID 500错误

GT-GRID 500错误通常都是由于服务端的代码异常引起的，最常见的问题是由于对MODEL或者是Repository等类或接口进行了序列化，这时候会出现JDBC之类的异常，要查看异常信息，可以在ACTION里将相应的执行方法用try{}catch{}包含进来。这样就可以看到异常信息了。我们强烈建议不要对MODEL和Repository编写get set方法，如果实在有必要，则使用@JSON(serialize=false)标注，注明这个方法不需要序列化。