ASP.NET MVC 3 OR 4扩展Easyui-DataGrid编辑列look-up

看了有些样例，自己也需要，就百度，谷歌看了其他一些前辈的文章，然后写了一个：

点击…后执行JS中的LookUp()方法。

JS使用：

{
       field: 'ImgUrl', title: '图标', width: 100, sortable: true,
       formatter: function (value, row, index) {
             return Utils.FormatString('<div class="{0}" title="{1}">&nbsp;</div>', value, value); 
       },
       editor: {                                       // 该列编辑器，在行编辑状态时显示
             type: 'lookup',                             // 编辑器类型，可额外扩展
             options: {
                  required: true                          // 必填验证
             }
       }
}

 

JS扩展：

/* 扩展datagrid的editor */
$.extend($.fn.datagrid.defaults.editors, {
    lookup: {
        init: function (container, options) {
            var lookup = $('<span class="look-up"></span>').appendTo(container);
            var textbox = $('<input type="text" class="look-up-text" readonly=\"readonly\" />').appendTo(lookup);
            var arrow = $("<span><span class=\"look-up-btn\" onclick=\"LookUp();\"></span>").appendTo(lookup);
            var valbox = $("<input type=\"hidden\" class=\"look-up-value\"></span>").appendTo(lookup);

            if (options.required) {
                $('.look-up-text').validatebox({
                    required: true
                });
            }
            return lookup;
        },
        getValue: function (target) {
            return $(".look-up-value").val();
        },
        setValue: function (target, value) {
            $(".look-up-text").val(value);
            $(".look-up-value").val(value);
        },
        resize: function (target, width) {
            var input = $(target);
            var tb = $(".look-up-text");
            if ($.boxModel == true) {
                var w = width - (input.outerWidth() - input.width());
                console.info(w);
                input.width(w);
                tb.width(w - 24);
            } else {
                input.width(width - 2);
                tb.width(width - 24);
            }
        }
    }
});

CSS内容：

.look-up { background-color: #FFFFFF; border-color: #95B8E7; height: 20px; border-right: 1px solid #95B8E7; }
.look-up { border-style: solid; border-width: 1px; display: inline-block; margin: 0; overflow: hidden; padding: 0; vertical-align: middle; white-space: nowrap; }
    .look-up .look-up-text { border: 0 none; font-size: 12px; height: 20px; line-height: 20px; margin: 0; padding: 0 2px; vertical-align: baseline; }

.look-up-btn { background: url("lookup_btn1.png") no-repeat scroll center center transparent; }
.look-up-btn { background-color: #E0ECFF; margin-right:2px; }
.look-up-btn { cursor: pointer; display: inline-block; height: 20px; opacity: 0.6; overflow: hidden; vertical-align: top; text-align: left; width: 18px; }
    .look-up-btn:hover { opacity: 1; }

参考：

jqueryEasyUI之自定义Datagrid插件-lookup弹出机构树【http://www.blogjava.net/jjjachyty/archive/2013/06/18/388717.html】

丰富Easyui 的插件 - lookup【http://www.cnblogs.com/hxling/p/jquery_lookup.html】