Easyui - 一个比较复杂的ComboGrid（数据表格下拉框）多选的例子

由于某种情况下，使用ComboGrid的时候比较多，为了方便以后使用的时候方便查找，在这里记录一下。

适用场景：多项选择，自动完成，看下面的效果图。

效果图：

由于需要多选，因此不能在原来的输入框中通过逗号隔开输入多项实现，所以在弹出的datagrid中增加了一个输入框，并且增加了一个清空已选内容的按钮。  

前端代码：

<th>
    病种[<span class="format_required">*</span>]：
</th>
<td colspan="3">
    <script type="text/javascript">
        $(function () {
            setTimeout(function () {
                var old = '';
                var search = true;
                var query = [];
                var $grid = $('#kc21_alc028');
                var $input = $('input[name=aka066]');
                $input.keyup(function () {
                    var _new = $input.val();
                    if (_new != old) {
                        old = _new;
                        query = [old];
                        setTimeout(function () {
                            if (query.length > 0) {
                                var param = query.pop();
                                query = [];
                                if (param != '') {
                                    var aka081 = $grid.combo('getText');
                                    $grid.combogrid('grid').datagrid('load', {zjm: param});
                                    setTimeout(function(){
                                        $grid.combo('setText', aka081);
                                    },100);
                                }
                            }
                        }, 1500);
                    }
                });
                $grid.combo('options').onShowPanel = function () {
                    setTimeout(function(){
                        $input.focus();
                    },100);
                }
                $grid.combogrid('grid').datagrid('options').onSelect = function(){
                    return false;
                };

                $grid.combogrid('grid').datagrid('options').onClickRow = function(index, row) {
                    search = false;
                    var aka080 = $grid.combo('getValue');
                    var aka081 = $grid.combo('getText');
                    if (aka080) {
                        //去重
                        if(aka080.split(',').indexOf(row.aka080) == -1){
                            aka080 += ',' + row.aka080;
                        }
                    } else {
                        aka080 = row.aka080;
                    }
                    if (aka081 != '') {
                        if(aka081.split(',').indexOf(row.aka081) == -1){
                            aka081 += ',' + row.aka081;
                        }
                    } else {
                        aka081 = row.aka081;
                    }
                    $grid.combo('setValue', aka080);
                    $grid.combo('setText', aka081);
                    setTimeout(function () {
                        search = true;
                    }, 1000);
                }
                //清空病种
                $('#clearAka066').linkbutton('options').onClick = function () {
                    $grid.combo('clear');
                }
            }, 1000);
        });
    </script>
    <div class="datagrid-toolbar" id="md09_tools" style="width:100%;height:30px;">
        <table>
            <tr>
                <th>助记码: </th>
                <td>
                    <input type="text" class="format_txt" data-options="required:true" name="aka066"/>
                </td>
                <td>
                    <div class="dialog-tool-separator"></div>
                </td>
                <td>
                    <a href="javascript:void(0)" class="easyui-linkbutton"
                       data-options="iconCls:'icon-no',plain:true" id="clearAka066">清空病种</a>
                </td>
            </tr>
        </table>
    </div>
    <select id="kc21_alc028" class="easyui-combogrid" name="alc028" style="width:660px;"
            data-options="
                panelWidth:660,
                idField:'aka080',
                fitColumns:true,singleSelect:true,toolbar:'#md09_tools',
                textField:'aka081',
                editable:false,
                url:'his/inputInfo/md09.html',
                method:'get',
                queryParams:{zjm:''},
                columns:[[
                    {field:'aka080',title:'病例编码',width:100},
                    {field:'aka081',title:'病例名称',width:160},
                    {field:'aka066',title:'助记码',width:100}
                ]]
            "></select>
</td>

从设计上来看和前一篇单选的比较类似，只是针对这个输入框进行了相应的修改。

后端代码和前一篇单选的一样，这里不贴代码了。