JavaScript Advanced List

• Download sample and source code - 6.62 KB

Introduction

When you work with a list of objects in Ajax, it is very important to add, delete, find objects in the list but JavaScript array does not contain any of them. We need to create an advanced list that works with all objects. In .NET platform, there is "Generic List" class that can do the same. My function is like that one. We can say its name: an Array with dynamic size. (In JavaScript, it is impossible to remove items from an array or resize an array.)

Another use of this tool is for creating two lists that can change and move position of items in the list. I create a SelectList function that can load select or dropdown items and load all items to a list object. It is possible to resize dropdown, move items and also remove items from it.

Using the Code

Creating a list of items is simple and you can hold any objects in it. You can also define and override isEqual function for finding items in a list:

var mylist = new generic.list();

The question arises: What I can do with this list? Your answer is:

• Add to List
• Insert to specific position in List
• Remove from List
• Remove from specific position in List
• Find in List
• Clear List
• Join List
• Add Range of Array Items to List

For example, we get a list of checked checkbox in a form for sending to the server using Ajax:

var chklist = new generic.list();

// function that attach to input checkbox click event
function check(el){
	if(el.checked){
		chklist.add(el.value);
	}else{
		chklist.remove(el.value);
	}
}

You just add simple code to get the list, it is possible to prevent the user from adding equal objects to list:

// function that attach to input checkbox click event [Prevent Duplicate]
function check(el){
	if(el.checked){
		if(!chklist.find(el.value))
			chklist.add(el.value);
	}else{
		chklist.remove(el.value);
	}
}

Find function returns an integer value if it is greater than -1, an object is found and value is first seen of item's position. It uses the compare function. compare function in normal condition just returns that if two objects are equal and use "=" operator, but if we use complex objects, how do we compare them?

You can override the isEqual function for complex objects:

var mylist = new generic.list();
mylist.isEqual = function(a, b){
	return (a["id"] == b["id"] && a["name"] == b["name"]);
}
mylist.add({id:1,name:"Mahdi"});
mylist.add({id:2,name:"Alireza"});
mylist.add({id:3,name:"Rouzbeh"});
var result = mylist.find({id:1,name:"Mahdi"});
// result is 0 (position of result)

The following table shows the full methods and properties of the generic.list object:

Now you can see some functionality of generic.list, but one of the tools that is very important if another object uses this class is selectlist.

What can do this function? Let's see a sample:

We have two select lists with multi-select attribute set to true, we need to move items from BOX 1 to BOX 2. We also need to change Priority of items in BOX-2 (Target):

With selectlist function, it is very simple and easy. Just see the code:

var second, first;
function load(){
second = new  selectlist("secondbox");
second.load();
first = new selectlist("firstbox");
}

This function must be loaded after HTML codes of box or in page-load. For adding selected Items from BOX-1 to BOX-2, we need addFrom method from the second box:

second.addFrom('firstbox',true)

The first parameter is ID of BOX-1 and second parameter is an option to remove the moved items to the second box or just copy them.

Also it is possible to move items in the box. Let's move the priority of selected items in BOX-2:

second.move(true)

When using the move method, the parameter says that move direction is UP or not. False means DOWN. You can do it with one line of code!

selectlist is very powerful, we can see other functionality of it. For example, for complex objects, we can load Data from server dynamically to a dropdown or select list. Each selectlist object and normal DOM select list has options property. But options in selectlist is a generic.list object.

Example of complex objects:

var SampleServerData = [{id:1,code:"First Item"},{id:2,code:"Second Item"}];
var boxlist = new selectlist('boxid');

//Clear box data
boxlist.clear(true);

//Add server json data to list
boxlist.options.addRange(SampleServerData);

//set value and text (Which property is Text and Which is Value of box
boxlist.setValue("id");
boxlist.setDisplay("name");

boxlist.build();

First I clear data from the box. Next all results to Box but select list need to know which property of items is TEXT and which is VALUE of items in box, then call build that shows the result.

There are some other methods that help you to work with object. The following table shows a list of full methods of this object (dd: means drop-down):

Points of Interest

I think many other functionalities can be done by these codes, like other objects or you can use it to hold table rows and change them in memory. You can download the sample code and enjoy!

I build useful JavaScript dataset and data repeaters and in my next article I will describe them. They are based on this generic.list object.

Update Note

In the comments, Jeffrey Scott Flesher guided me to get some better functions in Add, Remove and Insert. I use his code for better performance. Thanks everyone for commenting.

History

• 2009/08/02
  • Optimize codes based on comment of Jeffrey Scott Flesher
• 2008/10/27
• One little bug in selectlist
• Added more methods, fixed bug in complex object join
• 2008/9/29
• Bug in json format fixed