jqGrid jQuery Hexadecimal Colorpicker 来自虚拟列

Posted 2023-05-07

【中文标题】jqGrid jQuery Hexadecimal Colorpicker 来自虚拟列

【英文标题】：jqGrid jQuery Hexadecimal Colorpicker from dummy column

【发布时间】：2021-08-18 10:45:33

【问题描述】：

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

我需要 ColModal 中的虚拟列作为最后一列（其他列具有来自服务器端的 Ajaxed 数据） 虚拟列应该有一个 Jquery Hexadecimal Colorpicker。

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

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

难道没有人有绝妙的想法吗？

【问题讨论】：

应该使用哪个颜色选择器？

我需要一个简单的基于 JQuery 的颜色选择器，以便其他列中的数据可以用从特定行中选择的颜色绘制图表。谢谢

【参考方案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]));
        
    
);

【讨论】：

此示例有效，并且颜色选择器具有不显示列中选择的颜色的限制，而是显示十六进制值 thx Tony 提示

@N.S.Karthik，很高兴为您提供帮助。这只是一个关于如何使用它的例子。颜色选择器有很多选项，所以我们需要阅读所有选项。

Tony thx 代码 sn-p.. 我使用了 2 种类型的 Jquery 颜色选择器 a) jquery-simple-color b) 颜色选择器（如 u 所建议的）两者都有效