SM4021弹窗产品名称CPMC来查询，多选框DIV

 

var tzlist = []; //用于缓存的数据表
var target; //被点击的输入框
//创建一个DIV块
var str_tzdiv = "<div id='tzdiv' style='background:white;z-index:999;position:absolute;border:1px solid BLACK;overflow:auto;display:none;'></div>";
$(document.body).append(str_tzdiv);

var tzdiv = $("#tzdiv");
//添加确定按钮
var a_qd = $("<a/>",
    {
        text : "[确定]",
        style : "cursor:pointer;padding-top:5px;padding-left:5px;color:red;display:block;float:left"
    }
    );
tzdiv.append(a_qd);
//添加取消按钮
var a_qx = $("<a/>",
    {
        text : "[取消]",
        style : "cursor:pointer;padding-top:5px;padding-left:5px;color:red;display:block"
    }
    );
tzdiv.append(a_qx);

//点击确定按钮
a_qd.click(function (){
    if (target)
    {
        target.val("");
        var names = '';
        tzdiv.find("input:checkbox").each(function (){
            if ($(this).prop("checked")) {                
                names = names + ',' + $(this).attr('name');
            }
        });
        target.val(names.replace(/(^,)|(,$)/g, ''));       
        tzdiv.hide();
    }
});

//点击取消按钮隐藏tzdiv
a_qx.click(function ()
{
    if (target)
    {
        tzdiv.hide();
    }
}
);

//点击其他区域隐藏tzdiv
$("body").click(function ()
{
    if (target)
    {
        tzdiv.hide();
    }
}
);
//阻止冒泡
function stopBubble(e)
{
    if (e && e.stopPropagation)
        e.stopPropagation();
    else
        window.event.cancelBubble = true;
}
tzdiv.click(function (event)
{
    event = event || window.event;
    stopBubble(event);
}
);

//给单元格文本框赋予点击事件*/
$(function () {   
    $("#val_CPMC").bind("click", function (event) { /*根据属性绑定点击事件*/
        event = event || window.event;
        stopBubble(event);//阻止冒泡*/
var sql = "select wl.id as ID,wlmc as NAME FROM SM_ZDB_CP_TB cp left join SM_ZDB_XTWL_TB ";
sql = sql+" wl on wl.id=cp.XTWLID where cp.sfyx=1 ";
sql = sql+"  ORDER BY CP.SORTCODE";
        tzdiv.find('li').remove('li');
        target = $(this);
        var base = this;        
        var data = readDataAst(sql);
        if (data == null || data == '') {
            tzdiv.hide();
            return false;
        }
            var jdata = $.parseJSON(data);
            showtz(jdata);
            
        function showtz(tzlst) {
            var tzdivheight = 300;
            tzdiv.find('li').remove('li');/*移除原有li*/
            tzdiv.width($(base).width() + 900);
            tzdiv.height(tzdivheight);
            var pos = $(base).offset();/*输入框（target）的位置*/
            tzdiv.css("left", pos.left);
            /*判断显示框是在输入框上面还是下面*/
            var tzdivtop = ($(document.body).height() - pos.top - $(base).height()) > tzdivheight || pos.top < tzdivheight ? (pos.top + $(base).height() + 5) : (pos.top - tzdivheight - 5);
            tzdiv.css("top", tzdivtop);
            var longID='',longestname = '', ismulticol = false;/*长度最长的参数、是否多列显示*/
            $.each(tzlst, function (index, item) {
                var id = item.ID;
                var name = item.NAME;
                var listyle = '';
                /*行数大于5则多列显示，通过li左浮动实现多列显示*/
                if (tzlst.length > 5) {
                    ismulticol = true;
                    listyle = "float:left;margin:1px 5px;width:" + (name.length * 1 + 1) + "em";
                    if (name.length > longestname.length)
                        longestname = name;
       longID =id;
                }
                var li = $("<li/>", {
                    text: name,id:id,                   
 style: "list-style-type:none;color:#084083;font-size:12px;list-style-position:outside;" + listyle
                });
                var ck = $("<input/>", {
                    type: "checkbox",
                    id: id,
                    name: name
                }).click(function () {
                });
                li.prepend(ck);
                tzdiv.append(li);
            });
                if (ismulticol) {//多列显示，计算每列的宽度和列数
                      var liwidth = $("#" + longID).width(),
                        largestwidth = $(document.body).width() - pos.left,//tzdiv.css("left").substr(0,tzdiv.css("left").length-2),//tzdiv.offset().left,
changablewidth = (liwidth + 10) * (tzlst.length / 5 + 1);//分5行的时的tzdiv宽度
                    //tzdiv的宽度不能超出页面可显示宽度，超出时重新计算最大列数，此时行数不再是5行。20是滚动条宽度，40是tzdiv与页面最右侧预留宽度
                    var tzdivwidth = largestwidth > changablewidth ? changablewidth + 5 : ((liwidth + 10) * Math.floor((largestwidth - 40) / (liwidth + 10)) + 20);
                    tzdiv.find('li').width(liwidth);
                    tzdiv.width(tzdivwidth);
                }            
            tzdiv.show();
        }
    });
});

var sql = "select wl.id as ID,wlmc as NAME FROM SM_ZDB_CP_TB cp left join SM_ZDB_XTWL_TB ";
sql = sql+" wl on wl.id=cp.XTWLID where cp.sfyx=1 ";
sql = sql+"  ORDER BY CP.SORTCODE"; 
用sql累加，不要用长sql语句