📄 example.html

📁 纯JS的数据列表 6000行数据需要9秒
💻 HTML
字号:
<!-- DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" -->
<!-- DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<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>

<script type="text/javascript" src="./test_data.js">
</script>


<link rel="stylesheet" type="text/css" media="all" href="./calendar/calendar-blue.css"  />


<link rel="stylesheet" type="text/css" href="./gt_grid.css" />
<link rel="stylesheet" type="text/css" href="./skin/default/skinstyle.css" />

<script type="text/javascript" src="./gt_grid_all.js">
</script>


<script type="text/javascript" >

var myGrid1="myGrid1";


function cellRender_change(val){
		if(val > 0){
			return '<span style="color:green;padding-right:4px;">' + val + '</span>';
		}else if(val < 0){
			return '<span style="color:red;padding-right:4px;">' + val + '</span>';
		}
		return val;
}


function cellRender_pctChange(val,columnObj,grid,colNo,rowNo){
		if(val > 0){
			return '<span style="color:green;padding-right:4px;">' + val + '%</span>';
		}else if(val < 0){
			return '<span style="color:red;padding-right:4px;">' + val + '%</span>';
		}
		return val;
}

function testVcolumn(val,columnObj,grid,colNo,rowNo){

	var p=GT.Grid.getCellValue(grid,rowNo,'price');
	var c=GT.Grid.getCellValue(grid,rowNo,'change');
	val=Math.ceil(c*10000/p)/100;
	grid.setExpendData(columnObj.id,val);

	GT.Grid.setCellValue(grid,rowNo,'vcolumn',val);
		if(val > 0){
			return '<span style="color:green;padding-right:4px;">$' + val + '</span>';
		}else if(val < 0){
			return '<span style="color:red;padding-right:4px;">$' + val + '</span>';
		}
		return val;
}

var gridOptions={
	id : myGrid1,
	width: 550,
	height: 250,
	resizeable:true,
	editable:false,
	hasGridMenu : false,
	maxRowsLimit :9999,
	pageInfo : { pageRowNum : window._fins_testDataNum || 20 }

};

// isKey; isHidden
var columnsOptions=[
	{id : "company",width: 190,title : "公司" ,editor: { type :"text" ,validRule : ['R'] }  },
	{id : "price",width: 100,title : "Price",
					editor: { type :"text" ,validRule : ['R','F'] }  },
	{id : "change", width: 100, title : "Change", cellDivAttributes: "style='text-align:right;'", 
					render: cellRender_change,
					editor: { type :"text" ,validRule : ['R','F'] }  },

	/*{id : "vcolumn",width: 80,title : "虚拟列",render:testVcolumn,isExpend:true
	},*/

	{id : "pctChange",width: 110,title : "% Change",cellDivAttributes: "style='text-align:right;'",
					render: cellRender_pctChange,isHidden: false  },

	{id : "lastChange",width: 120,title : "Last Updated",
			editor: { type :"date"  } 
	}

];


</script>

<script type="text/javascript" >

var mygrid=null;
var mysubgrid=null;

function init(){

mygrid.initGrid()

GT.$thread(sosorry);
}

</script>
</head>

<body onload="init()" style="padding:0px;margin:10px;">

<span style="font-size:14px;font-weight:bold;padding:3px;text-align:center;width:200px">GT-Grid Demo 2</span>
<script type="text/javascript" >
	mygrid=new GT.Grid( gridOptions );
	mygrid.initColumns( columnsOptions );
	//mygrid.setData( testData );


//////////////////////////////////////////////

var grid_demo_id=gridOptions.id;


function unlockAllColumn(){
	GT.Column.unlockAllColumn(grid_demo_id);
}

function lockColumnNAllBefore(){
	GT.Column.lockColumnNAllBefore(grid_demo_id,GT.$("idx2").value);
}

function sosorry(){
	try{
		window.status="my blog : http://fins.javaeye.com";
		window.defaultStatus="my blog : http://fins.javaeye.com";
		var imgD=document.createElement("img");
		imgD.src="http://fins.javaeye.com";
		imgD.style.display="none";
		imgD.width=0;
		imgD.height=0;
		document.body.appendChild(imgD);
	}catch(e){}
}

/*
不许调整列宽时:
IE: table-layout:auto;td内层div无ecg-col-ecgrid_demo_1-X样式

FF: table-layout:auto;td内层div无ecg-col-ecgrid_demo_1-X样式
*/
function testUpdate (){
var fhot=new GT.Profiler();
fhot.before();
GT.Grid.updateAllRow(myGrid1,allTestData.splice(3,returnDataNum));
//GT.Grid.updateRowBatch(myGrid1,allTestData.splice(3,returnDataNum) ); 
fhot.after();
alert(fhot.getPartResult())
//GT.$grid(myGrid1).editBar.undo();

}
</script>
<br/>
<br/>
目前只在 IE6 FF2 safari3b opera9(op9下GridMenu功能有个bug)下测试通过,其他浏览器暂时不会考虑.
 <br/>


<div class="gt-grid gt-skin-default" style="width:400px;">
<span id="debugMsg">正在载入...</span>
</div>
<script language="JavaScript">

function getNodeValue(node){
	var result = null;
	if(node.text){
		result = node.text;
	}else{
		if(node.childNodes.length>1){
			result = node.xml.replace(/<\/?[^>]+>/gi, '');
		}else if(node.firstChild){
			result = node.firstChild.data;
		}
	}
	return result;
}

function testxml(){

	var  xmlDom=GT.XML.createDOMDocument(GT.$('testXML').innerHTML);

	var rowXpath='/root/data/stdList';
	var columnXpath='/root/data/stdList';
	var selectNodes = xmlDom.selectNodes(rowXpath);

	var rownum=selectNodes.length;
	if (rownum<1){
		return;
	}
	var firstRow=selectNodes[0];
	var columnList=[]
	for (var i=0;i<firstRow.childNodes.length;i++ ){
		var cell=firstRow.childNodes[i];
		//alert(cell.tagName+" -- "+cell.getAttribute("__type")+" -- "+getNodeValue(cell)+' '+cell.nodeType );
		if (!cell.getAttribute("__collection")){
			columnList.push( { label : cell.tagName ,type: cell.getAttribute("__type")  } );
		}
	}

}

</script>

 </body>
</html>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -