利用JQuery 来操作 ListBox和ListBox内移动

利用jquery 来操作 listbox和listbox内移动

function listbox_move(listfrom,listto)
        {
            var size = $("#" + listfrom + " option").size();
            var selsize = $("#" + listfrom + " option:selected").size();
            if(size>0 && selsize>0)
            {
                $.each($("#"+listfrom+" option:selected"), function(i,own){
//                    var stext = $(own).text();
//                    var svalue = $(own).val();
//                    $("#" + listto).append("<option value="" + svalue + "">" + stext + "</option>");
//                    $(own).remove();
                    $(own).appendto($("#" + listto));
                    $("#" + listfrom + "").children("option:first").attr("selected",true);
                });
            }
        }
       
        function listbox_order(listname,action)
        {
            var size = $("#"+listname+" option").size();
            var selsize = $("#"+listname+" option:selected").size();
            if(size > 0 && selsize > 0)
            {
                $.each($("#"+listname+" option:selected"),function(i,own){
                    if(action == "up")
                    {
                        $(own).prev().insertafter($(own));
                    }
                    else if(action == "down")//down时选中多个连靠则操作没效果
                    {
                        $(own).next().insertbefore($(own));
                    }
                })
            }
        }

下面看一款详细代码

/*
    name:twoway-select control for jquery
    author:arn
    date:2009-12-29
    remark: ajax url返回数据必须是json格式{state:1,msg:'',fields:[]}
            1、右边可以上下拖动
            2、$('#div').twowaylist({url:'',onbeforesubmit:'',captioncolumn''});
            3、$('#div').twowaylistinit({field_no:'xx',...});
            4、$('#div').twowaylistsubmit({'rptid':$('#txtid').val(),'act':'rpt'}) //ajax url用到的参数
*/
(function($){
 $.addlist = function(t,p)
 {
  if (t.checkbox) return false; //return if already exist 
  
  // apply default properties
  p = $.extend({
      items:[], //all items
      captioncolumn:'caption', //显示的名称
      isgroupcolumn:'group', //分组checkbox用到的字段
      idcolumn:'field_no', //编号字段
    height: 320, //default height
    width: 'auto', //auto width
    url: false, //ajax url
    method: 'post', // data sending method
    errormsg: 'connection error',
    title: false,
    datatype:'json',
    onsuccess: false, // using a custom populate function
    onbeforesubmit: false //提交之前处理事项
    }, p);
       
        //create twoway-select class
        var d = {
         json2str:function(json)
         {
          var isarrobj = $.isarray(json);
          var arr = [];
          //
          for (var key in json)
          {
           var k = isarrobj? '' :  key+":" ;
           
           if (typeof json[key] == 'object' && json[key] != null)
            arr.push(k + d.json2str(json[key]));   //json对象
           else
            arr.push(k + "'" + decodeuricomponent(json[key]) +"'"); //普通值
          }
          return isarrobj ? '[' + arr.join(',') + ']' : '{' + arr.join(',') + '}';
         },
         str2json:function(str)
         {
          return eval('('+str+')');
         },       
            l2r:function(o){
               
                var json = d.str2json($(o).attr('json'));
                var chk = document.createelement("input");
                //if group
                var chked = json[p.isgroupcolumn]==1?'checked':'';
                $(chk).attr({'type':'checkbox','id':'li'+json[p.idcolumn],'checked':chked});
                $(o).prepend(chk);
    $(d.rdiv).find('ol').append(o);
                //change json value,if checkbox state changed
                $(o).find("input:checkbox").bind('click',function()
    {
        if($(this).attr('checked'))
        {
            json[p.isgroupcolumn] = 1;
                    }else{
                        json[p.isgroupcolumn] = 0;
                    }           
        $(o).attr("json",d.json2str(json));
    });   
    $(d.vinput).val(d.getselected());
            },
            r2l:function(o){
                $(o).find(":checkbox").remove();
          $(d.ldiv).find('ol').append(o);
          $(d.vinput).val(d.getselected());
            },
            l2rall:function(){
    $("li", $(d.ldiv).find('ol')).each(function(i,obj){
        d.l2r(obj);
    });           
            },
            r2lall:function(){
    $("li", $(d.rdiv).find('ol')).each(function(i,obj){
        d.r2l(obj);
    });            
            },
            getselected:function(){
                var result=[];
               
    $(d.rdiv).find('li').each(function(i,obj){
        result.push($(this).attr('json'));
    });              
                return result;
            },     
            initdata:function(data){
                $(d.ldiv).find('ol').empty();
                $(d.rdiv).find('ol').empty();
                var li;
                var lbl;
                for (i=0;i<data.length;i++){
                    var li = document.createelement('li');
                    lbl = document.createelement('label');
                    if(true)
                    {
                        $(lbl).text(data[i][p.idcolumn] + ' '+ data[i][p.captioncolumn]); //.attr("for",'li' + data[i][p.idcolumn])
                    }else{
                        $(lbl).text(data[i][p.captioncolumn]);
                    }
                    $(li).attr('json',d.json2str(data[i])).append(lbl);
                  
                    $(d.ldiv).find('ol').append(li);               
                }
                $(d.ldiv).find('ol li').each(function(i,obj)
                {
                    $(obj).bind('dblclick',function()
                    {
                        if($(this).parent().hasclass('twowaylist-lol'))
                        {
                            d.l2r(this);
                        }else{
                            d.r2l(this);
                        }                       
                    }).bind('click',function()
                    {
                        $(this).toggleclass("ui-selected");                       
                    });                
                });
           
            },
            ajaxsubmit:function(para){
                if(p.url){
                  
                    if(p.onbeforesubmit) para= p.onbeforesubmit();
     $.ajax({
        type: p.method,
        timeout:20 * 1000,
        url: p.url,
        async:false,
        data: para,
        datatype: p.datatype,
        success: function(data){
             if(data.state == 1)
             {
                 $(d.caption).html('');
                 d.initdata(data.fields);
                 if(p.onsuccess) //执行成功后
                 {
                     p.onsuccess();
                 }
             }else{
                 $(d.caption).html('数据加载失败<br/>' + data.msg );
             }
        },
        error: function(data) { try { alert(data.tostring()) } catch (e) {} },
        beforesend:function(data) { },
        complete :function(){ }
      });                   
                }
           
            }
        };
       
        if(p.width == 'auto')
        {
            p.width = 600;
        }
        var mdivwidth = 80;
        //init div
        d.adiv = document.createelement('div');
       
        d.ldiv = document.createelement('div');
        $(d.ldiv).addclass('twowaylist-oldiv').width((p.width - mdivwidth) /2 ).height(p.height);
       
        d.rdiv = document.createelement('div');
        $(d.rdiv).addclass('twowaylist-oldiv').width((p.width - mdivwidth) /2 ).height(p.height);
       
        d.mdiv = document.createelement('div');
        $(d.mdiv).width(mdivwidth);
       
        d.mtable = document.createelement('table');
        d.mtable.cellpadding = 0;
        d.mtable.cellspacing = 0;
       
        //add button
        var br="<br />";
        //l2r
  var btndiv = document.createelement('input');
  $(btndiv).addclass('twowaylist-button').attr({'type':'button','value':'>'});
       
        $(btndiv).click(
            function()
            {
                $('.ui-selected', d.ldiv).each(function()
                {
                    d.l2r(this);
                });
            }
        );
        $(d.mdiv).append(btndiv);
        $(d.mdiv).append(br);
        //r2l
        btndiv = document.createelement('input');
        $(btndiv).addclass('twowaylist-button').attr({'type':'button','value':'<'});
        $(btndiv).click(
            function()
            {
                $('.ui-selected', d.rdiv).each(function()
                {
                    d.r2l(this);
                });
            }
        );
        $(d.mdiv).append(btndiv);
        $(d.mdiv).append(br);
        //l2r all
        btndiv = document.createelement('input');
  $(btndiv).attr({'type':'button','value':'>>'}).addclass('twowaylist-button');
        $(btndiv).click(
            function()
            {
                d.l2rall();
            }
        );
        $(d.mdiv).append(btndiv);  
        $(d.mdiv).append(br); 
        //r2l all
        btndiv = document.createelement('input');
  $(btndiv).attr({'type':'button','value':'<<'}).addclass('twowaylist-button');
        $(btndiv).click(
            function()
            {
                d.r2lall();
            }
        );
        $(d.mdiv).append(btndiv);                                          
  $('span',d.mdiv)
  .css教程({paddingleft:20})
  ;           
       
       
        //set div
        d.caption = document.createelement("caption");
        $(d.mtable).append(d.caption);
        //set table th
        var thead = document.createelement("thead");
        var tr = document.createelement("tr");
        var th=document.createelement("th");
        $(th).html('待选项');
        $(tr).append(th);
        th=document.createelement("th");
        $(tr).append(th);
        th=document.createelement("th");
        $(th).html('已选项');
        $(tr).append(th);               
        $(thead).append(tr);
        $(d.mtable).append(thead);
        var tbody = document.createelement("tbody");
       
        tr = document.createelement("tr");
       
        var td = document.createelement("td");
        var lol= document.createelement("ol");
        $(lol).addclass('twowaylist-lol');
        $(d.ldiv).append(lol);
       
        $(td).append(d.ldiv);
        $(tr).append(td);
        td = document.createelement("td");
        $(td).append(d.mdiv);
        $(tr).append(td);
        td = document.createelement("td");
       
        var rol= document.createelement("ol");
        $(rol).addclass("twowaylist-rol");
        $(d.rdiv).append(rol);
        $(td).append(d.rdiv);
        $(tr).append(td);
       
        $(tbody).append(tr);
        $(d.mtable).append(tbody);
        $(t).append(d.mtable);
       
        d.vinput = document.createelement("input");
        $(d.vinput).attr({'type':'hidden','id':'twowaylistvalue'});
        $(t).append(d.vinput);
        //leftlist selectable
     //$(lol).selectable();       
        //rightlist sortable
     $(rol).sortable();       
    
        t.list = d;
        //load items
        if(p.items)
        {
            d.initdata(p.items);
        }
        return t;
    };
   
 var docloaded = false;
 $(document).ready(function () {docloaded = true} );
    //初始化
 $.fn.twowaylist = function(p) {
  return this.each( function() {
   var t = this;
    if (!docloaded)
    {
     $(this).hide();
     $(document).ready
     (
      function ()
      {
       $.addlist(t,p);
      }
     );
    } else {
     $.addlist(this,p);
    }
   });
 }; //end twowaylist   
 //初始化列表，参数为json array
 $.fn.twowaylistinit = function(data) {
     return this.each(function(){
         if(this.list)
         {
             this.list.initdata(data);
         }
     });
 }; //end twowaylistinit
 //ajax提交，获取字段列表，参数如{id:'2'}
 $.fn.twowaylistsubmit = function(pa) {
     return this.each(function(){
         if(this.list)
         {
             this.list.ajaxsubmit(pa);
         }
     });
 }; //end twowaylistsubmit 
})(jquery);

 

