jqGrid jQuery 来自虚拟列的十六进制颜色选择器

Question

规格：使用来自“http://trirand.com/blog/jqgrid/jqgrid.html”的基于试用版的 JqGrid 5.5。

我需要 ColModal 中的虚拟列作为最后一列（其他列具有来自服务器端的 Ajaxed 数据）虚拟列应该有一个 Jquery 十六进制颜色选择器。

状态：我已成功创建虚拟列，但无法实现 Jquery-Color-Picker

要求：需要从列中提取多选行数据和从虚拟列中提取十六进制值。

大家有什么好主意吗？

Answer 1

此处提供的解决方案使用自定义格式化程序和取消格式化函数来获取所选值。对于演示，我们使用 this colorpicker

$("#jqGrid").jqGrid({
    multiselect : true,
    colModel: [
        ...,
        // virual field  
        { label : "Color",
            name: "color_picker",
            width : 100,
            formatter : function() {
                // create a custom button for the color picker
                return "<button class='colorpick'>Color</button>";
            },
            // get the value from the button when using getRowData
            unformat : function( elem, op, cellval ) {
                return $("button",cellval).val();
            }
        },
        ...
    ],
    gridComplete : function() {
        // attach a colorpicker to the buttons
        $('.colorpick').colorpicker({
           inline: false,
           showNoneButton: true,
           showCloseButton: true,
           showCancelButton: true,
           colorFormat: ['#HEX'],
           modal: true
        });
    }, 
    ...
});
$("#mybuttondata").on("click", function(){
    // get the selected value from  colorpicker
    var get_selected  = $('#jqGrid').jqGrid('getGridParam', 'selarrrow');
    if(get_selected.length) {
        for(var i=0;i<get_selected.length;i++) {
            console.log( $('#jqGrid').jqGrid('getRowData',get_selected[i]));
        }
    }
});

jqGrid jQuery 来自虚拟列的十六进制颜色选择器

jqGrid jQuery Hexadecimal Colorpicker from dummy column

jquery

jqgrid