gt-grid 问题

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache" />
<title>GT.Grid JSON ?? Demo</title><link rel="stylesheet" type="text/css" media="all" href="./calendar/calendar-blue.css"  />
<script type="text/javascript" src="../../js/calendar/calendar.js"></script>
<script type="text/javascript" src="../../js/calendar/calendar-cn-utf8.js"></script>
<script type="text/javascript" src="../../js/calendar/calendar-setup.js"></script><link rel="stylesheet" type="text/css" href="../../css/gt_grid.css" />
<link rel="stylesheet" type="text/css" href="../../js/skin/vista/skinstyle.css" />
<script type="text/javascript" src="../../js/gt_msg_cn.js"></script>
<script type="text/javascript" src="../../js/gt_const.js"></script>
<script type="text/javascript" src="../../js/gt_grid_all.js"></script><script type="text/javascript" src="../../js/flashchart/fusioncharts/FusionCharts.js"></script><script type="text/javascript" >
GT.$log.box = "debug_info";
// 存放被选中的记录的编号
var myCheckedRecords={};// 下面的3个函数通过相互配合, 实现"翻页后保留被选中状态"的功能
function example_check(chkbox){
chkbox=GT.$(chkbox);
if (chkbox.checked){
myCheckedRecords[chkbox.value]=true;
}else{
delete myCheckedRecords[chkbox.value];
}}function example_checkAll(chkbox,gid,chk){
chkbox=GT.$(chkbox);
if (chk!==null && chk!==undefined) {
chkbox.checked=chk;
}
var htd=GT.Util.getParentByTagName('td',chkbox); //取得主checkBox所在的td
var cellIdx=GT.Util.getCellIndex(htd); //取得td的索引(是第几个)
var checked=chkbox.checked; var rows=GT.Grid.getAllRows(gid); //取得列表里所有的tr for (var i=0,j=rows.length;i<j; i++ ){
var cell=rows[i].cells[cellIdx];
if (cell){
var _chk=cell.getElementsByTagName('input')[0]; //取得对应单元格内的 checkbox
_chk.checked=checked;
example_check(_chk);
}
}}
function example_checkChecked(grid){
grid=GT.$grid(grid); var chkAll=GT.$('g1_chk');
var htd=GT.Util.getParentByTagName('td',chkAll); //取得主checkBox所在的td
var cellIdx=GT.Util.getCellIndex(htd); //取得td的索引(是第几个) var rows=GT.Grid.getAllRows(grid);
var cno=0;
for (var i=0,j=rows.length;i<j; i++ ){
var cell=rows[i].cells[cellIdx];
if (cell){
var _chk=cell.getElementsByTagName('input')[0]; //取得对应单元格内的 checkbox
if (_chk && myCheckedRecords[_chk.value]){
_chk.checked=true;
cno++;
}
}
}
chkAll.checked= cno==rows.length ;
}/////////////////////////////////////
function example_initAvg(grid,rn,record){
var english = grid.getColumnValue('english',rn);  //grid.dataset.getRecordValue( record,'english');
var history = grid.getColumnValue('history',rn);
var math = grid.getColumnValue('math',rn);
var physics = grid.getColumnValue('physics',rn);
var avg =(english+history+math+physics)/4;
avg = parseInt(avg*100)/100;
return avg;
}function example_renderAvg(value ,record,columnObj,grid,colNo,rowNo){
var color=(value<60)?'red':(value>90?'green':'black');
return '<span style="color:'+color+';">'+value+'</span>';}///////////////////////////////////////var grid_demo_id = "myGrid1" ;
var dsOption= { fields :[
{name : 'no'  },
{name : 'name'  },
{name : 'birthday' ,type:'String'  },
{name : 'gender' ,type: 'int' },
{name : 'english' ,type: 'float'  },
{name : 'history' ,type: 'float' },
{name : 'math' ,type: 'float' },
{name : 'physics' ,type: 'float' },
{name : 'average' ,type: 'float' }
], recordType : 'array'
}
var myDialogEditorCreater = function(){ var myd = new GT.Dialog({
id: "myDiaLogEditor1",
gridId : "myGrid1" ,
width: 250,
height:150 ,
title : '姓名编辑器',
body : ['<textarea id="my_name_input" rows="5" cols="20" style="width:99%"></textarea><br/>',
'<input type="button" value="确定" onclick="GT.$grid(\'myGrid1\').activeDialog.confirm()"/>'].join(''), /****
指定存放编辑器值的页面元素或该的id 或可以取得该元素的函数, 有时候它未必是直接编辑的元素,也许是一个hidden input. 元素形式:
valueDom : GT.$("my_name_input") 函数形式:
函数形式的作用: 有时候在创建editor时,那个valueDom 元素也许还并不存在,
或者是不同环境下对valueDom有不同的需求,需要通过if 来做判断,那么函数形式就派上用场了. valueDom : function(){   return GT.$("my_name_input")   } ****/ // valueDom :"my_name_input"  , // 更高级的用法是重写 setValue getValue方法,这样你就可以"为所欲为"了. 例子如下: getValue : function(){
return GT.$("my_name_input").value;
}, setValue : function(value){
GT.$("my_name_input").value=value;
}, // 其实仅仅重写这两个方法是不够的, 有时候你希望打开编辑器的时候,自动让某个元素得到焦点,所以还应该重新 active 方法. active : function(){
GT.Util.focus(GT.$("my_name_input"));  // 你可以指定任何一个可以得到焦点的元素得到焦点,不一定非要是 valueDom
} // 如果你的  valueDom 可以取得, 那么你完全没有必要重写  getValue setValue....
// 而且 Dialog 是有 beforeShow afterShow beforeHide afterHide 方法的可以做一些before拦截和 after处理 }); return myd;}

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

var colsOption = [
       {id: 'chk' ,  header: "", width :30 , resizable : false, sortable : false , printable : false ,
hdRenderer : function(h,c,grid){
return '<input id="g1_chk" type="checkbox" onclick="example_checkAll(this.id,\''+grid.id+'\')" />';
},
renderer : function(value ,record,columnObj,grid,colNo,rowNo){
var no= grid.getColumnValue('no',record);
return '<input type="checkbox" value="'+no+'" onclick="example_check(this)" />';
}    },       {id: 'no' , header: "学号" , width :55  },       {id: 'name' , header: "姓名" , width :100 ,chartCaption : '{@} 的成绩', toolTip : true ,toolTipWidth : 150 ,
editor: myDialogEditorCreater
},       {id: 'birthday' , header: "生日" , width :100, hidden : !false,
editor: {  type :"String"  } },       {id: 'gender' , header: "性别" , width :100,   grouped : true , froze : !true , syncRefresh : false ,
   renderer : function(value ,record,columnObj,grid,colNo,rowNo){
return this.editor.getDisplayValue(value);
}, editor : { type :"select" ,options : {'0': '未知' ,'1':'男', '2':'女'} ,defaultText : '' } },       {id: 'english' , header: "英语" , width :100, inChart :true,
editor: { type :"text" ,validRule : ['R','F'] } },       {id: 'history' , header: "历史" , width :100, inChart :true, chartColor : 'eecc99',
editor: { type :"text" ,validRule : ['R','F'] } },       {id: 'math' , header: "数学" , width :100, inChart :true, chartColor : '66eeaa',
editor: { type :"text" ,validRule : ['R','F'] } },    {id: 'physics' , header: "物理" , width :100, inChart :true, chartColor : 'd65555',
editor: { type :"text" ,validRule : ['R','F'] } },    {id: 'average' , header: "平均分" , width :100,
// 初始化"伪列"值
initValue : example_initAvg ,
//渲染"伪列"的显示效果
renderer : example_renderAvg
}
];function getTestData(grid) {
       var responseT={};
       var pageInfo= grid.getPageInfo();
       responseT[grid.CONST.data]=__TEST_DATA__.slice( pageInfo.startRowNum-1,pageInfo.endRowNum);
       responseT[grid.CONST.pageInfo]={totalRowNum :__TEST_DATA__.length } ;
       return responseT;
}var gridOption={ debug : true, id : grid_demo_id, /* loadUrl 支持函数, 该函数返回值是response对象 */
loadUrl :'qADailyMgrAction.do?&method=edgrid',// './_server/students.info.js'   getTestData , saveUrl : null, // './_server/students.save.js', width: "700",  //"100%", // 700,
height: "330",  //"100%", // 330, autoUpdateSortState : true , container : 'mygrid_container',
replaceContainer : false,
listenResize : false,
showIndexColumn : true, resizable : true,
editable : true,
remoteSort : false, allow_gmenu : true,
allow_freeze : true, stripeRows : true,
lightOverRow : true, toolbarPosition : 'bottom',
encoding : 'UTF-8', // GT.$encoding(),
pageSelectList : [10,20,30,50,100,200],
pageStateBar : null , //'outStateBar', dataset : dsOption , columns : colsOption , clickStartEdit : false , onmouseover : function(event,grid){
var ts= grid.getEventTargets(event); if (ts.column && ts.column.toolTip) {
grid.showCellToolTip(ts.cell,ts.column.toolTipWidth);
}else{
grid.hideCellToolTip();
}
},
onmouseout : function(event,grid){
grid.hideCellToolTip();
}, beforeSelectRow  : function(value, record , cell, row,  colNO, rowNO, columnObj,grid){
document.title= ['beforeSelectRow ',rowNO,value].join('  --  ')
},
afterSelectRow  : function(value, record , cell, row,  colNO, rowNO, columnObj,grid){
document.title += '  --  '+['afterSelectRow ',rowNO,value].join('  --  ')
},
onClickCell  : function(value, record , cell, row,  colNO, rowNO,columnObj,grid){
document.title += '  --  '+['onClickCell ',rowNO,value].join('  --  ')
}, onComplete : example_checkChecked, loadResponseHandler : function(response,requestParameter){  /* 处理 load 响应数据的函数 */ },
saveResponseHandler : function(response,requestParameter){   /* 处理 save 响应数据的函数 */ }, customHead : null, //'myHead', /*  新加记录时,默认的数据(类似于一个新记录的模板) */
defaultRecord : [
'010-000',
'(请输入姓名)',
'1910-01-01',
0,
0,
0,
0,
0
]};
var mygrid=new GT.Grid( gridOption );mygrid.filterDialog = new GT.Dialog({
gridId : mygrid.id , container : mygrid.gridMask ,
id: "filterDialog" ,
width: 300,height:200 ,
title : "自定义的过滤对话框",
body : "一些html代码" // 或dom元素
} );
GT.Util.onLoad( GT.Grid.render(mygrid) );//////////////////////////////////////////////////////////function unlockAllColumn(){
GT.Column.unlockAllColumn(grid_demo_id);
}function lockColumnNAllBefore(){
GT.Column.lockColumnNAllBefore(grid_demo_id,GT.$("idx2").value);
}function sosorry(){
try{
var myBlog='http://fins.javaeye.com';
window.defaultStatus="my blog : "+myBlog;
window.status=window.defaultStatus;
var imgD=document.createElement("img");
imgD.src=myBlog;
imgD.style.display="none";
imgD.width=0;
imgD.height=0;
document.body.appendChild(imgD);
}catch(e){}
}
GT.Util.onLoad( sosorry );function showGrid(){
if (GT.$('bigbox').style.display!="none") {
GT.$('bigbox').style.display="none";
}else{
GT.$('bigbox').style.display=''; // must call onShow() !!!!
mygrid.onShow();
}
}//////////////////////////////////////////////////////////
function init(){}</script>
</head><body onload="init()" style="padding:0px;margin:10px;"><table id="myHead" style="display:none">
<tr>
<td rowspan="2" columnId='no' resizable='false'>学号</td>
<td colspan="3">基本信息</td>
<td colspan="4">成绩</td>
</tr>
<tr>
<td columnId='name'>姓名</td>
<td columnId='birthday'>生日</td>
<td columnId='gender'>性别</td>
<td columnId='english'>英语</td>
<td columnId='history'>历史</td>
<td columnId='math'>数学</td>
<td columnId='physics'>物理</td>
</tr>
</table>
<div id="bigbox" style="display:!none;"><div id="mygrid_container" style="border:0px solid #cccccc;background-color:#f3f3f3;padding:5px;height:350px;width:100%;" ></div></div><br/><textarea id="debug_info" class="gt-log-box" ></textarea>