时间： 2024-09-20 05:05:50

利用JQuery 来操作 ListBox和ListBox内移动的相关文章

利用jquery操作Radio方法小结_jquery

在开发中经常会用到Radio来实现用户的选择效果,我在项目中积累了一些利用JQUERY来操作Radio的方法,在这里分享一下,供有需要的朋友借鉴. 1.改变radio的选择,触发一些效果 复制代码 代码如下: $("input:radio[name='dialCheckResult']").change(function (){ //拨通 alert("123"); }); 2.让页面中所有的radio可用. $("input:radio").a

jquery ：操作iframe

原文 jquery :操作iframe 1. 内容里有两个ifame <iframe id="leftiframe"...</iframe> <iframe id="mainiframe..</iframe> leftiframe中jQuery改变mainiframe的src代码: $("#mainframe",parent.document.body).attr("src","http:/

利用jQuery对无序列表排序的简单方法_jquery

利用jQuery对无序列表排序的原理是:获取到无序列表中的所有列表项,并转成数组形式,使用JavaScript函数对其进行排序后再次输出.其中使用到的jQuery函数有ready().get().text().each().append()和JavaScript函数sort(). 1．jQuery函数介绍 (1)jQuery函数get()--获取匹配元素集合 该函数取得所有匹配元素的一种向后兼容的方式(不同于jQuery对象,实际上是元素数组).其语法形式如下: object.get() 注:如

jQuery DOM操作总结教程

页面加载之DOMReady事件 所谓domReady,也就是文档就绪,我们都知道,在操作dom时必须要在dom树加载完成后才能进行操作.如何检测DOM树已经构建完成,以下是一些实现的方式: 1.使用jQuery: // with jQuery$(document).ready(function(){ /* ... */ });// shorter jQuery version$(function(){ /* ... */ }); 2.监听DOMContentLoaded事件,DOM 树创建完成后

利用JQuery和Servlet实现跨域提交请求示例分

 这篇文章主要介绍了利用JQuery和Servlet实现跨域提交请求示例,需要的朋友可以参考下 原理:JavaScript的Ajax不可以跨域,但是可以通过向本地的一个Servlet发出请求,由Servlet完成跨域.再把远程的结构返回给客户端.这样Ajax就可以跨域了.在后面,再发一个PHP版本的,请大家关注啊.下面是代码   JS代码:   注意:在Post方式时,param1和param2为向远程发送的参数值,可以有多个.    代码如下: //GET方式 function reqeust

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.21　技巧：利用jQuery Mobile的辅助函数

9.21 技巧:利用jQuery Mobile的辅助函数 jQuery Mobile在发起AJAX请求的背后使用了许多实用函数(utility function).为了方便起见,这些实用函数也是可以复用的.代码清单9-25演示了为自己的目的而使用与URL相关的实用函数. 代码清单9-25 使用parseUrl()函数读取URL 00 <!DOCTYPE html> 01 <html> 02 <head> 03 <title>URL Utilities<

利用jQuery实现可以编辑的表格_jquery

今天学习了利用jQuery实现可以编辑的表格这个例子.这个例子需求是这样的:在前台的表格中单击单元格便可修改其中的内容,回车键保存修改的内容,esc撤销保存的内容.原理:单击客户端表格单元格时,在单元格中添加一个文本框,并将单元格中原来的内容赋值给文本框,再进一步去修改文本框内容,修改后将文本框内容重新赋值给单元格. 源码: 前台代码: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeB

利用JQuery为搜索栏增加tag提示_jquery

很简单的一个功能,就是当用户在搜索栏输入搜索字符时候,利用JQuery的功能把一些预设好的关键字浮现出来,除了让用户意外一下,还有就是让用户简化输入.比如象下图的样子: 实现的方法很简单,首先是要在你的网站上加载JQuery,然后再加载下面的JS文件,下载之 复制代码 代码如下: (function($){var globalTags=[];window.setGlobalTags=function(tags){globalTags=getTags(tags);};function getTag

利用JQuery制作自定义Alert Box

在做网页的时候常常会遇到这么一个需求,就是当我们做完一定的后台操作,比如说数据库更新之后,需要给用户一个提示信息,然后再转向到其他页面. 通常我们怎么做呢?利用JS自带的alertbox吗?那个太简陋了,或者利用showModelDialog弹出一个网页吗?那个速度太慢又太丑陋.也许有人会利用JS 来做一些特效,但是今天我在这里介绍一种利用JQuery框架就能轻松做到的办法.   首先,你需要下载最新的JQeruy框架和本实例需要用到的CSS文件和JS插件 ,笔者在这里提供下载 /Files/d