列表框中使用js来时行移动的事例,取自sugarCRM,在asp.net中应用以减少刷新

<script language="javascript">
var object_refs = new Object();

function buildSelectHTML(info)
{
        var text;
        text = "<select";

        if ( typeof (info['select']['size']) != 'undefined')
        {
                text +=" size=\""+ info['select']['size'] +"\"";
        }

        if ( typeof (info['select']['name']) != 'undefined')
        {
                text +=" name=\""+ info['select']['name'] +"\"";
        }

        if ( typeof (info['select']['style']) != 'undefined')
        {
                text +=" style=\""+ info['select']['style'] +"\"";
        }

        if ( typeof (info['select']['onchange']) != 'undefined')
        {
                text +=" onChange=\""+ info['select']['onchange'] +"\"";
        }

        if ( typeof (info['select']['multiple']) != 'undefined')
        {
                text +=" multiple";
        }
        text +=">";

        for(i=0; i<info['options'].length;i++)
        {
                option = info['options'][i];
                text += "<option value=\""+option['value']+"\" ";
                if ( typeof (option['selected']) != 'undefined' && option['selected']== true)
                {
                        text += "SELECTED";
                }
                text += ">"+option['text']+"</option>";
        }
        text += "</select>";
        return text;
}

function left_to_right(left_name,right_name)
{
 var display_columns_ref = object_refs[left_name];
//alert(display_columns_ref);
 var hidden_columns_ref = object_refs[right_name];

 var left_td = document.getElementById(left_name+'_td');
 var right_td = document.getElementById(right_name+'_td');

 var selected_left = new Array();
 var notselected_left = new Array();
 var notselected_right = new Array();

 var left_array = new Array();

        // determine which options are selected in left
 for (i=0; i < display_columns_ref.options.length; i++)
 {
  if ( display_columns_ref.options[i].selected == true)
  {
   selected_left[selected_left.length] = {text: display_columns_ref.options[i].text, value: display_columns_ref.options[i].value};
  }
  else
  {
   notselected_left[notselected_left.length] = {text: display_columns_ref.options[i].text, value: display_columns_ref.options[i].value};
  }
  
 }

 for (i=0; i < hidden_columns_ref.options.length; i++)
 {
  notselected_right[notselected_right.length] = {text:hidden_columns_ref.options[i].text, value:hidden_columns_ref.options[i].value};
  
 }

 var left_select_html_info = new Object();
 var left_options = new Array();
 var left_select = new Object();

 left_select['name'] = left_name+'[]';
 left_select['id'] = left_name;
 left_select['size'] = '10';
 left_select['multiple'] = 'true';

 var right_select_html_info = new Object();
 var right_options = new Array();
 var right_select = new Object();

 right_select['name'] = right_name+'[]';
 right_select['id'] = right_name;
 right_select['size'] = '10';
 right_select['multiple'] = 'true';

 for (i=0;i < notselected_right.length;i++)
 {
  right_options[right_options.length] = notselected_right[i]; 
 }

 for (i=0;i < selected_left.length;i++)
 {
  right_options[right_options.length] = selected_left[i]; 
 }
 for (i=0;i < notselected_left.length;i++)
 {
  left_options[left_options.length] = notselected_left[i]; 
 }
 left_select_html_info['options'] = left_options;
 left_select_html_info['select'] = left_select;
 right_select_html_info['options'] = right_options;
 right_select_html_info['select'] = right_select;
 right_select_html_info['style'] = 'background: lightgrey';

 var left_html = buildSelectHTML(left_select_html_info);
 var right_html = buildSelectHTML(right_select_html_info);

 left_td.innerHTML = left_html;
 right_td.innerHTML = right_html;
 object_refs[left_name] = left_td.getElementsByTagName('select')[0];
 object_refs[right_name] = right_td.getElementsByTagName('select')[0];
}