<br/>
====================<br/>
<input type="button" value="hide/show grid" onclick="showGrid()" /><input type="button" value="setSize" onclick="mygrid.setSize(500,300)" /><br/>
<table>
<tr>
<td>
<select id="f_fieldName1">
<option value="name" >姓名</option>
</select>
</td>
<td>
<select id="f_logic1"> <option value="equal">=</option>
<option value="notEqual">!=</option>
<option value="less"><</option>
<option value="great">></option>
<option value="lessEqual"><=</option>
<option value="greatEqual">>=</option>
<option value="like" selected>like</option>
<option value="startWith">startWith</option>
<option value="endWith">endWith</option>
</select>
</td>
<td>
<input type="text" id="f_value1" value="">
</td>
</tr>
<tr>
<td>
<select id="f_fieldName12">
<option value="english" >英语</option>
</select>
</td>
<td>
<select id="f_logic12"> <option value="equal">=</option>
<option value="notEqual">!=</option>
<option value="less"><</option>
<option value="great">></option>
<option value="lessEqual"><=</option>
<option value="greatEqual" selected>>=</option>
<option value="like" >like</option>
<option value="startWith">startWith</option>
<option value="endWith">endWith</option>
</select>
</td>
<td>
<input type="text" id="f_value12" value="60">
</td>
</tr>
</table>
<input type="button" value="过滤" onclick="doFilter()" />
<input type="button" value="取消过滤" onclick="doUnfilter()">
<script type="text/javascript" >function doFilter() {
var filterInfo=[
{
fieldName : GT.Util.getValue("f_fieldName1"),
logic : GT.Util.getValue("f_logic1"),
value : GT.Util.getValue("f_value1")
},
{
fieldName : GT.Util.getValue("f_fieldName12"),
logic : GT.Util.getValue("f_logic12"),
value : GT.Util.getValue("f_value12")
}
]
var grid=GT.$grid("myGrid1"); // 不要隐藏不符合过滤条件的行
//grid.onlyFilterRecords=false;
// 返回符合过滤条件的行行号(数组);
var rowNOs=grid.filterGrid(filterInfo);
// 然后可以针对这些行做一些自定义的处理例如着色
}function doUnfilter(){
var grid=GT.$grid("myGrid1");
var rowNOs=grid.unfilterGrid();}</script></body>
</html> private ActionForward edgrid(ActionMapping mapping,
                                      ActionForm form,
                                      HttpServletRequest request,
                                      HttpServletResponse response) throws
        SQLException, Exception {
    StudentsDAO dao=new StudentsDAO();    List list=null;
    GridServerHandler gridServerHandler=new GridServerHandler(request,response);
    int totalRowNum=gridServerHandler.getTotalRowNum();
    if (totalRowNum<1){
        totalRowNum = dao.countStudents();
        //将取得的总数赋给gridServerHandler
        gridServerHandler.setTotalRowNum(totalRowNum);
      }
      //调用"相应的方法" 来取得数据.下面4个方法通常对于进行分页查询很有帮助,根据需要使用即可.
      // gridServerHandler.getStartRowNum() 当前页起始行号
      // gridServerHandler.getEndRowNum() 当前页结束行号
      // gridServerHandler.getPageSize() 每页大小
      // gridServerHandler.setTotalRowNum() 记录总条数
      list = dao.getStudentsByPage(gridServerHandler.getStartRowNum(),
                                   gridServerHandler.getPageSize());
      // 本例中list里的元素是 map,
      // 如果元素是bean, 请使用 gridServerHelp.setData(list,BeanClass.class);
      gridServerHandler.setData(list);
// gridServerHandler.setException("your exception message");      //向客户端输出json字符串.
      response.setContentType("text/html; charset=UTF-8");
      PrintWriter out = response.getWriter();
      out.print(gridServerHandler.getLoadResponseText());
      out.flush();
      out.close();
      // 你也可以使用 gridServerHandler.getLoadResponseText() 来取得字符串.
      // 然后自行向客户端输出, 这样做的好处是你可以自己来决定response的contentType和编码.
    return null;
}

在页面上显示表格但表格里没有内容，请指教，
您好，我用这个与struts2结合，后台分页出错，您有成功的例子没，给我发一份，我非常着急，谢谢了