我正在尝试在 jquery Grid 中制作 jQuery 简单颜色选择器答案

【问题标题】：I am trying to make jQuery Simple Color picker in jquery Grid我正在尝试在 jquery Grid 中制作 jQuery 简单颜色选择器
【发布时间】：2013-02-05 13:58:31
【问题描述】：

HTML 标记

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.11/themes/redmond/jquery-ui.css" />
    <link href="Css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.11/themes/redmond/jquery-ui.css" />
    <link rel="Stylesheet" type="text/css" href="css/jpicker-1.1.6.min.css" />
    <link rel="Stylesheet" type="text/css" href="css/jPicker.css" />
    <link href="Css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <script src="JqueryScriptDownloads/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="Scripts/grid.locale-en.js" type="text/javascript"></script>
    <script src="Scripts/grid.locale-en.js" type="text/javascript"></script>
    <script src="Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="Scripts/grid.locale-en.js" type="text/javascript"></script>
    <script src="Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
    <script src="JqueryScriptDownloads/jquery.simple-color.min.js" type="text/javascript"></script>
    <script src="JqueryScriptDownloads/SimpleColor.js" type="text/javascript"></script>
    <script src="Scripts/ReshimaMo.js" type="text/javascript"></script>
</head>`
<br/>

    <body>
    <form id="form1" runat="server">
    <uc1:TopControl ID="TopControl" runat="server" />
    <div id="UGPReshimaMo">
    </div>
    <table id="UGReshimaMo">
    </table>
    <input type="button" />
    </form>
</body>
</html>

JavaScript

$(document).ready(function () {

    $("#UGReshimaMo").jqGrid({
        url: 'Handler.ashx', 
        datatype: 'json',
        height: 250,

        colNames: ['צבע', 'רשומה', 'מפלגה', 'אות'],
        colModel: [
             { name: 'semel', width: 200, sortable: true, formatter: getPicker },
                { name: 'LongShem', width: 200, sortable: true },
                { name: 'Shem', width: 100, sortable: true },
                { name: 'Ot', width: 50, sortable: true },
            ],
        rowNum: 100,
        //postData: { spName: 'sp_get_hashala_for_kore', koreId: $("#koreId").value },
        postData: {
            spName: 'MakeRshimatHarshimot'
        },
        rowList: [10, 20, 30],
        pager: '#UGPReshimaMo',
        sortname: 'ot',
        viewrecords: true,
        sortorder: 'asc',
        caption: 'רשימת הרשימות',
        spName: '',
        koreId: ''
    });

    $("#UGReshimaMo").jqGrid('navGrid', '#UGPReshimaMo', { edit: false, add: false, del: false });
    function getPicker() {
        return "<span class='simple_color'/>";
   };
});

当我尝试使用拾色器制作网格时，它不起作用，但当我尝试单独使用拾色器时，它会起作用。这是什么问题以及如何解决？

P.S：颜色选择器来自http://recursive-design.com/projects/jquery-simple-color/

【问题讨论】：

标签： jquery color-picker jqgrid

【解决方案1】：

试试

function getPicker() {
    return "<span class='simple_color'></span>";
};

但正如我所见，您提供的链接与输入标签一起使用

【讨论】：

我找到了！！我只是将此代码添加到网格“ loadComplete:function () { $('.simple_color').simpleColor(); }”

【解决方案2】：

我找到了问题的答案。

我刚刚将此代码添加到jqGrid 实例：

loadComplete: function () {
    $('.simple_color').simpleColor();
}

这是完整的网格代码：

$("#UGReshimaMo").jqGrid({
    url: 'Handler.ashx',
    datatype: 'json',
    height: 250,

    colNames: ['צבע', 'רשומה', 'מפלגה', 'אות'],
    colModel: [
         { name: 'semel', width: 500, sortable: true, formatter: getPicker },
            { name: 'LongShem', width: 200, sortable: true },
            { name: 'Shem', width: 100, sortable: true },
            { name: 'Ot', width: 50, sortable: true },
        ],
    rowNum: 100,
    //postData: { spName: 'sp_get_hashala_for_kore', koreId: $("#koreId").value },
    postData: {
        spName: 'MakeRshimatHarshimot'
    },
    rowList: [10, 20, 30],
    pager: '#UGPReshimaMo',
    sortname: 'ot',
    viewrecords: true,
    sortorder: 'asc',
    caption: 'רשימת הרשימות',
    spName: '',
    koreId: '',
    loadComplete: function () {
        $('.simple_color').simpleColor();
    }
});

【讨论】：