查找带回

这个功能我没有实现，因为我对bjui还不熟悉，现在的新版本的将这个功能去除了。抄一遍吧

 

查找带回功能，流程：

1、打开一个呈现数据的弹出窗口

2、选择一个或多个值，将值返回到触发页面对应的input

3、关闭弹出窗口

 

感觉自己能写dialog实现，不看了现在，不测试没啥兴趣。到时候用到了再补上吧。

 

现在我下载了旧版本，然后测试能够成功！

 

首先要知道什么是查找带回的功能：

1、点击某个地方，打开一个呈现数据的弹出窗口；

2、选择一个或多个值，将值返回到触发页面对应的input；

3、关闭弹出窗口

 

要求：

1、首先你需要写一个查找带回的组件：

两种方式：

　　1、Data属性：input添加属性data-toggle="lookup",或者点击含有属性data-toggle=“lookupbtn”的a元素触发

input添加属性data-toggle="lookup":

<label>PID</label><input type="text" name="pid" size="5">
        <label>NAME</label><input type="text" data-toggle="lookup" name="name" size="10" data-url="jsp/mylookup.html">

a链接data-toggle="lookupbtn"触发：

<label>PID</label><input type="text" name="t2.pid" size="5">
        <label>NAME</label><input type="text" name="t2.name" size="10"><a href="jsp/mylookup.html" data-toggle="lookupbtn" data-group="t2">打开lookup窗口</a>

 

2、jqueryAPI触发方式：

$(input).lookup(options)

例子：

<script type="text/javascript">
          $(function(){
            $("#llk").click(function(){
              $(this).lookup({url:'jsp/mylookup.html',group:'t3'});
            });
          });
        </script>
        <label>PID</label><input type="text" name="t3.pid" size="5">
        <label>NAME</label><input id="llk" type="text" name="t3.name" size="10">

 

ok，我们知道了如何创建lookup组件，那么它的弹出窗口有什么要求吗？如何做到将值返回？将值返回有什么需要注意的吗？

这是我们例子中的查找页面（弹出窗口）：

<div class="bjui-pageHeader">
    <form id="pagerForm" data-toggle="ajaxsearch" action="mylookup.html" method="post">
        <div class="bjui-searchBar">
            <label>名称：</label><input type="text" value="" name="code" size="10" />&nbsp;
            <button type="submit" class="btn-default" data-icon="search">查询</button>&nbsp;
            <a class="btn btn-orange" href="javascript:;" data-toggle="reloadsearch" data-clear-query="true" data-icon="undo">清空查询</a>&nbsp;
            <div class="pull-right">
                <input type="checkbox" name="lookupType" value="1" data-toggle="icheck" data-label="追加" checked>
                <button type="button" class="btn-blue" data-toggle="lookupback" data-lookupid="ids" data-warn="请至少选择一项职业" data-icon="check-square-o">选择选中</button>
                <br/>

            </div>
        </div>
    </form>
</div>
<div class="bjui-pageContent">
    <table data-toggle="tablefixed" data-width="100%">
        <thead>
            <tr>
                <th data-order-field="id">No.</th>
                <th data-order-field="name">名称</th>
                <th data-order-field="note">描述</th>
                <th width="74">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>自由职业</td>
                <td>Free Man</td>
                <td>
                    <a href="javascript:;" data-toggle="lookupback" data-args="{pid:'1', name:'自由职业'}" class="btn btn-blue" title="选择本项" data-icon="check">选择</a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>教师</td>
                <td>teacher</td>
                <td>
                    <a href="javascript:;" data-toggle="lookupback" data-args="{pid:'2', name:'学生'}" class="btn btn-blue" title="选择本项" data-icon="check">选择</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

View Code

<a href="javascript:;" data-toggle="lookupback" data-args="{pid:'2', name:'学生'}" class="btn btn-blue" title="选择本项" data-icon="check">选择</a>
                    <button class="btn-green" data-toggle="lookupback" data-args="{pid:'2', name:'学生'}" class="btn btn-blue"  data-icon="check">选择</button>

选择返回的组件可以是一个a链接也可以是一个按钮，但是data-toggle必须是“lookupback” 返回的值是json格式的，其中的key和主页面中的name与group是一种对应关系。

如果选择多个不替换而是,分隔的话，上面的那个多选按钮的代码，不过暂时我没看懂。

 

参数（options）

名称	类型	默认值	描述
url	string	null	【必选】D-Url 打开looupu的URL，a链接触发时可以将url定义在href属性
group	string	null	【可选】input的名称，适用于input名称为"aa.bb"的形式，其中group为：aa    我的理解：类似于struts中自动参数注入的时候的对象.属性名的形式，定义了group为对象，那么在对应页面中的属性名的值可以注入name为对象.属性名当中
suffix	string	null	【可选】input的名称后缀，适用于input名称为"abcd[]"或者"aa.bb[]"的形式，其中suffix为: [],特别注意：如果真实情况suffix为"[]"，请写为" []"，空格加[]，防止被转义为空数组
id	string	lookup_dialog	【可选】弹出窗口的id
mask	boolean	true	【可选】是否弹出模态窗口
width	int	600	【可选】弹出窗口的宽度
height	int	400	【可选】弹出窗口的高度
title	string	Lookup	【可选】弹出窗口的标题，单击触发时，如未明确定义title，将取元素的text值作为title
maxable	boolean	true	【可选】弹出窗口可以最大化
resiable	boolean	true	【可选】弹出窗口可以调整大小

 

事件

事件名称	中文说明	描述
afterchange.bjui.lookup	带回值后的事件	监听该事件，可以在input取回值后进行相关操作

这样监听lookup的事件：mylookup -selector表示lookup赋值了的input选择器

$('mylookup - selector').on('afterchange.bjui.lookup', function(e, data) {
    var myvalue = data.value
    
    // do something...
})

 

注意：

关于动态更换url：如果需要动态更换lookup的url，需要为lookupbtn属性新增属性data-newurl，如：

$('input').parent().find('a.bjui-lookup').data('newurl','new url');//通过input框修改附加按钮的url
$('lookupbtn').data('newurl','new url'); //直接修改lookup按钮的url