如何在动态表中使用 Combobox?
李小翔
2013-11-18 14:25

内容列表

供稿人：刁隆
很多时候，我们在做动态表的时候需要用到下拉列表，当下拉列表中的数据较多的时候，就需要用到 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(...)。