Question

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/

Answer 1

尝试

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

但正如我从链接中看到的那样，它与输入标签一起使用

Answer 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();
    }
});

我试图在jquery Grid中制作jQuery Simple Color选择器

2 个答案: