1、在页面必须引用的文件:
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlxgrid.css">
<script src="codebase/dhtmlxcommon.js"></script>
<script src="codebase/dhtmlxgrid.js"></script>
<script src="codebase/dhtmlxgridcell.js"></script>
2、在页面的js:
<script>
var mygrid;
function doInitGrid(){
mygrid = new dhtmlXGridObject('mygrid_container');
mygrid.setImagePath("codebase/imgs/");
//设置列名
mygrid.setHeader("Model,Qty,Price");
//设置列的宽度
mygrid.setInitWidths("*,200,200");
//设置列的水平对齐方式
mygrid.setColAlign("left,right,right");
mygrid.setSkin("light");
//设置列的排序类型
mygrid.setColSorting("str,int,int");
//设置列的可读、可编辑、文本域、复选框等
mygrid.setColTypes("ro,ed,txt");
//设置选中行的事件
mygrid.attachEvent("onRowSelect",doOnRowSelected);
mygrid.init();
//加载数据部分
mygrid.loadXML("gridDatas.xml");
}
function addRow() {
var newId = (new Date()).valueOf();
mygrid.addRow(newId, "", mygrid.getRowsNum());
mygrid.selectRow(mygrid.getRowIndex(newId), false, false, true);
}
function removeRow() {
var selId = mygrid.getSelectedId()
mygrid.deleteRow(selId);
}
function doOnRowSelected(rowID,celInd){
alert("Selected row ID is "+rowID+"/nUser clicked cell with index "+celInd);
}
</script>
3、body部分:
<body οnlοad="doInitGrid();">
This is my gird test page. <br>
<br>
<button οnclick="addRow()">Add Row</button> <button οnclick="removeRow()">Remove Row</button>
<br>
<div id="mygrid_container" style="width:600px;height:150px;"></div>
</body>s