/*
说明:用于要动态下拉列表选择器
用法:
$("#txt_client")).searchBox({ //txt_client就是(上图)显示 中国中铁有限公司的文本框
url:"../gadget/ajax/ajax_client_search.aspx?key=", //用于取值的url , 这个页面生成的是json 数据格式,
rcol:["CLIENT_CN_NAME","CLIENT_ID"], // 数组,第一个代表如上图,要返回给文本框的字段名,第二个是要给隐藏的文本框的字段名.
scol:["CLIENT_CN_NAME","CLIENT_EN_NAME"], //如上图要显示的哪些列名;
rcontrolid:RealID("txt_client"), //赋值文本框控件ID
scontrolid:RealID("txt_client"), //显示文本框的ID
done:function(){}, //用于选择完后,要执行的事件
action:"click", //事件可以为dblclick,keydown,mousedown etc.,
width:400 //宽度
});
*/
//代码如下
(function($){
// plugin definition
$.fn.searchBox = function(o) {
//初始化传入的参数
var opts=$.extend({}, $.fn.searchBox.defauls, o);
// 默认参数
$.fn.searchBox.defauls={
url:"",
rcol:[], //返回值的列名
scol:[], //显示值的列名
rcontrolid:"txt_value", //赋值文本框控件ID
scontrolid:"txt_name", //显示文本框的ID
done:function(){},
action:"click",
width:300
};
//加上查询框和查询按钮
$(this).after('<div><input id="searchBox_txtsearch" type="text" /><input id="searchBox_btnsearch" type="button" value="查"/></div>');
var showbox="<div id='divsearchbox' class='ui-dialog-container'><div class='ui-dialog-titlebar'><span id='searchBox_title' class='ui-dialog-title'></span><a href='#' οnclick='$(/"#divsearchbox/").hide();' class=/"ui-dialog-titlebar-close/"><span>关闭</span></a></div></div>";
var tbldata="<div class='ui-dialog-content'><table cellspacing=0 cellpadding=0><tbody id='tblsearchbody'></tbody></table></div>";
$("body").append(showbox);
$("#divsearchbox").append(tbldata).hide();
var offset = $("#searchBox_txtsearch").offset();
$("#divsearchbox").css({
float: "left",
position:"absolute",
width: opts.width,
//height: opts.height,
left: offset.left,
top: offset.top + 20,
border:"solid 1px"
});
//所有列名
$.merge(opts.scol,opts.rcol); //opts.scol.concat(opts.rcol);返回一个新数组,将参数添加到原数组
$("#searchBox.btnsearch").unbind(opts.action);
//绑定选定的事件
$("#searchBox_btnsearch").bind(opts.action,function()
{
var s=$("#searchBox_txtsearch").val();
$("#searchBox_title").text("查询关键字:" + s);
if(opts.url=="") return;
var l=opts.scol.length-opts.rcol.length
$.getJSON(opts.url + s,{},function(data)
{
$("#tblsearchbody").empty();
$.each(data,function(i,o)
{
var tr="<tr>";
for(var i=0;i<opts.scol.length;i++)
{
// 数组前边是显示的列,后边要返回的值["display","value"]
tr+="<td>";
if(i<l)
{
tr+= eval("o." + opts.scol[i]) ;
}
else
{
if(i==l)
tr+="<span class='spanname' style='display:none;'>" + eval("o." + opts.scol[i]) + "</span>";
else
tr+="<span class='spanvalue' style='display:none;'>" + eval("o." + opts.scol[i]) + "</span>";
}
tr+="</td>";
}
tr+="</tr>";
$("#tblsearchbody").append(tr);
});
$.fn.searchBox.bindclick();
$("#divsearchbox").show();
//alert($("#divsearchbox").html());
});
});
$.fn.searchBox.bindclick=function(){
$("#tblsearchbody").find("tr").each(function(i,tr)
{
$(tr)
.click(function()
{
$("#" + opts.rcontrolid).val($(this).find("span").filter(".spanvalue").text());
$("#" + opts.scontrolid).val($(this).find("span").filter(".spanname").text());
$("#divsearchbox").hide();
//选择后触发的事件
opts.done($(this).find("span").filter(".spanvalue").text());
})
.mouseover(function()
{
$(this).addClass("ui-slider-handle-active");
})
.mouseout(function()
{
$(this).removeClass("ui-slider-handle-active");
});
});
$("#tblsearchbody tr:odd").addClass("tr_odd");
$("#tblsearchbody tr:even").addClass("tr_even");
}
}
})(jQuery);