GTGrid使用总结一
GTGrid的好处有
1列表中的列表宽度可以拖动,系统会自动记录您拖动的宽度。
2.可通过列表左下角的按钮进行隐藏列等操作 这个是自己写的方法
3可通过在列头上按下ctrl键拖动鼠标来移动列的显示顺序。
4 相比较EXtjs 它的兼容性以及性能 好
初始化加载方法的是
$(function(){
GTGrid.init();
});
//GT.Grid一些方法 开始
//GTGrid.grid.reload(); //重新请求数据方法
//GTGrid.grid.setSize("100%",$(window).height()-60,true)//设置高度
GTGrid.grid.navigator.pageInfo.pageNum=1 //切换用例时,定义到第一页
var record=GTGrid.grid.getRecord(recordOrRowNo); //通过行号获取排序后的某行的数据
GTGrid.grid.setColumnValue("DODATE",recordOrRowNo,"")//设置或者获取某行某个字段的值
GTGrid.grid.dataset//获取gridDataSet视图
GTGrid.grid.dataset.data[recordOrRowNo]["DODATE"]//设置或者获取视图某行某个字段的数据
GTGrid.grid.refresh()//刷新
GTGrid.afterRefresh=function(){ }//刷新后的方法
for(var i=0;i<GTGrid.grid.dataset.data.length;i++) //遍历行数据
{
record=GTGrid.grid.dataset.data[i];
}
$(GTGrid.grid.gridTable).click(function(event)//行点击事件
//GT.Grid一些方法 结束
var GTGrid={ //视图
grid:null, //gt Grid
gridMenu:null,
loadFields:{}, //加载的字段
extendFields:[], //提高渲染扩展字段
init:function(){
var extendinfo=$("#hidExtendinfoJson").val();
var infoJson=$.parseJSON(extendinfo);
var setupColumnsText=$.cookie("hiddenColumns"); //读取列用户配置信息
var setupColumns={};
//1.5.3 验收修改 自定义字段不启用时,不加入grid 开始
if(infoJson.enabled!=1)
{
var cols=[];
for(var i=0,item;i<ColumnsConfig.length;i++)
{
item=ColumnsConfig[i];
switch(item.id)
{
case "CUSTOM_FIELD1":
case "CUSTOM_FIELD2":
case "CUSTOM_FIELD3":
case "CUSTOM_FIELD4":
case "CUSTOM_FIELD5":
break;
default:
cols.push(item);
break;
}
}
ColumnsConfig=cols;
}
if(setupColumnsText!=null && setupColumnsText!="")
{
setupColumns=$.parseJSON(setupColumnsText);
// 检查cookie 值 的正确性 开关自定义字段cookie 存的列数不一致则忽略 cookie
var count=0;
for(var key in setupColumns)
{
count++;
}
if(count!=ColumnsConfig.length) // 忽略 cookie
{
setupColumns={};
}
}
//1.5.3 验收修改 自定义字段不启用时,不加入grid 结束
var NewColumnsConfig=new Array(ColumnsConfig.length);
for(var i=0,item,itemSetUp;i<ColumnsConfig.length;i++)
{
item=ColumnsConfig[i];
switch(item.id)
{
case "CUSTOM_FIELD1":
case "CUSTOM_FIELD2":
case "CUSTOM_FIELD3":
case "CUSTOM_FIELD4":
case "CUSTOM_FIELD5":
if(infoJson.enabled==1){ //启用扩展字段
item.header=infoJson[item.id]; //设置标题
}
break;
default:
break;
}
itemSetup=setupColumns[item.id];
if(itemSetup){
item.hidden=itemSetup["h"]==1 ? true: false; //设置该列是否隐藏
if(itemSetup["w"]>0)
item.width=itemSetup["w"]; //设置该列宽度
NewColumnsConfig[itemSetup["i"]]=item; //设置index
}else{
NewColumnsConfig[i]=item;
}
} //for
ColumnsConfig=NewColumnsConfig;
GTGridConfig.columns=NewColumnsConfig;
//1.5.3 重写显示隐藏列功能
var self=this;
GT.ToolFactroy.register(
'mybutton', //按钮的标识 (请使用全小写字母)
{
cls : 'mybutton-cls gt-tool-gridmenu',
// 按钮的提示信息
toolTip : '显示/隐藏列',
text:"显示/隐藏列" ,
action : function(event,grid) { // 点击按钮时 执行的动作
self.showOrHideColumns();
}
}
);
this.grid=new GT.Grid(GTGridConfig);
GT.U.onLoad( GT.Grid.render(this.grid) );
//添加 显示/隐藏列 文本
GT.U.onLoad(function(){
//6396000241 张恒辉 1.5.3验收问题修改
$(".mybutton-cls").parent("a").after("<span id='mybuttonCls' style='color:#F00'>显示/隐藏列</span>");
$("#mybuttonCls").click(GTGrid.showOrHideColumns)
});
$(window).bind("beforeunload",this.beforeunload);
},//init
refresh:function(){
GT.Grid.render(this.grid);
},
afterRefresh:null,
setupColumns:function(){ //记录隐藏列到cookie
//简化存到cookie 的值 i=index w=width h=hidden
var setup="{";
var item;
for(var i=0;i<GTGrid.grid.columnList.length;i++)
{
item=GTGrid.grid.columnList[i];
setup+="\""+item.id+"\":{"
setup+="\"i\":"+i+",";
setup+="\"h\":"+(item.hidden ? 1:0)+",";
var colWidth=0;
if(isNaN(item.width))
colWidth= parseInt(item.width.substring(0,item.width.length-2));
else
colWidth=item.width;
setup+="\"w\":"+colWidth; //w 代替 width
setup+="},"
}
if(setup.indexOf(',')>0)
setup=setup.substring(0,setup.length-1);
setup+="}"
$.cookie("hiddenColumns",setup,{ expires: 30});
},
beforeunload:function(){ //注销触发
if(GTGrid.grid)
{
GTGrid.setupColumns();
}
},
showOrHideColumns:function(){ //显示隐藏列
if(GTGrid.gridMenu==null){
GTGrid.gridMenu=new MyGTDialog("MyGTDialog",GTGrid.grid,true,
function(grid,changMap){
var displayField={};
for(var key in changMap){ //获取改变为显示列的字段
if(!changMap[key]){ //列显示
// displayField[grid.columnMap[key].fieldName]=1;
switch(key)
{
case "chk":
displayField["IFLAST"]=1;
break;
case "RowIndex":
case "linkAnnex":
break;
case "DOSTATUS":
case "TESTDODESC":
case "BORROW_COPY_STATUS":
case "GRAND_TOTAL_DO_TIME":
displayField[key]=1;
break;
break;
case "ECNUMBER":
displayField[key]=1;
displayField["ECID"]=1;
break;
case "CASENO":
displayField[key]=1;
displayField["OBJECTID"]=1;
break;
case "Operation":
displayField["TESTSETID"]=1;
displayField["SHOW_MODEL"]=1;
displayField["ECNUMBER"]=1;
displayField["ECID"]=1;
displayField["OBJECTID"]=1;
displayField["IFLAST"]=1;
break;
default:
displayField[key]=1;
break;
}
}
}
var isReload=false;
for(var key in displayField) //比较加载字段和改变为显示列的字段
{
if(GTGrid.loadFields[key]==undefined)
{
isReload=true;
break;
}
// self.loadFields[key]=displayField[key];
}
if(isReload)
grid.reload(); //重新加载数据
});
}
GTGrid.gridMenu.show();
}, //showOrHideColumns
getDisplayColumnAndField:function(columnInfo){ //获取列显示需要的字段,和列id
var displayColumns={"TESTDOID":1,"CASEID":1}; //TESTDOID,CASEID 是必须读取的字段
var extendField=[];
var col;
for(var i=0;i<columnInfo.length;i++)
{
col=columnInfo[i];
if(!col.hidden)
{
switch(col.id)
{
case "chk":
displayColumns["IFLAST"]=1;
extendField.push(col.fieldName);
break;
case "RowIndex":
case "linkAnnex":
extendField.push(col.fieldName);
break;
break;
case "DOSTATUS":
case "TESTDODESC":
case "BORROW_COPY_STATUS":
case "GRAND_TOTAL_DO_TIME":
displayColumns[col.id]=1;
extendField.push(col.fieldName);
break;
break;
case "ECNUMBER":
displayColumns[col.id]=1;
displayColumns["ECID"]=1;
extendField.push(col.fieldName);
break;
case "CASENO":
displayColumns[col.id]=1;
displayColumns["OBJECTID"]=1;
extendField.push(col.fieldName);
break;
case "Operation":
displayColumns["TESTSETID"]=1;
displayColumns["SHOW_MODEL"]=1;
displayColumns["ECNUMBER"]=1;
displayColumns["ECID"]=1;
displayColumns["OBJECTID"]=1;
displayColumns["IFLAST"]=1;
extendField.push(col.fieldName);
break;
default:
displayColumns[col.fieldName]=1;
break;
}
}
}
return {extendFields:extendField,fields:displayColumns};
} //getDisplayColumnAndField
} //GTGrid
var DataConfig={
fields :[
{name: 'TESTDOID', type: 'int'},
{name: 'NM', type: 'int'},
{name: 'CASENO', type: 'string'},
{name: 'CASENAME', type: 'string'},
{name: 'CASELEVEL', type: 'string'},
{name: 'DOSTATUS', type: 'string'},
{name: 'DODATE', type:'string'},
{name: 'GRAND_TOTAL_DO_TIME', type: 'float'},
{name: 'TESTDODESC', type: 'string'},
{name: 'ECNUMBER', type: 'string'},
{name: 'CASEID', type: 'int'},
{name: 'OBJECTID', type: 'int'},
{name: 'SHOW_MODEL', type: 'int'},
{name: 'TESTSETID', type: 'int'},
{name: 'ECID', type: 'string'},
{name: 'IFLAST', type: 'string'},
{name: 'PLANINOROUT', type: 'string'},
{name: 'PRESET_CONDITION', type: 'string'},
{name: 'EXPECT_RESULT', type: 'string'},
{name: 'PASS_GUIDELINE', type: 'string'},
{name: 'BORROW_COPY_STATUS', type: 'int'},
/*618002458399 增加“是否自动化测试”列 xingjincheng begin*/
{name: 'IF_AUTO_TEST', type: 'int'},
/*618002458399 增加“是否自动化测试”列 xingjincheng end*/
{name: 'DESIRE_OUTPUT', type: 'string'},
{name: 'TEST_INPUT', type: 'string'},
{name: 'CUSTOM_FIELD1', type: 'string'},
{name: 'CUSTOM_FIELD2', type: 'string'},
{name: 'CUSTOM_FIELD3', type: 'string'},
{name: 'CUSTOM_FIELD4', type: 'string'},
{name: 'CUSTOM_FIELD5', type: 'string'},
{name: 'TESTREPORTLINK', type: 'string'},
/** ,
//为提高页面渲染添加的列文本字段
{name:'CHK_TEXT',type:'string'}, //chk
{name:'ROW_INDEX',type:'int'}, //序号
{name:'DOSTATUS_TEXT',type:'string'}, //状态
{name:'TESTDODESC_TEXT',type:'string'}, //备注
{name:'BORROW_COPY_STATUS_TEXT',type:'string'},//借用
{name:'ECNUMBER_TEXT',type:'string'},//EC单
{name:'CASENO_TEXT',type:'string'}, //测试用例编号
{name:'GRAND_TOTAL_DO_TIME_TEXT',type:'string'}, //实际执行时长(分)
{name:'LINKANNEX_TEXT',type:'string'}, //附件
{name:'OPERATION_TEXT',type:'string'} //操作
**/
],
data :null,
recordType : 'object'
} //DataConfig
var ColumnsConfig=[
{id: 'chk',header:"<input id='headChk' type='checkbox' value='' onclick='CaseDoList.checkAll(this)' >",title: "选择框" ,sortable:false,width :25,resizable:false,moveable:false,align:'center',fieldName : 'TESTDOID',hideable:false
,renderer:function(value ,record,columnObj,grid,colNo,rowNo){
return "<input class='itemChk' type='checkbox' value='"+value+"' CaseID='"+record["CASEID"]+"' IFLAST='"+record["IFLAST"]+"' rowNo='"+rowNo+"' operate='"+ListVar.Operate.checkRow+"' >";
}
},
{ id:'RowIndex',header:"序号",width:30,resizable:false,align:'center',moveable:false
,fieldName : 'TESTDOID'
,renderer:function(value ,record,columnObj,grid,colNo,rowNo){
return rowNo+1;
}
},
{id: 'CASENAME', header: "测试用例名称" , width :100},
{id: 'PRESET_CONDITION' , header: "预置条件" , width :100 },
{id: 'EXPECT_RESULT' , header: "预期结果" , width :100},
{id: 'TEST_INPUT' , header: "测试步骤-操作列" , width :100,hidden:true},
{id: 'DESIRE_OUTPUT' , header: "测试步骤-检测" , width :100,hidden:true },
{id: 'DOSTATUS' , header: "状态" , width :70,align:'center',fieldName:'DOSTATUS'
,renderer : function(value ,record,columnObj,grid,colNo,rowNo){
if(!value) return "";// 2012-12-20 张恒辉 处理列隐藏value 为undefined异常
return "<select class='selectStatus' operate='"+ListVar.Operate.status+"' rowNo='"+rowNo+"'>"+ListVar.getOptionText(value)+"</select>";
// return "<select class='selectStatus' operate='"+ListVar.Operate.status+"' rowNo='"+rowNo+"'>"+ListVar.optionText.replace(">"+value," selected=\"selected\" >"+value)+"</select>";
}
},
{id: 'DODATE', header: "执行时间" , width :80
,renderer :function(value ,record,columnObj,grid,colNo,rowNo){
return"<div id='dodate_"+rowNo+"' >"+value+"</div>";
}
},
{id: 'TESTDODESC' , header: "备注" , width :150,fieldName:'TESTDODESC'
,renderer :function(value ,record,columnObj,grid,colNo,rowNo){
return "<textarea class='descBox' operate='"+ListVar.Operate.desc+"' rowNo='"+rowNo+"' cols='18' rows='2' >"+value+"</textarea>"
}
},
{id: 'BORROW_COPY_STATUS' , header: "借用" , width :50,fieldName:'BORROW_COPY_STATUS'
, renderer:function(value ,record,columnObj,grid,colNo,rowNo){
return value==1 ? "是":"否";
}
},
{id: 'IF_AUTO_TEST' , header: "是否自动化测试" , width :100,fieldName:'IF_AUTO_TEST'
, renderer:function(value ,record,columnObj,grid,colNo,rowNo){
return value==1 ? "是":"否";
}
},
{id: 'ECNUMBER' , header: "EC单", width :100,fieldName:'ECNUMBER'
,renderer:function(value ,record,columnObj,grid,colNo,rowNo){
if(!value) return "";// 2012-12-20 张恒辉 处理列隐藏value 为undefined异常
var arrs=value.split(',');
var idArrs=record["ECID"].split(',');
var links=[],no,id;
while(arrs.length){
no=arrs.shift();
id=idArrs.shift();
links.push("<a class='cursor' ECNUMBER='"+no+"' ECID='"+id+"' operate='"+ListVar.Operate.ecNumber+"' >"+no+"</a>");
}
return "<div style=\"word-wrap:break-word;white-space:normal;\">"+links.join(',')+"</div>";
}
},
{id: 'CASENO', header: "测试用例编号", width :100,hidden:true ,fieldName:'CASENO'
,renderer:function(value ,record,columnObj,grid,colNo,rowNo){
return "<a name='linkInfo' class='cursor' operate='"+ListVar.Operate.caseNo+"' rowNo='"+rowNo+"' >"+value+"</a>";
}
},
{id: 'IFLAST' , header: "最新版本",width :60 ,hidden:true},
{id: 'CASELEVEL' , header: "等级",hidden:true, width :50},
{id: 'GRAND_TOTAL_DO_TIME', header: "实际执行时长(分)",hidden:true,width:110,fieldName:'GRAND_TOTAL_DO_TIME'
,renderer:function(value ,record,columnObj,grid,colNo,rowNo){
return "<input type='text' class='input_doTime' style='width:90%; line-height:20px; height:20px;' rowNo='"+rowNo+"' operate='"+ListVar.Operate.doTime+"' field='"+value+"' value='"+value+"' />";
}
},
{id: 'PLANINOROUT' , header: "计划内外",hidden:true, width :80},
{id:'linkAnnex',header: "附件",hidden:true, width:40,fieldName:'TESTDOID'
,renderer:function(value ,record,columnObj,grid,colNo,rowNo){
return "<a class='cursor' style='width:50px;' rowNo='"+rowNo+"' operate='"+ListVar.Operate.annex+"' href='javascript:void(0);'>附件</a>";
}
},
{id: 'PASS_GUIDELINE' , header: "通过准则",hidden:true,width :100 },
{id:'CUSTOM_FIELD1',header:'自定义字段1',hidden:true,width :100 },
{id:'CUSTOM_FIELD2',header:'自定义字段2',hidden:true,width :100 },
{id:'CUSTOM_FIELD3',header:'自定义字段3',hidden:true,width :100 },
{id:'CUSTOM_FIELD4',header:'自定义字段4',hidden:true,width :100 },
{id:'CUSTOM_FIELD5',header:'自定义字段5',hidden:true,width :100 },
{id:'TESTREPORTLINK',header:'测试报告链接',hidden:true,width:100,
renderer:function(value ,record,columnObj,grid,colNo,rowNo)
{
//2013-01-28 测试执行添加测试报告链接 6396000241
return value ? "<a class='cursor' rowNo='"+rowNo+"' operate='"+ListVar.Operate.reportLink+"' href='javascript:void(0);'>"+value+"</a>" :"";
}
},
{id:'Operation',header: "操作",width :120,resizable:false,fieldName:'TESTDOID'
,renderer:function(value ,record,columnObj,grid,colNo,rowNo){
var rowindx = rowNo+1;
var links=[]; //href='javascript:void(0);'
links.push("<div class='wrap_space'>");
links.push("<a class='cursor' rowNo='"+rowNo+"' operate='"+ListVar.Operate.newEc+"'>新建缺陷</a> ");
links.push("<a class='cursor' rowNo='"+rowNo+"' operate='"+ListVar.Operate.relationEC+"'>关联缺陷</a><br />")
links.push("<div id='divwqx"+rowindx+"' class='wrap_space' style='float: left; margin-right: 5px;'>")
links.push("<a class='cursor' id='aqx"+rowindx+"' rowNo='"+rowNo+"' operate='"+ListVar.Operate.cancelEc+"'>取消关联缺陷</a> ");
links.push("<a id='linkStep"+rowindx+"'class='cursor' rowNo='"+rowNo+"' operate='"+ListVar.Operate.step+"'>执行</a></div></div>");
return links.join('');
}
}
]; //columns
var GTGridConfig={
id : "myGTGrid",
height:$(window).height()-60,
dataset: DataConfig ,
columns : ColumnsConfig ,
container : 'GTList',
replaceContainer : false,
pagesize:5,
pageSizeList : [20,30,40,50,100],
toolbarPosition : 'bottom', // 'top', 工具条显示的位置, 暂时不支持上下都显示.
toolbarContent : 'mybutton | nav | goto | pagesize | reload | state',// 工具条的内容.以及显示的相对顺序. | 代表分割线, 注意各个内容之间有" "分隔.
showIndexColumn:false,
loadURL : "FrmTestSetCaseList.aspx",//"FrmTestSetCaseList.aspx"
remotePaging : true, // 为false时 客户端分页, 一次性将数据全部发送到前台,在客户端分页
saveURL : null,
selectRowByCheck:true,
// debug : true,
multiSelect : true,
autoUpdateSortState:true,
listenResize : false,
resizable : true, // 整个列表区域是否可改变大小 (当toolbar在上面时 无论该属性如何设置 都不允许调整大小)
editable : false,
remoteSort : false,
remoteFilter : false,
showGridMenu : false, //是否显示菜单栏
allowHide : true,
transparentMask : false ,
stripeRows : true,
lightOverRow :true,
encoding : 'UTF-8',
pageStateBar : null , //'outStateBar',
clickStartEdit : false ,
customHead : null, //'myHead',
defaultRecord : [ /* 新加记录时,默认的数据(类似于一个新记录的模板) */
'010-000',
'(请输入姓名)',
'1910-01-01',
0
],
onComplete : function(){ /* 列表创建后,并且数据载入完成 时触发的函数 */
//执行页面传值用
var DoIDAndCaseID="";
var record;
for(var i=0;i<GTGrid.grid.dataset.data.length;i++)
{
record=GTGrid.grid.getRecord(i); //获取排序后的数据
// record=GTGrid.grid.dataset.data[i];
if(i==0)
DoIDAndCaseID=record["TESTDOID"]+"_"+record["CASEID"];
else
DoIDAndCaseID+=','+record["TESTDOID"]+"_"+record["CASEID"];
}
CaseDoList.params.allDoIDAndCaseID=DoIDAndCaseID;
//修改事件绑定方式
CaseDoList.BindEvent();
},
customRowAttribute : function(record,rn,grid){
if (record[4]>90){
}
},
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();
}
},
// afterRowSelect:function( value, record, cell, row, colNo, columnObj, grid)
// {
// },
onmouseout : function(event,grid){
grid.hideCellToolTip();
},
// beforeSelectRow : function(value, record , cell, row, colNO, rowNO, columnObj,grid){
// var ss=arguments;
// },
// afterSelectRow : function(value, record , cell, row, colNO, rowNO, columnObj,grid){
// var ss=arguments;
// },
// onClickCell : function(value, record , cell, row, colNO, rowNO,columnObj,grid){
// var ss=arguments;
// },
// beforeRowClick:function(value,record,cell,row,colNO,rowNO,columnObj,grid){
// var ss=arguments;
// },
// onRowClick:function(value,record,cell,row,colNO,rowNO,columnObj,grid){
//
// },
loadResponseHandler : function(response,requestParameter){ /* 处理 load 响应数据的函数 */
CheckSessionTimeOut(response.text);//添加session 过期处理
},
// saveResponseHandler : function(response,requestParameter){ /* 处理 save 响应数据的函数 */
//
// },
beforeLoad : function(reqParam){ //设置请求参数
reqParam.parameters=CaseDoList.getGTGridParams(); //获取设置参数
//1.5.3 获取显示的列 ,不显示的列不要动态去请求数据
var pramJson=GTGrid.getDisplayColumnAndField(reqParam.columnInfo);
reqParam.parameters.displayColumns=pramJson.fields;
//reqParam.parameters.extendFields=pramJson.extendFields.join(',');
GTGrid.loadFields=pramJson.fields; //记录显示的字段
GTGrid.extendFields=pramJson.extendFields;//记录列文本字段
reqParam.columnInfo={};
},
// beforeSelectRow : function( record ,row, rowNo, grid){
// return true;
// },
afterRefresh : function(){
//删除 GT Grid 版本信息
//$(".gt-checkboxtext[title='GT-Grid 1.42']").parent("a").remove();
CaseDoList.checkClear(); //清空全选
if(GTGrid.afterRefresh!=null){
GTGrid.afterRefresh();
GTGrid.afterRefresh=null;
}
}
// ,
// beforeSave : function(reqParam){
// return false;
// },
// beforeColumnMove:function(colObj,newWidth,grid){
// },
// onCellDblClick : function(value, record , cell,row, colNO, rowNO,column,event){
// },
// beforeGotoPage:function(){
// var sss=arguments;
// },
// onHeadClick:function(){
// var sss=arguments;
// },
// selectRowByCheck:function(){
// var sss=arguments;
// } ,
// beforeColumnMove:function(oldIndex, newIndex)
// {
// },
// afterColumnResize:function(colObj, newWidth, grid)
// {
// var ss="";
// }
} //GTGridConfig