查找带回 - 爱码网

这个功能我没有实现，因为我对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