function right_to_left(left_name,right_name)
{
 var display_columns_ref = object_refs[left_name];
 var hidden_columns_ref = object_refs[right_name];

 var left_td = document.getElementById(left_name+'_td');
 var right_td = document.getElementById(right_name+'_td');

 var selected_right = new Array();
 var notselected_right = new Array();
 var notselected_left = new Array();

 for (i=0; i < hidden_columns_ref.options.length; i++)
 {
  if (hidden_columns_ref.options[i].selected == true)
  {
   selected_right[selected_right.length] = {text:hidden_columns_ref.options[i].text, value:hidden_columns_ref.options[i].value};
  }
  else
  {
   notselected_right[notselected_right.length] = {text:hidden_columns_ref.options[i].text, value:hidden_columns_ref.options[i].value};
  }
  
 }

 for (i=0; i < display_columns_ref.options.length; i++)
 {
  notselected_left[notselected_left.length] = {text:display_columns_ref.options[i].text, value:display_columns_ref.options[i].value};
  
 }

 var left_select_html_info = new Object();
 var left_options = new Array();
 var left_select = new Object();

 left_select['name'] = left_name+'[]';
 left_select['id'] = left_name;
 left_select['multiple'] = 'true';
 left_select['size'] = '10';

 var right_select_html_info = new Object();
 var right_options = new Array();
 var right_select = new Object();

 right_select['name'] = right_name+ '[]';
 right_select['id'] = right_name;
 right_select['multiple'] = 'true';
 right_select['size'] = '10';

 for (i=0;i < notselected_left.length;i++)
 {
  left_options[left_options.length] = notselected_left[i]; 
 }

 for (i=0;i < selected_right.length;i++)
 {
  left_options[left_options.length] = selected_right[i]; 
 }
 for (i=0;i < notselected_right.length;i++)
 {
  right_options[right_options.length] = notselected_right[i]; 
 }
 left_select_html_info['options'] = left_options;
 left_select_html_info['select'] = left_select;
 right_select_html_info['options'] = right_options;
 right_select_html_info['select'] = right_select;
 right_select_html_info['style'] = 'background: lightgrey';

 var left_html = buildSelectHTML(left_select_html_info);
 var right_html = buildSelectHTML(right_select_html_info);

 left_td.innerHTML = left_html;
 right_td.innerHTML = right_html;
 object_refs[left_name] = left_td.getElementsByTagName('select')[0];
 object_refs[right_name] = right_td.getElementsByTagName('select')[0];
}

function up(name) {
 var td = document.getElementById(name+'_td');
 var obj = td.getElementsByTagName('select')[0];
 obj = (typeof obj == "string") ? document.getElementById(obj) : obj;
 if (obj.tagName.toLowerCase() != "select" && obj.length < 2)
  return false;
 var sel = new Array();

 for (i=0; i<obj.length; i++) {
  if (obj[i].selected == true) {
   sel[sel.length] = i;
  }
 }
 for (i in sel) {
  if (sel[i] != 0 && !obj[sel[i]-1].selected) {
   var tmp = new Array(obj[sel[i]-1].text, obj[sel[i]-1].value);
   obj[sel[i]-1].text = obj[sel[i]].text;
   obj[sel[i]-1].value = obj[sel[i]].value;
   obj[sel[i]].text = tmp[0];
   obj[sel[i]].value = tmp[1];
   obj[sel[i]-1].selected = true;
   obj[sel[i]].selected = false;
  }
 }
}

function down(name) {
 var td = document.getElementById(name+'_td');
 var obj = td.getElementsByTagName('select')[0];
 if (obj.tagName.toLowerCase() != "select" && obj.length < 2)
  return false;
 var sel = new Array();
 for (i=obj.length-1; i>-1; i--) {
  if (obj[i].selected == true) {
   sel[sel.length] = i;
  }
 }
 for (i in sel) {
  if (sel[i] != obj.length-1 && !obj[sel[i]+1].selected) {
   var tmp = new Array(obj[sel[i]+1].text, obj[sel[i]+1].value);
   obj[sel[i]+1].text = obj[sel[i]].text;
   obj[sel[i]+1].value = obj[sel[i]].value;
   obj[sel[i]].text = tmp[0];
   obj[sel[i]].value = tmp[1];
   obj[sel[i]+1].selected = true;
   obj[sel[i]].selected = false;
  }
 }
}

</script>