JQuery插件,ajax查询下拉列表,返回选择中行的值

 

/*
    说明:用于要动态下拉列表选择器
    用法: 
    $("#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);