I have a HTML list of about 500 items and a "filter" box above it. I started by using jQuery to filter the list when I typed a letter (timing code added later): $('#filter').keyup( function() { var jqStart = (new Date).getTime(); var search = $(this).val().toLowerCase(); var $list = $('ul.ablist > li'); $list.each( function() { if ( $(this).text().toLowerCase().indexOf(search) === -1 ) $(this).hide(); else $(this).show(); } ); console.log('Time: ' + ((new Date).getTime() - jqStart)); } ); However, there was a couple of seconds delay after typing each letter (particularly the first letter). So I thought it may be slightly quicker if I used plain Javascript (I read recently that jQuery's each function is particularly slow). Here's my JS equivalent: document.getElementById('filter').addEventListener( 'keyup', function () { var jsStart = (new Date).getTime()...
Yes, I have used the following to briefly highlight a newly-added row. It produces a nice effect to let the user know there is new data, and sounds just like what you are looking for:
ReplyDeletejQuery("#" + rowId, "#myGrid").effect("highlight", {}, 2000);
If I understand you correct you want highlight a row added with respect of form editing ("+" in the navigation bar). Form editing supports an event afterComplete, which you can use to add some post-edditing features. For example, if you want to have the highlight effect with all rows added, then you can use general setting for jQuery.jgrid.edit:
ReplyDeletejQuery.extend(jQuery.jgrid.edit, {
reloadAfterSubmit: false,
afterComplete : function (response, postdata, formid) {
if (postdata.oper === "add") { // highlight on "add" only
var row = jQuery ("#"+$.jgrid.jqID(postdata.id), jQuery(this.gbox));
row.effect("highlight", {color:"red"}, 3000);
}
}
});
If you will be use row.effect("highlight", {}, 3000); (no red color), you will see highlight effect, but a little not so clear, because added row will be selected per default.
You can of cause modify the code to use highlighting only for one selected grid.
What information do you allready have about the row.
ReplyDeleteDo you have the row id? Or the value of the field that is marked as the key?
It creates the row as defined like this. Notice that the id of the row is the same as the key value.
<TR id=11 class="ui-widget-content jqgrow ui-row-ltr ui-state-highlight" role=row aria-selected=true><TD title=11 role=gridcell aria-describedby=list2_id>11</TD><TD title=2007-10-06 role=gridcell aria-describedby=list2_invdate>2007-10-06</TD><TD title="Client 1" role=gridcell aria-describedby=list2_name>Client 1</TD><TD style="TEXT-ALIGN: right" title=600.00 role=gridcell aria-describedby=list2_amount>600.00</TD><TD style="TEXT-ALIGN: right" title=120.00 role=gridcell aria-describedby=list2_tax>120.00</TD><TD style="TEXT-ALIGN: right" title=720.00 role=gridcell aria-describedby=list2_total>720.00</TD><TD title="" role=gridcell aria-describedby=list2_note> </TD></TR>
So then you could just do.
$("#tblselector).find("#+KeyValue").addClass("ui-state-highlight")
It realy depends on how the row is being added.
You could use the afterInsertRow event but this would fire for each row as it is added to the grid. In addition there is this note on the event.
Note: this event does not fire if
gridview option is set to true
I do not suggest changing the gridview option to false if you are returning a lot of rows and or columns as it will have a big performance impact.
I would have asked for clarification on how the row is being added but dont have enough points for comments.