2010-12-03 10:56:47 <title>dhtmlxGrid Sample Page</title> <link rel="STYLESHEET" type="text/css" href="dhtmlxgrid.css" mce_href="dhtmlxgrid.css"> <link rel="stylesheet" type="text/css" href="dhtmlxgrid_dhx_skyblue.css" mce_href="dhtmlxgrid_dhx_skyblue.css"> <mce:script src="dhtmlxcommon.js" mce_src="dhtmlxcommon.js"></mce:script> <mce:script src="dhtmlxgrid.js" mce_src="dhtmlxgrid.js"></mce:script> <mce:script src="dhtmlxgridcell.js" mce_src="dhtmlxgridcell.js"></mce:script> <mce:style><!-- .even{ background-color:silver; } .uneven{ background-color:white; } --></mce:style><style mce_bogus="1"> .even{ background-color:silver; } .uneven{ background-color:white; } </style> <mce:script type="text/javascript"><!-- var mygrid; function protocolIt(str) { var p = document.getElementById("protocol"); p.innerHTML = "<li>" + str + "</li>" + p.innerHTML } function ab(rowID,celInd){ var sel = mygrid.getSelectedId(); //alert(celInd); //mygrid.cells(rowID,celInd).setValue("11"); alert(mygrid.cells(rowID,celInd).getValue()); //mygrid.setRowId(seid,"100");//? //alert(mygrid.getRowsNum()); // mygrid.moveRowUp(sel); } function doInitGrid(){ mygrid = new dhtmlXGridObject('mygrid_container'); mygrid.setImagePath("codebase/imgs/"); mygrid.setHeader("Model,Qty,Price,Name"); mygrid.setInitWidths("*,150,150,150"); mygrid.setStyle("", "","color:red", ""); //mygrid.enableLightMouseNavigation(true); mygrid.setColAlign("left,right,right,right") // mygrid.setNumberFormat("0.000.00",index,"*","$"); mygrid.setSkin("dhx_skyblue"); mygrid.setColSorting("str,int,int,str"); mygrid.setColTypes("txt,ed,price,co"); //mygrid.enableAlterCss("even","uneven"); //颜色交替 //mygrid.setSkin("xp"); //mygrid.attachEvent("onEditCell",onEditCell) //mygrid.attachEvent("onRowSelect", doOnRowSelected);//选择一行 mygrid.attachEvent("onRowSelect", ab); // mygrid.attachEvent("onBeforeRowDeleted", doBeforeRowDeleted); /* mygrid.s/attacEvent("onRowSelect",function(){ //do somethings }); */ // mygrid.attachEvent("onCheckbox", doOnCheck); //mygrid.setSkin("dhx_skyblue"); mygrid.init(); mygrid.loadXML("step3.xml"); } function onEditCell(rowID,celInd,stage){ if(stage == 1){ mygrid.setStyle("", "color:red","", ""); } } function add_fast() { mygrid.clearAll(); var z = (new Date()).valueOf(); // mygrid.startFastOperations(); for (var i = 99; i >= 0; i--) { mygrid.addRow(i, [0, 'fast',i+1, i]); }; // mygrid.stopFastOperations(); alert("Time: " + ((new Date()).valueOf() - z) + "ms"); } function removeRow(){ var selId = mygrid.getSelectedId() mygrid.deleteRow(selId); } //第celnd个位置,rowId行 function doOnRowSelected(rowID,celInd,stage){ //alert( mygrid.getCombo(5)); } //mygrid.setStyle("", "color:red","", ""); function doOnCheck(rowId, cellInd, state) { protocolIt("User clicked on checkbox or radiobutton on row " + rowId + " and cell with index " + cellInd + ".State changed to " + state); return true; } function doBeforeRowDeleted(rowId) { if (confirm("Are you sure you want to delete row")) { protocolIt("Row deletion confirmed"); return true; } else { protocolIt("Row deletion canceled"); return false; } } function addRow(rowID){ var newId = (new Date()).valueOf() alert(rowID); mygrid.addRow(newId,"") //mygrid.selectRow(mygrid.getRowIndex(newId),false,false,true); } function clear1(){ var s = document.getElementById("protocol"); s.innerHTML=""; } // --></mce:script> <body οnlοad="doInitGrid()"> <div id="mygrid_container" style="width:600px;height:250px;color:red;"></div> <div id="protocol" style="width:510px;height:200px;overflow:auto;border:1px solid green;"></div> <p><input type="button" οnclick="mygrid.deleteSelectedItem()" value="clearAllRow"></p> <button οnclick="addRow()">Add Row</button> <div><input id='z1' type="button" οnclick='add_fast();' value='add 100 rows (fast)'></div> <input type="button" οnclick="clear1()" > <div id="" style=";color:red;" mce_style=";color:red;">@@@@@@@@<br>asdasda</div> </body>