jQuery EasyUI 数据网格扩展 numberspinner 编辑器教程

jQuery EasyUI 数据网格默认提供多种编辑器，但有时需要扩展自定义类型。本教程演示如何通过继承 $.fn.datagrid.defaults.editors 对象添加 numberspinnner 编辑器，并在数据网格列中配置使用，使用户能够以数字微调方式编辑数据。

继承扩展 numberspinnner 编辑器

所有数据网格编辑器均定义在 $.fn.datagrid.defaults.editors 对象中。通过 $.extend 方法可继承并扩展该对象，从而支持新的编辑器类型。以下为添加 numberspinnner 编辑器的完整实现：

$.extend($.fn.datagrid.defaults.editors, {
    numberspinnner: {
        init: function(container, options){
            var input = $('').appendTo(container);
            return input.numberspinnner(options);
        },
        destroy: function(target){
            $(target).numberspinnner('destroy');
        },
        getValue: function(target){
            return $(target).numberspinnner('getValue');
        },
        setValue: function(target, value){
            $(target).numberspinnner('setValue', value);
        },
        resize: function(target, width){
            $(target).numberspinnner('resize', width);
        }
    }
});

该扩展包含五个核心方法：

• init：在容器内创建 input 元素并初始化 numberspinnner 组件，返回组件实例。
• destroy：销毁编辑器实例，释放资源。
• getValue：获取当前编辑器的值。
• setValue：为编辑器设置初始值。
• resize：根据列宽调整编辑器尺寸。

在 HTML 标记中创建数据网格

扩展完成后，可在 HTML 中定义数据网格，并将 numberspinnner 编辑器绑定到指定列。示例代码如下：

    

        

            
Item ID
            
List Price
            
Unit Cost
            
Attribute
            
Status
            
Action
        
    

在 unitcost 列中，通过 editor="numberspinnner" 指定使用自定义编辑器。当用户双击该行进入编辑状态时，该列将显示 numberspinnner 控件，支持通过上下箭头或键盘输入调整数值。

使用注意事项与效果说明

扩展编辑器时需注意以下几点：

• 确保在数据网格初始化前完成编辑器扩展，否则列配置无法识别自定义类型。
• init 方法必须返回组件实例，否则数据网格无法正确绑定值。
• 若需传递额外参数，可在 HTML 中使用对象语法，如 editor="{type:'numberspinnner',options:{min:0,max:100}}"。

完成配置后，数据网格将支持 numberspinnner 编辑功能，用户可通过微调按钮或键盘输入修改数值，提升数据录入的便捷性与准确性。