jBox，实现批量查询

    【项目需求】

    系统使用人员希望可以根据一批号码查询到对应的信息。组长在其他系统见过类似的功能，就给我直接提供了方案。利用jBox插件，在对话框中输入批量查询的号码，号码间以回车分开，查询的时候，以','标识。

    【项目环境】

    开发软件：MyEclipse10；数据库：Oracle；项目框架：Struts1；浏览器：IE8.

    【jBox学习】

    插件说明：

    jBox 是一款基于 jQuery 的多功能对话框插件，能够实现网站的整体风格效果，给用户一个新的视觉享受。

    运行环境：

    兼容 IE6+、Firefox、Chrome、Safari、Opera 等主流浏览器。备注：IE不支持边框的圆角样式。

    使用方法：

    在jsp页面上引入相关的jquery和jbox文件。然后根据jBox已有的函数原型写代码就行。

    【项目实战】

    1.在页面增加批量添加号码的按钮和显示批量号码的文本框。

<td nowrap class="tdtext"><span>批量存单号</span></td>         <td nowrap class="tdtext" align="center">             <input type="text" name="idNo" id="idNo" disabled="disabled" value="">         </td>         <td>             <input type="button" id="ID_btn" name="ID_btn" value="批量添加存单号" onclick=addIDNo()>         </td>

    2.点击“批量添加存单号”，加载jBox对话框。   

//批量查询多个存单号到对应的input中        function addIDNo(){        var html="<div style='padding:10px;'>请输入存单号，存单号之间以回车分开:<textarea id='idno' name='idno' style='height:150px;width:245px'/></div>";        var submit=function(v,h,f)        {            var pal=/\r/g;  //全部替换            var ek=/\n/g;             var id1=f.idno.replace(pal,"");                        var ids=id1.replace(ek,",");                        if(ids=='')                {                    $.jBox.tip("请输入存单号",'error',{focusId:"idno"});                    return false;                }                            $("#idNo").val(ids);                                return true;                    };        $.jBox(html,{title:"批量存单号",submit:submit,width:270,draggable: false});        }  

   3.确定查询的号码后，显示在文本框中，执行批量查询方法。

//页面上隐藏的表单，然后执行对应的action<form action="/DataManagerAction.do?action=multiQuery" method="post" id="form1" name="form1" >        <input type="hidden" name="idNos" id="hid" value="${idNos}">        </form>    

 //提交表单，批量查询多个订单号    function multiQuery(){        document.getElementById("hid").value=document.getElementById("idNo").value;       document.form1.submit();    }  

    后台查询的语句比较简单，在此就不粘代码了。下面，说说在做这一需求时，遇到的问题。

    【问题重现】

    jBox对话框加载不出来。出现各种错误，提示jQuery的脚本出错，提示不支持此属性或方法，提示对象不能为空，提示网页上有错误。

    这些问题归根结底是两个方面：第一，jQuery没有加载上；第二，浏览器的设置。

    上网查了很多资料，就挨个试着改，解决的思路如下：

    1.因为项目中用到了模板页面，而我只在操作的页面上引入了jQuery，与其相关的页面都没有引用，这就是上面说到的第一个问题。所以，应该在其它相关页面上把jQuery都引用上，而且引用的脚本顺序也是不能错的。

    2.浏览器的问题，IE8兼容性差，与jQuery的脚本不兼容。需要对浏览器进行相应的设置。禁用脚本调试，降低IE安全设置的级别，启用与java相关的设置。

    改了这些，才把jBox给弄出来。

    【问题升级】

    这个功能在我开发用的电脑上算是实现了，我把代码弄到组长电脑上，他就出现了和我之前一样的错误，想想应该是需要设置IE浏览器吧。按照我电脑上的设置，没有用，解决不了问题。这让我又开始怀疑其它方面了。

    【一面之缘】

    最后我把自己电脑上的IE设置重置了，jBox也不能加载出来了。这么看来，还是浏览器的设置问题。可是，我怎么设置都不行了，总是网页有错误，也不知道当时是怎么弄的就出来了，让人头疼的IE8,让我和jBox仅有一面之缘。最后，解决不了加载jBox的问题，就只能是直接在页面的文本框输入号码，进行批量查询了。

    【项目总结】

    虽然最后上线不是用jBox对话框，但我还是学习到了jBox这个新东西的，至少有了一次做出来的经历。我想，换个浏览器，加载jBox就不成问题了的。以后，应该还是会有用的到的地方滴。