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

来源：互联网发布：http mac地址编辑：程序博客网时间：2024/04/29 19:34

由于某种情况下，使用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());}

实现起来很容易，实际上如果有必要，完全可以把上面的前端代码封装成一个tag使用。

0 0