JavaScript的B-JUI框架的look up初级使用

最新推荐文章于 2021-09-08 15:03:22 发布

lilulu_12138

最新推荐文章于 2021-09-08 15:03:22 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lilulu_12138/article/details/81669808

本文介绍了一种基于输入框的联动数据选择器实现方式，点击输入框旁的放大镜图标，可打开新页面显示数据列表供用户选择。选中数据后，其详细信息将回填至输入框对应的字段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

look up

样式：

功能：点击放大镜按钮会弹出出新的页面x-lookup.html，在该页面会展示所要选择的数据列表，点击页面上定义的某一行的选择按钮，会把该行数据封装成一个数组，在原页面由input的data-group属性定义一个此数组的别名，通过这个别名取到该数组里面的值，再由input的name属性展示数组里面的各个数据

定义代码如下：

<input 
    data-toggle="lookup" 
    data-url="Budget/budget-lookup.html"  
    data-title="我是标题" 
    data-group="student"
    name="student.name" 
    readonly
>

data-toggle：look up的定义属性，表示定义一个带有放大镜的输入框

data-url：新页面x-lookup.html的路径

data-title：新页面的标题

data-group：用于接收新页面返回的数据

x-lookup.html

页面：

代码：

<div class="bjui-pageHeader">
    <form id="pagerForm" data-toggle="ajaxsearch" action="table-edit-lookup.html" method="post">
        <input type="hidden" name="pageCurrent" value="1">
        <input type="hidden" name="pageSize" value="${model.pageSize}">
        <input type="hidden" name="orderField" value="${param.orderField}">
    </form>
    <div class="bjui-searchBar">
        <label>名称：</label>
        <input type="text" id="insertall-lookup-code" value="" name="" onkeydown=""                size="10">&nbsp;
        <button type="submit" class="btn-default" data-icon="search" onclick=""></button>&nbsp;
        <a class="btn btn-orange" href="javascript:;" onclick=""
           data-toggle="reloadsearch" data-clear-query="true" data-icon="undo">清空查询</a></li>
    </div>
</div>
<div class="bjui-pageContent tableContent">
    <table data-toggle="tablefixed" data-width="100%">
        <thead>
        <tr>
            <th width="50px" data-order-field="id">No.</th>
            <th  data-order-field="name">姓名</th>
            <th  data-order-field="type">性别</th>
            <th width="50px" data-order-field="age">年龄</th>
            <th width="50px" data-order-field="major">专业</th>
            <th width="74px">操作</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<div class="bjui-pageFooter">
    <div id="insertalllookup-page" class="pagination-box" >
    </div>
</div>

为页面添加部分数据

页面：

代码：

for (var i = 0; i < 5; i++) {
         html += '<tr><td>' + (i+1) + '</td>';
         html += '<td>学生' + (i+1) + '</td>';
         html += '<td>男</td>';
         html += '<td>' + (i+17) + '</td>';
         html += '<td>计算机</td>';
         html += '<td><a href="javascript:;"  data-args="{id:\''+   (i+1) + '\','
              + 'name:\' 名字' + (i+1) + '\','
              + 'id:\' id' + (i+1) + '\','
              + 'type:\'计算机' + (i+1) + '\','
              + 'unit:\'' + (i+1) + '\',\'}"'
              + 'class="btn btn-blue" title="选择本项" data-icon="check">选择</a></td>                </tr>';
}
$(".tableContent").find('tbody').html('').append(html);

将添加数据的HTML代码拼接在一起保存在变量html中，再通过append方法将变量html中的代码拼接到表体tbody中

data-args：将选中行的数据以key:value的形式保存起来，点击选择按钮时，会将数据带回给输入框input的属性data-group,通过data-group定义的值获取到选中行的数据

上面的例子中，输入框input的属性data-group定义的值为student,通过student.name可以获取到选中行的姓名name的值