jQuery EasyUI 1.3.6 form中的<label for="...">对于combogrid不起作用的问题修正

在jQuery EasyUI 1.3.6版本中，发现<label for="...">对combogrid的焦点转移功能失效。解决方法是修改easyui-min.js文件，调整输入框的id设置。对于需要保留原始id的情况，应在data-options中增加新的id。此问题在jQuery EasyUI 1.4版本中可能有所不同。

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

在此版本的easy ui中，当使用如下的代码创建有标签的combogrid时，没有通常的点击标签后焦点直接到输入框中的效果：

         <td style="text-align:right"><label for="newUsr_DefaultProject">默认项目</label></td>

            
            <td  >
                <input id='newUsr_DefaultProject' name="DefaultProject"

                        class="easyui-combogrid"  data-options="
                       
                        editable:true,
                        validType:'XXX',
......

对此，我对easyui的源码做了一些修正：

找到easyui-min.js的11015行，原来附近的代码大概是这个样子的：

    $(_847).addClass("combo-f").hide();
var span=$("<span class=\"combo\">"+"<input type=\"text\" class=\"combo-text\" autocomplete=\"off\">"+"<span><span class=\"combo-arrow\"></span></span>"+"<input type=\"hidden\" class=\"combo-value\">"+"</span>").insertAfter(_847);
var _848=$("<div class=\"combo-panel\"></div>").appendTo("body");

现在在

$(_847).addClass("combo-f").hide();

下面插入获取id的代码，并把id传到input中，即修改成：

    $(_847).addClass("combo-f").hide();
    var id = $(_847).data();
    $.each(id, function (i, e) {
        id = e;
        return false;
    });
    id = id.options && id.options.id ? ("id='" + id.options.id + "'") : "";
var span=$("<span class=\"combo\">"+"<input type=\"text\" "+id+" class=\"combo-text\" autocomplete=\"off\">"+"<span><span class=\"combo-arrow\"></span></span>"+"<input type=\"hidden\" class=\"combo-value\">"+"</span>").insertAfter(_847);
var _848=$("<div class=\"combo-panel\"></div>").appendTo("body");

然后在自己的网页上可以：

如果原始的input不需要id：则把原始input的id直接放入"data-options“属性中，即把一开始的那段代码改成：

         <td style="text-align:right"><label for="newUsr_DefaultProject">默认项目</label></td>

            
            <td  >
                <input  name="DefaultProject"

                        class="easyui-combogrid"  data-options="
                       id:'newUsr_DefaultProject',
                        editable:true,
                        validType:'XXX',

如果原始input需要id，则保留原id,然后在data-options加入一个新的id

最后效果如图：

补充:

:如果是jQuery EasyUI 1.4,则需要把6016附近的代码从:

var tb=_459.textbox;
tb.find(".textbox-text").remove();

if(opts.multiline){
    $("<textarea class=\"textbox-text\" " autocomplete=\"off\"></textarea>").prependTo(tb);
}else{
    $("<input type=\"" + opts.type + "\"  class=\"textbox-text\" autocomplete=\"off\">").prependTo(tb);
}

改成:

var tb=_459.textbox;
tb.find(".textbox-text").remove();
var id = opts.id ? "id='" + opts.id + "'" : "";
if(opts.multiline){
    $("<textarea class=\"textbox-text\" " + id + " autocomplete=\"off\"></textarea>").prependTo(tb);
}else{
    $("<input type=\"" + opts.type + "\" " + id + " class=\"textbox-text\" autocomplete=\"off\">").prependTo(tb);
}