由于某种情况下,使用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>
后端代码和前一篇单选的一样,这里不贴代码了。