yanickrochon / jquery.uix.multiselect

Completely rewritten, multiselect widget with a more concise API
http://mind2soft.com/labs/jquery/multiselect/
MIT License
139 stars 62 forks source link

loading selected item in order as it was saved #101

Open princeofforest opened 9 years ago

princeofforest commented 9 years ago

This is the prefect widget for me, easy to select and sort. but if it allow user to drag and drop, and dont make sense when load back from database not in order. Please tell me how to do so. Thank you so much for your hard working.

AngryApe commented 8 years ago

I have this problem too, and I found “sortMethod” option can not work. Then I write a resort function which invoked after this multiselect plugin init, it still not work. Like this : initMultiSelect(); sortSelectedOption(); Is there some solution?

stempora commented 7 years ago

Might be a bit late but this was giving me a headache also.

$(this).multiselect( { sortable : true , availableListPosition : "left" , splitRatio: 0.5 , sortMethod: null});

make sure the sort method is null and will work fine. Will take the order you have in the <select . You just need to put the selected options in order you saved.

Cheers

btekbtek commented 6 years ago

Hi I added something like this: $(".multiselect").multiselect({ sortable : true , sortMethod: null });

But its steel sorting in the way that was. Anyone found solution for this? Later I have: (maybe I could use usort?) <?PHP echo adminform::field("Options","productTypeOptions",array("type"=>"select","data"=>"db","db_data"=>array("sql"=>"select * from product_options","_table"=>"product_options","value"=>"id","text"=>"name"),"multiple"=>"multiple" ),$productOptionIDs)?>

awthird commented 3 years ago

I just found this widget and it's exactly what I need. I use it to allow the user to select items to display in a table, and drag and drop works great to allow them to also define the order of the selected items.

The problem I have is that, when I reload the widget with values stored in the database, the selected items revert to alphabetical order, rather than the order in which I mark them as selected. That is, I load the widget initially with all of the possible selections, then, when the page is finished loading, I walk through a separate array of stored selected items and add the selected attribute to them. It works - they do, in fact, appear correctly in the selected options list, but not in the order I have added the selected attribute.

Here's the relevant code to define the widget:

$( "#multiselect_simple" ).multiselect(
   {
     sortMethod: null,
     sortable: true,
     availableListPosition: 'left',
     splitRatio: 0.45,
   }
 );

And here is how I initialize the selected items:

  $(document).ready(function() {
    $( "#multiselect_simple option[value='Item4']").prop("selected",true)
    $( "#multiselect_simple option[value='Item5']").prop("selected",true)
    $( "#multiselect_simple option[value='Item1']").prop("selected",true)
    $( "#multiselect_simple option[value='Item2']").prop("selected",true)
    $( "#multiselect_simple option[value='Item3']").prop("selected",true)
  ...

The widget display them alphabetically in the selected items section. What am I doing wrong?

Thanks!

Sgar80 commented 2 years ago

Hi guys,

I found out a way to load saved results in the right order. It's not elegant but it works and I think it's the only way with this library to "do" it. The way I found is about setting with jquery the selected option, detach them and the append them with the order you want.

Example: you have the saved values 95, 98, 92 in this order.

// this order is not important: val95 = jQuery('#jform_select option[value=\'95\']').prop('selected', true).detach(); val98 = jQuery('#jform_select option[value=\'98\']').prop('selected', true).detach(); val92 = jQuery('#jform_select option[value=\'92\']').prop('selected', true).detach();

// this order is the one that will be shown: jQuery('#jform_select').append(val95); jQuery('#jform_select').append(val98); jQuery('#jform_select').append(val92);