easyui中propertygrid实现密码显示效果

原创: 2016-06-07 11:36:53 815浏览

实现一个密码显示效果（非明文显示）
效果如下图所示，输入密码后鼠标点击其他地方，显示圆点代替

实现代码如下：

js扩展代码

(function($){

    /**

     * datagrid扩展

     */

    $.extend($.fn.datagrid.defaults.editors, {

        password: {

            init: function(container, options){

                return $('').appendTo(container);

            },

            destroy: function(target){

                $(target).remove();

            },

            getValue: function(target){

                return $(target).val();

            },

            setValue: function(target, value){

                $(target).val(value);

            },

            resize: function(target, width){

                $(target)._outerWidth(width);

            }

        }

    });

})(jQuery);

初始化

 columns = [[

    {field: 'name', title: '名称', width: 80, sortable: true},

    {field: 'value', title: '参数', width: 200, sortable: false, formatter:function(value, arr){

        var editor = '';

        if(typeof arr.editor == 'object'){

            editor = arr.editor.type;

        }else{

            editor = arr.editor;

        }

        switch(editor){

            case 'password':

                return value.replace(/./g, '●');

                break;



            default:

                return value;

        }



    }}

]];