text: 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 functions 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.
  Creating list of items is simple and you can hold any objects in it. You can also define and override
  compare 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:
  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
  compare function for complex objects:
  var mylist = new generic.list(); mylist.compare = 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 method and property 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):
  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.
  selectlist
  jsonformat fixed
  General
  News
  Question
  Answer
  Joke
  Rant
  Admin