In the newest version of Firefox (40.0.2) if I open your demo page http://www.jeasyui.com/demo/main/index.php with browser console open, I can see the following error in there:

SyntaxError: unreachable code after return statement jquery.easyui.min.js line 8166

The 'getChanges' method reruns only those rows where the user has edited by calling 'beginEdit' and 'endEdit' methods. The 'updateRow' method does not affect the result set of the 'getChanges' method.

For me this seems like a bug... The same thing happens when trying to append a row to treegrid, example http://www.jeasyui.com/easyui/demo/treegrid/editable.html

Code:

var node = {"id":11,"name":"Marketing","persons":5,"begin":"4/1/2010","end":"5/1/2010","progress":40};
$('#tg').treegrid('append',{data:[node]});
$('#tg').datagrid('getChanges','inserted'); // returns empty array
$('#tg').treegrid('getChanges','inserted'); // this does not work either, empty array

I have to force it like this:

Code:

$('#tg').data().datagrid.insertedRows.push(node);

No matter if I call beginEdit, endEdit. With datagrid appendRow the getChanges method returns correct values, with updateRow does not.

Maybe it should be in $.fn.datetimebox.defaults only and not to mention in datebox documentation at all because it can't be used there. But thanks for answer.

Documentation http://www.jeasyui.com/documentation/datebox.php says that datebox has a property okText which defaults to string 'Ok'. However, there's no Ok button available in this example: http://www.jeasyui.com/easyui/demo/datebox/basic.html

Is there anyone from the easyUI team who could comment about improving performance when using the datagrid-filters extension?

I think we must buy the commercial version to get this fixed properly...

$.map can also be replaced with for loop, for example

Code:

$.map(opts.filterRules, function(rule){
	addFilterRule(target, rule);
});

This should be much faster

Code:

for(var i=0;i<opts.filterRules.length;i++) addFilterRule(target,opts.filterRules[i]);

http://stackoverflow.com/questions/6551139/jquery-map-vs-javascript-map-vs-for-loop

How to do this for treegrid? Same code but just replace word "datagrid" with "treegrid"?

Another example of wrong usage of jQuery in easyui.min.js is the setIcon method of the menu component, affects to filter initialization as well

Code:

