JqGrid with Fancybox - get cell object

问题

Using the follow in jqGrid:

 colModel: [
            {name:"",index:"",width:100},
            {name:"diagnosis",index:"diagnosis",width:100,formatter:fancyBoxFormatter},
            {name:"prescription", index:"prescription",width:100,formatter:fancyBoxFormatter}, 
            {name:"tests",index:"tests",width:100,formatter:fancyBoxFormatter},
            {name:"imaging",index:"imaging",width:100,formatter:fancyBoxFormatter},
            {name:"generic",index:"generic",width:100,formatter:fancyBoxFormatter},
            {name:"referral",index:"referral",width:100,formatter:fancyBoxFormatter},
            {name:"management",index:"management",width:100,formatter:fancyBoxFormatter},
            {name:"completed",index:"completed",width:100}
            ],

Then:

function fancyBoxFormatter(cellvalue, options, rowObject) {

    var result,
        link,
        fancyBoxHTML,
        fancyBoxContent;

    link = "<a class=\"fancybox\" href=\"#data" + options.rowId + "\">" + cellvalue + "</a>";
    fancyBoxContent = cellvalue;
    fancyBoxHTML = "<div style=\"display:none\"><div id=\"data" + options.rowId + "\">" + fancyBoxContent + "</div></div>";
    return link + fancyBoxHTML;
}

This displays the same content in Fancybox for all cells in the row (based on rowID...) How can I change this function to individual cell IDs, rather than just the whole row?

回答1:

Please write in all questions about jqGrid the version of jqGrid, which you use (can use) and the fork which you use (free jqGrid, commercial Guriddo jqGrid JS or an old jqGrid in version <=4.7).

The options parameter of the custom formatter fancyBoxFormatter contains rowId, colModel, gid, pos and rowData properties (rowData exists only in free jqGrid fork). Thus you can use, for example,

function fancyBoxFormatter (cellvalue, options) {
    return "<a class=\"fancybox\" href=\"#data" +
        options.rowId + "_" + options.colModel.name + "\">" + cellvalue + "</a>" +
        "<div style=\"display:none\"><div id=\"data" +
        options.rowId + "_" + options.colModel.name + "\">" +
        cellvalue + "</div></div>";
}

Additionally you have to fix the name property of the first column. One can't use empty name (see name:""). You could use any unique value for name holding the rules existing in HTML5/CSS for ids (for example no spaces).

I'd recommend you additionally to remove unneeded index properties and common width:100 option from all columns. Instead of placing width:100 in every column you can use cmTemplate: {width: 100} option of jqGrid.

来源：https://stackoverflow.com/questions/44384520/jqgrid-with-fancybox-get-cell-object

标签

jquery

jqgrid

fancybox