Is there anyone can help to teach me using below function:
grid.attachFooter(values, style);
and also if using statistic fuction below:
stat_total - calculate total of all values in a column;
stat_max - calculate maximal value in a column;
stat_min - calculate minimal value in a column;
stat_average - calculate average value in a column;
stat_count - calculate number of rows.
I’m using php page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Configure Table</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<link rel="STYLESHEET" type="text/css" href="../DHTMLX/dhtmlxGrid/codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../DHTMLX/dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<script src="../DHTMLX/dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
<script src="../DHTMLX/dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
<script src="../DHTMLX/dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
<script src="../DHTMLX/dhtmlxDataProcessor/codebase/dhtmlxdataprocessor.js"></script>
<script src="../DHTMLX/dhtmlxGrid/codebase/ext/dhtmlxgrid_validation.js"></script>
<div id="gridbox" style="width:90%;height:400px;overflow:hidden"></div>
<div style="display:none">
<div id="user_flt_box"><input type="text" style="width: 100%; border:1px solid gray;" onClick="(arguments[0]||window.event).cancelBubble=true;" onKeyUp="filterBy()"></div>
<div id="pass_flt_box"><input type="text" style="width: 100%; border:1px solid gray;" onClick="(arguments[0]||window.event).cancelBubble=true;" onKeyUp="filterBy()"></div>
<div id="email_flt_box"><input type="text" style="width: 100%; border:1px solid gray;" onClick="(arguments[0]||window.event).cancelBubble=true;" onKeyUp="filterBy()"></div>
<div id="phone_flt_box"><input type="text" style="width: 100%; border:1px solid gray;" onClick="(arguments[0]||window.event).cancelBubble=true;" onKeyUp="filterBy()"></div>
<div id="aut_flt_box"><select style="width:100%" onclick="(arguments[0]||window.event).cancelBubble=true;" onChange="filterBy()"></select></div>
<div id="stat_flt_box"><select style="width:100%" onclick="(arguments[0]||window.event).cancelBubble=true;" onChange="filterBy()"></select></div>
</div>
<p><a href="javascript:void(0)" onclick="mygrid.addRow((new Date()).valueOf(),['New User Name','Password','Email@email.com','Phone Number',1,'Show'],mygrid.getRowIndex(mygrid.getSelectedId()))">Add row</a></p>
<p><a href="javascript:void(0)" onclick="mygrid.deleteSelectedItem()">Remove Selected Row</a></p>
Logchange:<br>
<div id="protocol" style="width:600px;height:200px;overflow:auto;border:1px solid green;"></div>
<script>
//Create Log
function protocolIt(str) {
var p = document.getElementById("protocol");
p.innerHTML = "<li style='height:auto;'>" + str + "</li>" + p.innerHTML
}
function doOnRowSelected(id) {
protocolIt("Rows with id: " + id + " was selected by user");
}
function doOnCellEdit(stage, rowId, cellInd) {
var gantinya = mygrid.cells(rowId, cellInd).getValue();
if (stage == 0) {
var namCol;
if(cellInd == 0){
namCol = "'User Name'";
}else if(cellInd == 1){
namCol = "'Password'";
}else if(cellInd == 2){
namCol = "'email'";
}else if(cellInd == 3){
namCol = "'Phone number'";
}else if(cellInd == 4){
namCol = "'Autorization'";
}else if(cellInd == 5){
namCol = "'Status'";
}
protocolIt(namCol + " on user id: " + rowId + " set to change, Perent value:" + gantinya);
} else if (stage == 1) {
protocolIt("Edit On Process...");
} else if (stage == 2) {
protocolIt("New Value:" + gantinya);
}
return true;
}
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;
}
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../DHTMLX/dhtmlxGrid/codebase/imgs/");
mygrid.setHeader("User Name,Password,Email,Phone Number,Autorization,Status");
mygrid.enableValidation(true);
mygrid.setColValidators(["NotEmpty","NotEmpty","ValidEmail","ValidInteger","ValidInteger",null]);
mygrid.setInitWidths("*,*,*,*,*,*")
mygrid.setColAlign("right,right,right,right,center,center")
mygrid.setColTypes("ed,ed,ed,txt,dyn,ed");
mygrid.setSkin("dhx_skyblue");
mygrid.setColSorting("str,str,str,int,int,str")//untuk shorting
mygrid.attachEvent("onEditCell", doOnCellEdit);
mygrid.attachEvent("onBeforeRowDeleted", doBeforeRowDeleted);
mygrid.init();
mygrid.loadXML("get.php", function() {
mygrid.attachHeader("<div id='user_flt' style='padding-right:3px'></div>,<div id='pass_flt' style='padding-right:3px'></div>,<div id='email_flt' style='padding-right:3px'></div>,<div id='phone_flt' style='padding-right:3px'></div>,<div id='aut_flt' style='padding-right:3px'></div>,<div id='stat_flt' style='padding-right:3px'></div>");//initial fiter field
document.getElementById("user_flt").appendChild(document.getElementById("user_flt_box").childNodes[0]);
document.getElementById("pass_flt").appendChild(document.getElementById("pass_flt_box").childNodes[0]);
document.getElementById("email_flt").appendChild(document.getElementById("email_flt_box").childNodes[0]);
document.getElementById("phone_flt").appendChild(document.getElementById("phone_flt_box").childNodes[0]);
//set author fiter field;
var authFlt = document.getElementById("aut_flt").appendChild(document.getElementById("aut_flt_box").childNodes[0]);
populateSelectWithAut(authFlt,"All Autorization",4);
var statFlt = document.getElementById("stat_flt").appendChild(document.getElementById("stat_flt_box").childNodes[0]);
populateSelectWithAut(statFlt,"All Status",5);
//block sorting and resize actions for second row;
mygrid.hdr.rows[2].onmousedown = mygrid.hdr.rows[2].onclick = function(e) { (e || event).cancelBubble = true;
}
mygrid.setSizes();
});
function filterBy() {
var uVal = document.getElementById("user_flt").childNodes[0].value.toLowerCase();
var tVal = document.getElementById("pass_flt").childNodes[0].value.toLowerCase();
var eVal = document.getElementById("email_flt").childNodes[0].value.toLowerCase();
var pVal = document.getElementById("phone_flt").childNodes[0].value.toLowerCase();
var aVal = document.getElementById("aut_flt").childNodes[0].value.toLowerCase();
var sVal = document.getElementById("stat_flt").childNodes[0].value.toLowerCase();
for (var i = 0; i < mygrid.getRowsNum(); i++) {
var uStr = mygrid.cells2(i, 0).getValue().toString().toLowerCase();
var tStr = mygrid.cells2(i, 1).getValue().toString().toLowerCase();
var eStr = mygrid.cells2(i, 2).getValue().toString().toLowerCase();
var pStr = mygrid.cells2(i, 3).getValue().toString().toLowerCase();
var aStr = mygrid.cells2(i, 4).getValue().toString().toLowerCase();
var sStr = mygrid.cells2(i, 5).getValue().toString().toLowerCase();
if ((uVal == "" || uStr.indexOf(uVal) == 0) && (tVal == "" || tStr.indexOf(tVal) == 0) && (aVal == "" || aStr.indexOf(aVal) == 0) && (sVal == "" || sStr.indexOf(sVal) == 0) && (eVal == "" || eStr.indexOf(eVal) == 0) && (pVal == "" || pStr.indexOf(pVal) == 0)){
mygrid.setRowHidden(mygrid.getRowId(i), false);
}else{
mygrid.setRowHidden(mygrid.getRowId(i), true);
}
}
}
function populateSelectWithAut(selObj,initstr,colidx) {
selObj.options.add(new Option(initstr, ""));
var usedAuthAr = new dhtmlxArray();
for (var i = 0; i < mygrid.getRowsNum(); i++) {
var authNm = mygrid.cells2(i, colidx).getValue();
if (usedAuthAr._dhx_find(authNm) == -1) {
selObj.options.add(new Option(authNm, authNm));
usedAuthAr[usedAuthAr.length] = authNm;
}
}
}
myDataProcessor = new dataProcessor("update.php"); //lock feed url
myDataProcessor.init(mygrid); //link dataprocessor to the grid
</script>
</body>
</html>Thank you in advance… 