jqGrid 4.5.4行内编辑时是否可使用带箭头的number输入类型？

完全可以实现，jqGrid 4.5.4的行内编辑支持自定义输入控件属性，只需要在对应列的列模型配置中指定输入框类型为number即可。

具体配置方法 #

你可以通过两种方式实现该效果，均不需要额外引入第三方依赖：

• 方案1：直接在editoptions中声明输入框属性

colModel: [
    // 其余列配置省略
    {
        name: 'your_number_field',
        index: 'your_number_field',
        editable: true,
        edittype: 'text',
        editoptions: {
            // 通过attr给生成的input标签加自定义属性
            attr: {
                type: 'number',
                min: 0, // 可自定义最小值
                max: 999, // 可自定义最大值
                step: 1 // 可自定义每次调整的步长
            },
            // 按需添加数值变化监听事件
            dataEvents: [
                {
                    type: 'change',
                    fn: function(e) {
                        const currentVal = $(e.target).val();
                        // 此处可添加自定义校验逻辑
                    }
                }
            ]
        }
    }
]

• 方案2：使用自定义编辑类型实现
  如果需要更复杂的自定义逻辑，也可以通过edittype: 'custom'自己生成number输入框：

{
    name: 'your_number_field',
    editable: true,
    edittype: 'custom',
    editoptions: {
        custom_element: function(value, options) {
            const el = $('<input>', {
                type: 'number',
                val: value,
                min: 0,
                step: 1
            });
            return el[0];
        },
        custom_value: function(elem) {
            return $(elem).val();
        }
    }
}

说明 #

配置完成后，行内编辑触发时生成的就是原生number类型输入框，自带浏览器原生的上下调整箭头，和需求效果一致。该方案兼容所有主流现代浏览器，如果你需要兼容极旧版本不支持number输入框的浏览器，可以自行引入第三方数值输入插件，配合自定义编辑类型接口接入即可。

内容的提问来源于stack exchange，提问作者Pashikk2008