Easyui - 一個比較複雜的ComboGrid（資料表格下拉框）單選的例子

由于某種情況下，使用ComboGrid的時候比較多，為了友善以後使用的時候友善查找，在這裡記錄一下。

适用場景：單項選擇，自動完成，看下面的效果圖。

先看一個效果圖：

這裡輸入助記碼的時候就顯示出視窗了。

然後滑鼠點選選擇一個：

這個同時更新了多個輸入框的值，并且沒有使用預設的選擇事件。  

前端代碼：

<th>
    收費項目名稱[<span class="format_required">*</span>]：
</th>
<td>
    <script type="text/javascript">
        $(function () {
            setTimeout(function () {
                var old = '';
                var search = true;
                var query = [];
                var $grid = $('#kc22_akc223');
                $grid.combo('options').onChange = function (_new, _old) {
                    if (_new != old) {
                        old = _new;
                        query = [old];
                        setTimeout(function () {
                            if (query.length > 0 && search) {
                                var param = query.pop();
                                query = [];
                                if (param != '') {
                                    $grid.combogrid('grid').datagrid('load', {zjm: param});
                                }
                                loading = false;
                            }
                        }, 500);
                    }
                };

                $grid.combogrid('grid').datagrid('options').onSelect = function(){
                    return false;
                };

                $grid.combogrid('grid').datagrid('options').onClickRow = function(index, row) {
                    search = false;
                    $grid.combo('hidePanel');
                    $grid.combo('setValue', row.aka061);
                    $grid.combo('setText', row.aka061);
                    setTimeout(function () {
                        search = true;
                    }, 1000);
                }
            }, 1000);
        });
    </script>
    <select id="kc22_akc223" class="easyui-combogrid" name="akc223" style="width:175px;"
            data-options="
                panelWidth:450,
                idField:'aka060',
                fitColumns:true,singleSelect:true,
                textField:'aka061',
                url:'his/inputInfo/md01.html',
                method:'get',
                queryParams:{zjm:''},
                columns:[[
                    {field:'aka060',title:'藥品(項目)編碼',width:80},
                    {field:'aka061',title:'藥品(項目)名稱',width:120},
                    {field:'aka063',title:'收費類别',width:40},
                    {field:'aka066',title:'助記碼',width:80},
                    {field:'aka065',title:'收費項目等級',hidden:true},
                    {field:'aka067',title:'藥片/診療項目',hidden:true}
                ]]
            "></select>
</td>      

後端代碼：

/**
 * 助記碼查詢，隻傳回前100個結果
 */
@RequestMapping(value = "/md01",method = RequestMethod.GET)
public @ResponseBody List<Md01> md01(@RequestParam("zjm") String zjm) throws Exception {
    if (zjm.equals("")) {
        return new ArrayList<Md01>(0);
    }
    return inputService.selectMd01ByZjm(zjm.toUpperCase());
}