tables filter (onKeyPressed

Develop and Deploy Cross-Browser Web Apps .

tables filter (onKeyPressed

Postby macscripter » Sun May 12, 2013 11:48 pm

Hi!
Currently I'm building a linb.net based app that lets filter tables records "onKeyPressed" in the filters fileds. You can see it at: www.expedient.es
The code I'm using for this purpose is basically:
// to define a filter "nombre":
host.exp.append(
(new linb.UI.Input)
.setHost(host,"s_nombre")
.setLeft(105)
.setTop(16)
.setWidth(150)
.onHotKeyup("_search_onhotkeyup")
);
// to define a grid:
host.exp.append(
(new linb.UI.TreeGrid)
.setHost(host,"grid_exp")
.setDock("none")
.setLeft(10)
.setTop(41)
.setWidth(755)
.setHeight(319)
.setSelectable(true)
.setAltRowsBg(true)
.setRowNumbered(true)
.setColMovable(true)
.setHeader([{"id":"ANO", "caption":"AÑO", "width":40, "type":"label"}, {"id":"NOMBRE", "caption":"NOMBRE", "width":150, "type":"label"}, {"id":"EXPEDIENTE", "caption":"EXPEDIENTE", "width":80, "type":"label"}, {"id":"ESTADO", "caption":"ESTADO", "width":150, "type":"label"}, {"id":"FECHA", "caption":"FECHA ESTADO", "width":100, "type":"label"}, {"id":"LOCALIDAD", "caption":"LOCALIDAD", "width":145, "type":"label"}])
.setNoCtrlKey(false)
.setValue("")
.onRender("_grid_exp_onrender")
);

when the web is loaded I get an object like:
var lista = rspobj.data.lista;
After, I build a complete table:
for (var t=0; t<lista[i].estado.length; t++)
{
ns.grid_exp.insertRows([{id:lista[i].nombre,cells:[lista[i].ano,lista[i].nombre.toUpperCase()+amigode,lista[i].expediente,lista[i].estado[0].desc,getDataDDMMYYYY(lista[i].estado[0].fecha),lista[i].localidad.toUpperCase()],sub:cells_aux}]);
}

Ok, now I need to filter this table by "nombre" filed I created. When I type in the "nombre" field this triggers the event "onHotKeyup" executing the function "_search_onhotkeyup" that REMOVES ALL ROWS OF THE TABLE AND BUILDS A NEW TABLE ACCORDING TO THE FILTERS VALUES TYPED, something like this:
_search_onhotkeyup : function (profile, keyboard, e, src) {
......................
if(lista[i].nombre.toString().toLowerCase().indexOf(ns.s_nombre.getUIValue().toString().toLowerCase())!=-1 ) {
ns.grid_exp.insertRows([{id:lista[i].nombre,cells:[lista[i].ano,lista[i].nombre.toUpperCase()+amigode,lista[i].expediente,lista[i].estado[0].desc,getDataDDMMYYYY(lista[i].estado[0].fecha),lista[i].localidad.toUpperCase()],sub:cells_aux}]);
}
.....................
}
This works but I think this algoritm is very expensive becouse I'm continuosly removing and building a table....So my question is: what can I do (in linb.net framework) to execute this operation ("filter onKeyPressed") wihout having to "rebuild" a table, for example only hidding records?
Thanks!
macscripter
 
Posts: 21
Joined: Wed Apr 24, 2013 12:53 pm

Re: tables filter (onKeyPressed => use onChange event

Postby linb » Mon May 13, 2013 1:12 am

   
Class('App', 'xui.Com',{
Instance:{
iniComponents : function(){
// [[code created by CrossUI RAD Tools
var host=this, children=[], append=function(child){children.push(child.get(0))};

append(
(new xui.UI.Input)
.setHost(host,"ctl_input1")
.setDirtyMark(false)
.setLeft(170)
.setTop(20)
.setDynCheck(true)
.onChange("_ctl_input1_onchange")
);

append(
(new xui.UI.Pane)
.setHost(host,"ctl_pane6")
.setLeft(120)
.setTop(50)
.setWidth(450)
.setHeight(160)
);

host.ctl_pane6.append(
(new xui.UI.TreeGrid)
.setHost(host,"ctl_treegrid2")
.setRowNumbered(true)
.setHeader([{"id":"col1", "width":80, "type":"input", "caption":"col1"}, {"id":"col2", "width":80, "type":"input", "caption":"col2"}, {"id":"col3", "width":80, "type":"input", "caption":"col3"}, {"id":"col4", "width":80, "type":"input", "caption":"col4"}])
.setRows([{"cells":[{"value":"a1", "id":"c_a", "oValue":"a1"}, {"value":"b2", "id":"c_b", "oValue":"b2"}, {"value":"c3", "id":"c_c", "oValue":"c3"}, {"value":"row1 col4", "id":"c_d", "oValue":"row1 col4"}], "id":"a"}, {"cells":[{"value":"b2", "id":"c_e", "oValue":"b2"}, {"value":"row2 col2", "id":"c_f", "oValue":"row2 col2"}, {"value":"row2 col3", "id":"c_g", "oValue":"row2 col3"}, {"value":"row2 col4", "id":"c_h", "oValue":"row2 col4"}], "id":"b"}, {"cells":[{"value":"c3", "id":"c_i", "oValue":"c3"}, {"value":"row3 col2", "id":"c_j", "oValue":"row3 col2"}, {"value":"row3 col3", "id":"c_k", "oValue":"row3 col3"}, {"value":"row3 col4", "id":"c_l", "oValue":"row3 col4"}], "sub":[["sub1", "sub2", "sub3", "sub4"]], "id":"c"}])
);

append(
(new xui.UI.SLabel)
.setHost(host,"ctl_slabel3")
.setLeft(124)
.setTop(23)
.setCaption("Filter")
);

return children;
// ]]code created by CrossUI RAD Tools
},
_ctl_input1_onchange : function (profile,oldValue,newValue){
var ns = this, grid=ns.ctl_treegrid2,hash={};
// Ensure to execute only once in 100 ms
_.resetRun("_filter",function(){
var rows=grid.getRows(),
reg=new RegExp(newValue,'ig'),
arr=[];
_.arr.each(rows,function(row){
if((row.cells[0].value||"").match(reg)){
hash[row.id]=1;
}
});

_.arr.each(rows,function(row){
grid.getSubNodeInGrid('ROW',row.id).css('display',hash[row.id]?'':'none');
});

},100);
}
}
});
   
linb
Site Admin
 
Posts: 102
Joined: Thu Apr 25, 2013 6:51 am


Return to CrossUI for Web Apps

Who is online

Users browsing this forum: No registered users and 0 guests

cron