网站地图
【www.gdgbn.com--jquery】
利用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("");
// $(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
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("数据加载失败
" + 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="
";
//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);