欢迎进入Wiki » FAQ » 如何在动态表中使用 Combobox?

如何在动态表中使用 Combobox?

在2013-11-18 14:25上被李小翔修改
评论 (0) · 附件 (0) · 记录 · 信息

供稿人:刁隆

很多时候,我们在做动态表的时候需要用到下拉列表,当下拉列表中的数据较多的时候,就需要用到 combobox 来支持模糊查询以方便客户使用。

假如我们在动态表中想把 name 为 project 的下拉列表设成 combobox,首先在JS中添加如下代码,用来设置页面加载时把可见的 project 设成 combobox:

$j(function() {
    $j("[name='project']:visible").each(function() {
        $j(this).combobox({minLength:1, delay:300}) ;
    });
});

然后在给动态表添加事件(callbackAddRow),作用是在点击新增一行的时候添加行的同时将新加的 project 元素设成 combobox:

var dynTable = new ....;
dynTable.options.callbackAddRow = function(row, refrow) {
    $j(row).find("[name='project']").combobox({minLength:1, delay:300});
}

一般情况下,上面的代码就可以完成任务了,但是动态表加载时,会有100毫秒的延迟,导致上面的第一段代码执行时作用到模板行中的 project 下拉列表;点击添加一行时,会运行第二段代码中的事件,从而在同一个位置出现两个combobox。

解决办法也很简单,因为第一段代码中仅作用于当前可见的 project 元素,因此直接将模板行隐藏即可(这也是我们建议的做法)如:

<!-- 模板行 -->
<tr style="display:none">
 <td>....
</tr>

如果还有其他特殊情况,可以考虑给html元素设置不同的css类,然后在js中区别对待,如 $j("select.foobar").combobox(...)

在2013-11-18 14:22上被李小翔创建

Copyright © 2013 北京博瑞开源软件有限公司
京ICP备12048974号