easyui 设置onClickCell editor的焦点问题

最新推荐文章于 2022-11-15 09:57:57 发布

原创最新推荐文章于 2022-11-15 09:57:57 发布 · 5.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easyui

easy-ui 专栏收录该内容

1 篇文章

订阅专栏

本文探讨使用EasyUI编辑网格时遇到的焦点设置问题。详细介绍了JavaScript代码实现，并分享了解决方案，即针对特定类型的编辑器调整获得焦点的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用easyUi editGrid 发现设置单机后获得焦点无效（个人觉得巨坑，明明照着 easyui 官网撸的怎么就不能获的焦点了呢！！）
javascript 如下：

function onClickCell(index,field){
            IsCheckFlag=false;
              if (editIndex != index){
                if (endEditing()){
                    $('#dg').datagrid('beginEdit', index);
                    editIndex = index;
                    focusEditor(field);//获得焦点
                } else {
                     //$('#dg').datagrid('selectRow', editIndex); 
                }
            }else{
                //单机同一行  选择不同 列
                focusEditor(field);
            }  
        }
        //单击行的时候 取消选中效果
        var IsCheckFlag=true;
        function onSelect (rowIndex, rowData) {
                    if (!IsCheckFlag) {
                          IsCheckFlag = true;
                          $("#dg").datagrid("unselectRow", rowIndex);
                    }
         }
        function focusEditor(field){
            console.log(field);
                var editor = $('#dg').datagrid('getEditor', {index:editIndex,field:field});
            if (editor){
                editor.target.focus();
                $(editor.target).focus();
                 $(editor.target).focus().bind('blur', function () {
                       alert("什么时候取消了 事件？？？？"); 
                  });

            } else {
                var editors = $('#dg').datagrid('getEditors',editIndex);
                if (editors.length){
                    editors[0].target.focus();
                }
            }
}

grid 如下：

<table id="dg" class="easyui-datagrid" title="<h>收件材料</h>" style="width:100%;height:auto;"
            data-options="
                singleSelect: false,
                striped:true,
                fit : true,
                rownumbers : true,
                toolbar: '#tb',
                url: '******',
                method: 'get',
                onClickCell:onClickCell,
                onSelect:onSelect
            ">
        <thead>
            <tr>
                <th data-options="field:'ID',width:80,hidden:true">id</th>
                <th data-options="field:'ck',checkbox:true"></th>
                <th data-options="field:'ORDERINDEX',sortable:'true',width:80,align:'center',editor:{type:'numberbox',options:{}},hidden:true">顺序</th>
                <th data-options="field:'NAME',width:367,align:'center',editor:{type:'textbox',options:{}}">收件名称</th>
                <th data-options="field:'TYPE',width:190,
                        formatter: function(v, r, i) {
                                    return type[v];
                        },
                        editor:{
                            type:'combobox',
                            options:{
                                valueField:'value',
                                textField:'text',
                                method:'get',
                                data:types,

                            }
                        }">收件类型</th>

                <th data-options="field:'COPYNUM',width:80,align:'center',editor:{type:'numberbox',options:{}}">份数</th>
                <th data-options="field:'PAGENUM',width:80,align:'center',editor:{type:'numberbox',options:{}}">页数</th>
                <th data-options="field:'SCANNUM',width:80,align:'center',editor:{type:'numberbox',options:{}}">扫描数</th>
                <th data-options="field:'PAGERANGE',width:80,align:'center'">页次</th>
                <th data-options="field:'BZ',width:300,align:'center',editor:'textbox'">备注信息</th>
             </tr>
        </thead>
    </table>