setIcon:function(jq,_418){
return jq.each(function(){
$(_418.target).children("div.menu-icon").remove();
if(_418.iconCls){
$("<div class=\"menu-icon\"></div>").addClass(_418.iconCls).appendTo(_418.target);
}
});

Could be

Code:

setIcon:function(jq,_418){
$(_418.target).children("div.menu-icon").remove();
$('<div class="menu-icon ' +_418.iconCls+'"></div>').appendTo(_418.target);
}

Effect is a few tenths of second.

It seems that also the doFilter method is taking a long time, at least if using remote filtering because it calls the load method.

Code:

	function doFilter(target){
		var name = getPluginName(target);
		var state = $.data(target, name);
		var opts = state.options;
		if (opts.remoteFilter){
	        $(target)[name]('load');
		} else {
			$(target)[name]('getPager').pagination('refresh', {pageNumber:1});
			$(target)[name]('options').pageNumber = 1;
			$(target)[name]('loadData', state.filterSource || state.data);
		}
	}

The request is fast, my server is not a problem. If I comment out this line, time improves by 0,5 seconds:

Code:

$(target)[name]('load');

But then it of course does not work like it should.

In my real application some of the columns are almost always hidden. I think the filter component should not be created for a column if it is hidden when enableFilter method is called. Only when the column becomes visible.

I have the same problem. I would like to move the pagination to server side. Datagrid loads fine, but when I change to next page, it's not sending any request.

http://www.jeasyui.com/forum/index.php?topic=3820.0
http://www.jeasyui.com/forum/index.php?topic=4303.0

These topics help to solve this issue. Another way is not to recreate the pagination component in myLoadFilter method of datagrid-filter.js (remove this code):

Code:

			if (opts.pagination){
				var dg = $(this);
				var pager = dg[name]('getPager');
				pager.pagination({
					onSelectPage:function(pageNum, pageSize){
	                    opts.pageNumber = pageNum;
	                    opts.pageSize = pageSize;
	                    pager.pagination('refresh',{
	                        pageNumber:pageNum,
	                        pageSize:pageSize
	                    });
	                    //dg.datagrid('loadData', state.filterSource);
	                    dg[name]('loadData', state.filterSource);
					},
					onBeforeRefresh:function(){
						dg[name]('reload');
						return false;
					}
				});
				if (name == 'datagrid'){
					var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
					var end = start + parseInt(opts.pageSize);
					data.rows = data.rows.slice(start, end);
				} else {
			        var topRows = [];
			        var childRows = [];
			        $.map(data.rows, function(row){
			        	row._parentId ? childRows.push(row) : topRows.push(row);
			        });
			        data.total = topRows.length;
			        var start = (opts.pageNumber-1)*parseInt(opts.pageSize);  
			        var end = start + parseInt(opts.pageSize);  
					data.rows = $.extend(true,[],topRows.slice(start, end).concat(childRows));
				}
			}

I have the same problem. I would like to move the pagination to server side. Datagrid loads fine, but when I change to next page, it's not sending any request.

Also the filter rules are sent to server even if remoteFilter = false.

After examining the datagrid filter code I noticed that this loop in createFilterButton method is taking a long time:

Code:

			$.each(['nofilter'].concat(operators), function(index,item){
				var op = opts.operators[item];
				if (op){
					menu.menu('appendItem', {
						text: op.text,
						name: item
					});
				}
			});

If I replace this with native Javascript for loop, time improves ~ < 0.1 s...

but also in in jquery.menu.js there is

Code:

$.fn.menu.methods={
appendItem:function(jq,_56){
return jq.each(function(){
_3a(this,_56);
});
}};

I think you should not use jQuery each because it can be much slower than the native loop.

http://code.tutsplus.com/tutorials/10-ways-to-instantly-increase-your-jquery-performance--net-5551

jQuery's each function takes over 10 times as long as JS native "for" loop. This will certainly increase when dealing with more complicated stuff, like setting CSS attributes or other DOM manipulation operations.

Edit: maybe the problem is more with this line in createFilter method

Code:

input.addClass('datagrid-filter').attr('name', field);

Changing it to this:

Code:

var input_tmp = input[0];
input_tmp.setAttribute('class',input_tmp.className += ' datagrid-filter');
input.attr('name', field);

improved time by 0,5 seconds! http://www.zachleat.com/web/quick-performance-tip-jquery-and-addclass/

Another half a second can be gained by removing this line from the for loop there:

Code:

resizeFilter(target, field);

If I take this example: http://www.jeasyui.com/tutorial/datagrid/datagrid30_demo.html and copy paste columns so that there are 36 of them in total... Then this measurement shows that initializing the filter component is taking 2,6 seconds in Firefox and 3,1 in Chrome, using latest browser versions...

Code:

$(function(){
                        var d = new Date();
			var dg = $('#dg').datagrid();
			dg.datagrid('enableFilter', [{
				field:'listprice',
				type:'numberbox',
				options:{precision:1},
				op:['equal','notequal','less','greater']
			},{
				field:'unitcost',
				type:'numberbox',
				options:{precision:1},
				op:['equal','notequal','less','greater']
			},{
				field:'status',
				type:'combobox',
				options:{
					panelHeight:'auto',
					data:[{value:'',text:'All'},{value:'P',text:'P'},{value:'N',text:'N'}],
					onChange:function(value){
						if (value == ''){
							dg.datagrid('removeFilterRule', 'status');
						} else {
							dg.datagrid('addFilterRule', {
								field: 'status',
								op: 'equal',
								value: value
							});
						}
						dg.datagrid('doFilter');
					}
				}
			}]);
                        console.log(new Date()-d);
		});

What is wrong?

Is it possible to make a page where you can select which components you want to include in download? This would reduce file size and improve performance as there is no unnecessary code. Like with jQuery UI: http://jqueryui.com/download/