Grouping Tree
SBGrid는 Grouping Tree 기능을 제공합니다.
요약
많은 데이터들을 카테고리화해서 요약하여 집계를 구할 때 사용하는 기능입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta content="IE=9" http-equiv="X-UA-Compatible">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SoftBowl SBGrid Example</title>
<script type="text/javascript" src="/resources/kr/co/softbowl/js/Library/json-minified.js"></script>
<script type="text/javascript" src="/resources/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/resources/kr/co/softbowl/js/Library/json2.js"></script>
<script type="text/javascript" src="/resources/kr/co/softbowl/SBGrid.js"></script>
<script type="text/javascript" src="/resources/js/DATA_JSON_orgin.js"></script>
<script type="text/javascript">
SBGrid.DEF.DOMAIN = "/resources/";
<script>
<script type="text/javascript">
var datagrid1,
datagrid2;
$(document).ready(function(){
__createElements();
});
function dataValid(id, nRow, nCol,strValue, obj, ref){
var profit = ""+obj["Profit_"+ref];
profit = profit.formatting("#,###");
var units = ""+obj["UnitsSold_"+ref];
units = units.formatting("#,###");
var cost = ""+obj["Cost_"+ref];
cost=cost.formatting("#,###");
var rlt = "<table style='width:100%; margin:0 0 0 0;'><tr><td><div class='test123'>";
rlt += "$"+profit+"</div></td></tr><tr><td>";
rlt += "<div class='test123'>"+units+"</div></td></tr><tr><td>";
rlt += "<div class='test123'>$"+cost;
rlt += "</div></td></tr></table>";
return rlt;
}
function fixedValid(id,nRow,nCol,strValue,ref){
if(strValue == "1Q")
strValue = "<table style='height:100%' align='center'><tr><td>"+strValue +"</td><td><img src='/resources/kr/co/softbowl/image/treeview/minus.gif' id='_fb1' /></td></tr></table>";
if(strValue == "2Q")
strValue = "<table style='height:100%' align='center'><tr><td>"+strValue +"</td><td><img src='/resources/kr/co/softbowl/image/treeview/minus.gif' id='_fb2' /></td></tr></table>";
if(strValue == "3Q")
strValue = "<table style='height:100%' align='center'><tr><td>"+strValue +"</td><td><img src='/resources/kr/co/softbowl/image/treeview/minus.gif' id='_fb3' /></td></tr></table>";
if(strValue == "4Q")
strValue = "<table style='height:100%' align='center'><tr><td>"+strValue +"</td><td><img src='/resources/kr/co/softbowl/image/treeview/minus.gif' id='_fb4' /></td></tr></table>";
return strValue;
}
function categoryValid(id,nRow,nCol,strValue,obj,ref)
{
return "<table><tr><td>Profit</td></tr><tr><td>Units Sold</td></tr><tr><td>Cost</td></tr></table>";
}
function __createElements (){
var objJson2 = {
"strParentId" : "sbGridArea2",
"strId": "datagrid2",
"strCaption": "국가^지역^범주^구분^1월^2월^3월^4월^5월^6월^7월^8월^9월^10월^11월^12월",
"strColWidth": "70, 80, 80, 70, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60",
"strJsonRef": "orginData",
"strStyle": "width:100%; height:300px; ",
"strDataHeight":"29",
"strFocusColor":"#9370db",
"strSelectFontColor":"030303",
"strBackColorAlternate" : "#f7f7f7",
"bAutoResize" : true
};
datagrid2 = createSBDataGrid(objJson2);
var objCol2 = [
{ "id": "col1", "type": "output", "ref": "COL_0" },
{ "id": "col2", "type": "output", "ref": "COL_1" },
{ "id": "col3", "type": "output", "ref": "COL_2" },
{ "id": "col4", "type": "output", "ref": "COL_3" },
{ "id": "col5", "type": "output", "ref": "COL_4" },
{ "id": "col6", "type": "output", "ref": "COL_5" },
{ "id": "col7", "type": "output", "ref": "COL_6" },
{ "id": "col8", "type": "output", "ref": "COL_7" },
{ "id": "col9", "type": "output", "ref": "COL_8" },
{ "id": "col10", "type": "output", "ref": "COL_9" },
{ "id": "col11", "type": "output", "ref": "COL_10" },
{ "id": "col12", "type": "output", "ref": "COL_11" },
{ "id": "col13", "type": "output", "ref": "COL_12" },
{ "id": "col14", "type": "output", "ref": "COL_13" },
{ "id": "col15", "type": "output", "ref": "COL_14" },
{ "id": "col16", "type": "output", "ref": "COL_15" }
];
datagrid2.createColumns(objCol2);
datagrid2.setCellStyle('background-color', 0,0,0,datagrid2.getCols(),'#696969');
datagrid2.setCellStyle('color', 0,0,0,datagrid2.getCols(),'#ffffff');
datagrid2.setCellStyle('font-weight', 0,0,0,datagrid2.getCols(),'bold');
datagrid2.setRowHeight(0, 30);
}
function pivot_convert(){
var objInfo =
{
"groupColumns":["COL_0","COL_1","COL_2"],
"groupColumnName" : "category",
"categoryColumns" : "COL_3",
"groupLevelColumnName" : "depth",
"dataColumns" : ["COL_4","COL_5","COL_6","COL_7","COL_8","COL_9","COL_10","COL_11","COL_12","COL_13","COL_14","COL_15"],
"bMakeTotal" : true,
"totalName" : "Total",
"calculates" : [
{"calculateColumnName":"Profit_COL_Q1","calculate": function(objData){ return objData.Profit_COL_4+objData.Profit_COL_5+objData.Profit_COL_6;}},
{"calculateColumnName":"Profit_COL_Q2","calculate": function(objData){ return objData.Profit_COL_7+objData.Profit_COL_8+objData.Profit_COL_9;}},
{"calculateColumnName":"Profit_COL_Q3","calculate": function(objData){ return objData.Profit_COL_10+objData.Profit_COL_11+objData.Profit_COL_12;}},
{"calculateColumnName":"Profit_COL_Q4","calculate": function(objData){ return objData.Profit_COL_13+objData.Profit_COL_14+objData.Profit_COL_15;}},
{"calculateColumnName":"Cost_COL_Q1","calculate": function(objData){ return objData.Cost_COL_4+objData.Cost_COL_5+objData.Cost_COL_6;}},
{"calculateColumnName":"Cost_COL_Q2","calculate": function(objData){ return objData.Cost_COL_7+objData.Cost_COL_8+objData.Cost_COL_9;}},
{"calculateColumnName":"Cost_COL_Q3","calculate": function(objData){ return objData.Cost_COL_10+objData.Cost_COL_11+objData.Cost_COL_12;}},
{"calculateColumnName":"Cost_COL_Q4","calculate": function(objData){ return objData.Cost_COL_13+objData.Cost_COL_14+objData.Cost_COL_15;}},
{"calculateColumnName":"UnitsSold_COL_Q1","calculate": function(objData){ return objData.UnitsSold_COL_4+objData.UnitsSold_COL_5+objData.UnitsSold_COL_6;}},
{"calculateColumnName":"UnitsSold_COL_Q2","calculate": function(objData){ return objData.UnitsSold_COL_7+objData.UnitsSold_COL_8+objData.UnitsSold_COL_9;}},
{"calculateColumnName":"UnitsSold_COL_Q3","calculate": function(objData){ return objData.UnitsSold_COL_10+objData.UnitsSold_COL_11+objData.UnitsSold_COL_12;}},
{"calculateColumnName":"UnitsSold_COL_Q4","calculate": function(objData){ return objData.UnitsSold_COL_13+objData.UnitsSold_COL_14+objData.UnitsSold_COL_15;}},
{"calculateColumnName":"Profit_2010","calculate": function(objData){ return objData.Profit_COL_Q1+objData.Profit_COL_Q2+objData.Profit_COL_Q3+objData.Profit_COL_Q4;}},
{"calculateColumnName":"Cost_2010","calculate": function(objData){ return objData.Cost_COL_Q1+objData.Cost_COL_Q2+objData.Cost_COL_Q3+objData.Cost_COL_Q4;}},
{"calculateColumnName":"UnitsSold_2010","calculate": function(objData){ return objData.UnitsSold_COL_Q1+objData.UnitsSold_COL_Q2+objData.UnitsSold_COL_Q3+objData.UnitsSold_COL_Q4;}}
]
};
result = SBGrid.UT.ConvertGroup(objInfo, orginData);
var obJson = {
"strParentId":"sbGridArea",
"strId": "datagrid1",
"strCaption": "Category^Dept^1^2^3^1Q^4^5^6^2Q^7^8^9^3Q^10^11^12^4Q^Total",
"strColWidth": "130, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80",
"strJsonRef": "result",
"strDataHeight":"69",
"strFocusColor":"#9370db",
"strSelectFontColor":"030303",
"strStyle": "width:100%; height:300px; ",
"nFrozenRows" : 1
};
datagrid1 = createSBDataGrid(obJson);
datagrid1.m_bSMC = false;
var objCol = [
{
"id": "col1",
"type": "output",
"ref": "category"
},
{
"id": "col2",
"type": "output",
"ref": "depth",
"renderer": function (id,nRow,nCol,strValue,obj){ return categoryValid(id,nRow,nCol,strValue,obj);}
},
{
"id": "col5",
"type": "output",
"ref": "COL_4",
"renderer": function (id,nRow,nCol,strValue,obj){ return dataValid(id,nRow,nCol,strValue,obj,"COL_4");}
},
{
"id": "col6",
"type": "output",
"ref": "COL_5",
"renderer": function (id,nRow,nCol,strValue,obj){ return dataValid(id,nRow,nCol,strValue,obj,"COL_5");}
},
{
"id": "col7",
"type": "output",
"ref": "COL_6",
"renderer": function (id,nRow,nCol,strValue,obj){ return dataValid(id,nRow,nCol,strValue,obj,"COL_6");}
},
{
"id": "col116",
"type": "output",
"ref": "COL_Q1",
"renderer": function (id,nRow,nCol,strValue,obj){ return dataValid(id,nRow,nCol,strValue,obj,"COL_Q1");},
"fixedRenderer": function (id,nRow,nCol,strValue,obj){ return fixedValid(id,nRow,nCol,strValue,"COL_Q1");}
},
{
"id": "col8",
"type": "output",
"ref": "COL_7",
"renderer": function (id,nRow,nCol,strValue,obj){ return dataValid(id,nRow,nCol,strValue,obj,"COL_7");}
},
{
"id": "col9",
"type": "output",
"ref": "COL_8",
"renderer": function (id,nRow,nCol,strValue,obj){ return dataValid(id,nRow,nCol,strValue,obj,"COL_8");}
},
{
"id": "col10",
"type": "output",
"ref": "COL_9",
"renderer": function (id,nRow,nCol,strValue,obj){ return dataValid(id,nRow,nCol,strValue,obj,"COL_9");}
},
{
"id": "col117",
"type": "output",
"ref": "COL_Q2",
"renderer": function (id,nRow,nCol,strValue,obj){ return dataValid(id,nRow,nCol,strValue,obj,"COL_Q2");},
"fixedRenderer": function (id,nRow,nCol,strValue,obj){ return fixedValid(id,nRow,nCol,strValue,"COL_Q2");}
},
{
"id": "col11",
"type": "output",
"ref": "COL_10",
"renderer": function (id,nRow,nCol,strValue,obj){ return dataValid(id,nRow,nCol,strValue,obj,"COL_10");}
},
{
"id": "col12",
"type": "output",
"ref": "COL_11",
"renderer": function (id,nRow,nCol,strValue,obj){ return dataValid(id,nRow,nCol,strValue,obj,"COL_11");}
},
{
"id": "col13",
"type": "output",
"ref": "COL_12",
"renderer": function (id,nRow,nCol,strValue,obj){ return dataValid(id,nRow,nCol,strValue,obj,"COL_12");}
},
{
"id": "col118",
"type": "output",
"ref": "COL_Q3",
"renderer": function (id,nRow,nCol,strValue,obj){ return dataValid(id,nRow,nCol,strValue,obj,"COL_Q3");},
"fixedRenderer": function (id,nRow,nCol,strValue,obj){ return fixedValid(id,nRow,nCol,strValue,"COL_Q3");}
},
{
"id": "col14",
"type": "output",
"ref": "COL_13",
"renderer": function (id,nRow,nCol,strValue,obj){ return dataValid(id,nRow,nCol,strValue,obj,"COL_13");}
},
{
"id": "col15",
"type": "output",
"ref": "COL_14",
"renderer": function (id,nRow,nCol,strValue,obj){ return dataValid(id,nRow,nCol,strValue,obj,"COL_14");}
},
{
"id": "col4",
"type": "output",
"ref": "COL_15",
"renderer": function (id,nRow,nCol,strValue,obj){ return dataValid(id,nRow,nCol,strValue,obj,"COL_15");}
},
{
"id": "col119",
"type": "output",
"ref": "COL_Q4",
"renderer": function (id,nRow,nCol,strValue,obj){ return dataValid(id,nRow,nCol,strValue,obj,"COL_Q4");},
"fixedRenderer": function (id,nRow,nCol,strValue,obj){ return fixedValid(id,nRow,nCol,strValue,"COL_Q4");}
}
,
{
"id": "coltotal",
"type": "output",
"ref": "COL_2010",
"renderer": function (id,nRow,nCol,strValue,obj){ return dataValid(id,nRow,nCol,strValue,obj,"2010");}
}
];
datagrid1.createColumns(objCol);
datagrid1.addEventListener('onexpanded', 'doExpanded', '', '');
datagrid1.addEventListener('oncollapse', 'doCollapse', '', '');
datagrid1.addEventListener('onclick', 'doClick', '', '');
datagrid1.setCellStyle('background-color', datagrid1.getFixedRows(), datagrid1.getColRef('COL_Q1'), datagrid1.getRows(), datagrid1.getColRef('COL_Q1'), '#d3d3d3');
datagrid1.setCellStyle('background-color', datagrid1.getFixedRows(), datagrid1.getColRef('COL_Q2'), datagrid1.getRows(), datagrid1.getColRef('COL_Q2'), '#d3d3d3');
datagrid1.setCellStyle('background-color', datagrid1.getFixedRows(), datagrid1.getColRef('COL_Q3'), datagrid1.getRows(), datagrid1.getColRef('COL_Q3'), '#d3d3d3');
datagrid1.setCellStyle('background-color', datagrid1.getFixedRows(), datagrid1.getColRef('COL_Q4'), datagrid1.getRows(), datagrid1.getColRef('COL_Q4'), '#d3d3d3');
datagrid1.setCellStyle('background-color', 0,0,0,datagrid1.getCols(),'#696969');
datagrid1.setCellStyle('color', 0,0,0,datagrid1.getCols(),'#ffffff');
datagrid1.setCellStyle('font-weight', 0,0,0,datagrid1.getCols(),'bold');
//datagrid1.setRowHeight(0, 30);
datagrid1.setGroupLevelCol(1);
datagrid1.setGroupCol(0);
datagrid1.setGroup('complete');
//var totalRows = datagrid1.getRows();
/*
for(var i = datagrid1.getFixedRows(); i < totalRows; i+=1){
if( datagrid1.getTextMatrix(i, 1) >= 2 ){
datagrid1.setGroupCollapsed(i, true);
}
}
*/
$('#_fb1').toggle(function(){
datagrid1.setColHidden(2, true);
datagrid1.setColHidden(3, true);
datagrid1.setColHidden(4, true);
$('#_fb1').attr('src','/resources/kr/co/softbowl/image/treeview/plus.gif')
},
function(){
datagrid1.setColHidden(2, false);
datagrid1.setColHidden(3, false);
datagrid1.setColHidden(4, false);
datagrid1.setTextMatrix(0, 2, '1');
datagrid1.setTextMatrix(0, 3, '2');
datagrid1.setTextMatrix(0, 4, '3');
$('#_fb1').attr('src','/resources/kr/co/softbowl/image/treeview/minus.gif');
}
)
$('#_fb2').toggle(
function(){
datagrid1.setColHidden(6, true);
datagrid1.setColHidden(7, true);
datagrid1.setColHidden(8, true);
$('#_fb2').attr('src','/resources/kr/co/softbowl/image/treeview/plus.gif')
},
function(){
datagrid1.setColHidden(6, false);
datagrid1.setColHidden(7, false);
datagrid1.setColHidden(8, false);
datagrid1.setTextMatrix(0, 6, '4');
datagrid1.setTextMatrix(0, 7, '5');
datagrid1.setTextMatrix(0, 8, '6');
$('#_fb2').attr('src','/resources/kr/co/softbowl/image/treeview/minus.gif');
}
)
$('#_fb3').toggle(
function(){
datagrid1.setColHidden(10, true);
datagrid1.setColHidden(11, true);
datagrid1.setColHidden(12, true);
$('#_fb3').attr('src','/resources/kr/co/softbowl/image/treeview/plus.gif')
},
function(){
datagrid1.setColHidden(10, false);
datagrid1.setColHidden(11, false);
datagrid1.setColHidden(12, false);
datagrid1.setTextMatrix(0, 10, '7');
datagrid1.setTextMatrix(0, 11, '8');
datagrid1.setTextMatrix(0, 12, '9');
$('#_fb3').attr('src','/resources/kr/co/softbowl/image/treeview/minus.gif');
}
)
$('#_fb4').toggle(
function(){
datagrid1.setColHidden(14, true);
datagrid1.setColHidden(15, true);
datagrid1.setColHidden(16, true);
$('#_fb4').attr('src','/resources/kr/co/softbowl/image/treeview/plus.gif')
},
function(){
datagrid1.setColHidden(14, false);
datagrid1.setColHidden(15, false);
datagrid1.setColHidden(16, false);
datagrid1.setTextMatrix(0, 14, '10');
datagrid1.setTextMatrix(0, 15, '11');
datagrid1.setTextMatrix(0, 16, '12');
$('#_fb4').attr('src','/resources/kr/co/softbowl/image/treeview/minus.gif');
}
)
}
// gridTree - 닫혔을때
function doCollapse(){
datagrid1.setCellStyle('background-color', datagrid1.getFixedRows() , 0, datagrid1.getRows(), datagrid1.getCols(), '#ffffff');
datagrid1.setCellStyle('font-weight', datagrid1.getFixedRows() , 0, datagrid1.getRows(), datagrid1.getCols(), 'normal');
// 1Q 2Q 3Q 4Q 스타일 적용
datagrid1.setCellStyle('background-color', datagrid1.getFixedRows(), datagrid1.getColRef('COL_Q1'), datagrid1.getRows(), datagrid1.getColRef('COL_Q1'), '#d3d3d3');
datagrid1.setCellStyle('background-color', datagrid1.getFixedRows(), datagrid1.getColRef('COL_Q2'), datagrid1.getRows(), datagrid1.getColRef('COL_Q2'), '#d3d3d3');
datagrid1.setCellStyle('background-color', datagrid1.getFixedRows(), datagrid1.getColRef('COL_Q3'), datagrid1.getRows(), datagrid1.getColRef('COL_Q3'), '#d3d3d3');
datagrid1.setCellStyle('background-color', datagrid1.getFixedRows(), datagrid1.getColRef('COL_Q4'), datagrid1.getRows(), datagrid1.getColRef('COL_Q4'), '#d3d3d3');
}
// gridTree - 열었을때
function doExpanded(){
var sRow = datagrid1.getRow();
var eRow = datagrid1.getRows();
var sCol = datagrid1.getColRef('depth');
var eCol = datagrid1.getCols();
var fixedRow = datagrid1.getFixedRows();
if( sRow == datagrid1.getRows() ) {
return;
}
// 스타일 원래대로
datagrid1.setCellStyle('background-color', datagrid1.getFixedRows(), 0, eRow, eCol, '#ffffff');
datagrid1.setCellStyle('font-weight', datagrid1.getFixedRows(), 0, eRow, eCol, 'noemal');
if(sRow >= datagrid1.getFixedRows()){
for( var i = sRow; i =< eRow; i+=1){
datagrid1.setCellStyle('background-color', i , 0, i, eCol, '#FAECC5');
if( '2' == datagrid1.getTextMatrix( i+1 , 1 ) ){
break;
}
}
}
// 1Q 2Q 3Q 4Q 스타일 적용
datagrid1.setCellStyle('background-color', datagrid1.getFixedRows(), datagrid1.getColRef('COL_Q1'), datagrid1.getRows(), datagrid1.getColRef('COL_Q1'), '#d3d3d3');
datagrid1.setCellStyle('background-color', datagrid1.getFixedRows(), datagrid1.getColRef('COL_Q2'), datagrid1.getRows(), datagrid1.getColRef('COL_Q2'), '#d3d3d3');
datagrid1.setCellStyle('background-color', datagrid1.getFixedRows(), datagrid1.getColRef('COL_Q3'), datagrid1.getRows(), datagrid1.getColRef('COL_Q3'), '#d3d3d3');
datagrid1.setCellStyle('background-color', datagrid1.getFixedRows(), datagrid1.getColRef('COL_Q4'), datagrid1.getRows(), datagrid1.getColRef('COL_Q4'), '#d3d3d3');
}
// 셀 클릭 이벤트
function doClick(){
var clickRow = datagrid1.getRow();
var fixedRow = datagrid1.getFixedRows();
var deptCol = datagrid1.getColRef('depth');
var totalRow = datagrid1.getRows();
var stylSRow = 0;
var stylERow = 0;
// 클릭한 레벨이 부모일경우 return;
if(2 > datagrid1.getGroupLevel(clickRow)){
return;
}
// 스타일 원래 대로
datagrid1.setCellStyle('background-color', datagrid1.getFixedRows() , 0, datagrid1.getRows(), datagrid1.getCols(), '#ffffff');
datagrid1.setCellStyle('font-weight', datagrid1.getFixedRows() , 0, datagrid1.getRows(), datagrid1.getCols(), 'normal');
for( var i = clickRow; i >= fixedRow; i-=1){
if ('2' == datagrid1.getTextMatrix( i, deptCol )){
stylSRow = i;
break;
}
if ( i < 1 ) return;
}
for( var i = stylSRow; i =< totalRow; i+=1 ){
if('2' == datagrid1.getTextMatrix( i+1, deptCol )){
stylERow = i;
break;
}
if( i == totalRow ) stylERow = totalRow;
if ( i > 1000 ) return;
}
// 그룹 영역 스타일 적용
datagrid1.setCellStyle('background-color', stylSRow, 0, stylERow, datagrid1.getCols(), '#FAECC5');
datagrid1.setCellStyle('font-weight', stylSRow, 0, stylERow, datagrid1.getCols(), 'bold');
// 1Q 2Q 3Q 4Q 스타일 적용
datagrid1.setCellStyle('background-color', datagrid1.getFixedRows(), datagrid1.getColRef('COL_Q1'), datagrid1.getRows(), datagrid1.getColRef('COL_Q1'), '#d3d3d3');
datagrid1.setCellStyle('background-color', datagrid1.getFixedRows(), datagrid1.getColRef('COL_Q2'), datagrid1.getRows(), datagrid1.getColRef('COL_Q2'), '#d3d3d3');
datagrid1.setCellStyle('background-color', datagrid1.getFixedRows(), datagrid1.getColRef('COL_Q3'), datagrid1.getRows(), datagrid1.getColRef('COL_Q3'), '#d3d3d3');
datagrid1.setCellStyle('background-color', datagrid1.getFixedRows(), datagrid1.getColRef('COL_Q4'), datagrid1.getRows(), datagrid1.getColRef('COL_Q4'), '#d3d3d3');
}
function setFixed(){
var fr = datagrid1.getFixedRows();
var q1 = datagrid1.getColRef('COL_Q1');
var q2 = datagrid1.getColRef('COL_Q2');
var q3 = datagrid1.getColRef('COL_Q3');
var q4 = datagrid1.getColRef('COL_Q4');
datagrid1.setTextMatrix(0 , q1, "<input type='button' id='_fb1' class=' ' onclick='fixedClick()' /<");
datagrid1.setTextMatrix(0 , q2, "<input type='button' id='_fb2' class=' ' onclick='fixedClick()' /<");
datagrid1.setTextMatrix(0 , q3, "<input type='button' id='_fb3' class=' ' onclick='fixedClick()' /<");
datagrid1.setTextMatrix(0 , q4, "<input type='button' id='_fb4' class=' ' onclick='fixedClick()' /<");
}
</script>