使用带有 jqgrid setCell 的自定义格式化程序

Question

所以我正在尝试动态设置单元格，但我的网格有许多自定义格式化程序，例如：

formatter: function(cellvalue, options, rowObject) {
                    if (rowObject.myId){
                        return '<span class="editable" data-id="' + rowObject.myId  + '">$' + cellvalue + '</span>';
                    }
                    else{
                        return cellvalue;
                    }
                }

在网格完成后的某个时候我想做：

$('#table').jqGrid('setCell', 1,'colName', '500', 'test');

但是，问题在于这会覆盖格式化程序，并且只是用该单元格值替换整个内容。有没有办法让它通过自定义格式化程序或其他方式解决这个问题？

样本数据：

{"metaData":null,"records":[{"spendD1":2520.88,"spendD2":0,"cpaD1":11.95,"cpaD2":0,"conversionsD1":211,"conversionsD2":0,"conversionRateD1":11.00,"conversionRateD2":0.00,"clicksD1":1872,"clicksD2":0,"cpcD1":1.35,"cpcD2":0,"statusId":1,"statusName":"Active","creativesCount":0,"adGroupsCount":0,"keywordsCount":0,"queryTermsCountD1":0,"queryTermsCountD2":0,"trafficSourcesCount":0,"campaignId":6824,"adgroupId":151464,"adgroupName":".com General Credit Offers","bid":2.000}]}

编辑网格参数：

altRows
    false

altclass
    "ui-priority-secondary"

autoencode
    false

autowidth
    false

beforeProcessing
    null

beforeSelectRow
    null

caption
    ""

cellEdit
    false

cellLayout
    5

cellsubmit
    "remote"

cmTemplate
    Object {}

colModel
    [Object { name="adgroupName", index="adgroupName", width=240, more...}, Object { name="campaignStatus", index="campaignStatus", width=60, more...}, Object { name="spendD1", index="spendD1", width=80, more...}, 8 more...]

colNames
    ["Ad Group", "Status", "Spend", 8 more...]

data
    []

datatype
    "json"

deselectAfterSort
    true

direction
    "ltr"

disableClick
    false

editurl
    null

emptyrecords
    "No records to view"

footerrow
    true

forceFit
    false

gridstate
    "visible"

gridview
    false

grouping
    false

groupingView
    Object { groupField=[0], groupOrder=[0], groupText=[0], more...}

headertitles
    false

height
    "100%"

hiddengrid
    false

hidegrid
    true

hoverrows
    true

id
    "advertiser_table"

idPrefix
    ""

ignoreCase
    false

jsonReader
    Object { root="records", page="pageNumber", total="totalPages", more...}

keyIndex
    false

lastpage
    1

lastsort
    2

loadBeforeSend
    null

loadError
    null

loadonce
    false

loadtext
    "Loading..."

loadui
    "enable"

localReader
    Object { root="rows", page="page", total="total", more...}

mtype
    "GET"

multiboxonly
    false

multikey
    false

multiselect
    false

multiselectWidth
    20

nv
    0

onHeaderClick
    null

onPaging
    null

onRightClickRow
    null

onSelectAll
    null

onSelectRow
    null

ondblClickRow
    null

page
    1

pager
    ""

pagerpos
    "center"

pgbuttons
    true

pginput
    true

pgtext
    "Page {0} of {1}"

postData
    Object { _search=false, nd=1331821970112, rows=20, more...}

prmNames
    Object { page="page", rows="rows", sort="sidx", more...}

reccount
    2

recordpos
    "right"

records
    2

recordtext
    "View {0} - {1} of {2}"

remapColumns
    []

resizeclass
    ""

rowList
    []

rowNum
    20

rowTotal
    null

rownumWidth
    25

rownumbers
    false

savedRow
    []

scroll
    false

scrollOffset
    18

scrollTimeout
    40

scrollrows
    false

search
    false

selarrrow
    []

selrow
    null

shrinkToFit
    true

sortable
    Object { update=function()}

sortname
    "spendD1"

sortorder
    "desc"

subGrid
    false

subGridModel
    []

subGridWidth
    20

tblwidth
    1233

toolbar
    [false, ""]

toppager
    false

totaltime
    9

treeANode
    -1

treeGrid
    false

treeGridModel
    "nested"

treeReader
    Object {}

tree_root_level
    0

url
    "/advertiser_services/amp/report/adgroup/get"

useProp
    true

userData
    Object { spendD1=2520.88, spendD2=0, cpaD1=11.95, more...}

userDataOnFooter
    true

viewrecords
    false

viewsortcols
    [false, "vertical", true]

width
    1233

Answer 1

首先我不确定你为什么需要这样的格式化程序。 data-id 的属性只有在单元格元素为 DOM 或 jQuery 对象myCell 时才能访问，但在这种情况下，$(myCell).closest("tr.jqgrow").attr("id") 将为您获取 rowid。

不过你描述的问题很常见。

我建议你将格式化程序的代码重写为

formatter: function(cellvalue, options) {
    var id = options.rowId;
    return id ?
           '<span class="editable" data-id="' + id  + '">$' + cellvalue + '</span>' :
           cellvalue;
}

您遇到的问题是自定义格式化程序的设计问题。尤其是如果以标准格式从服务器加载数据以及行的数据，例如

{"id" :"1", "cell": ["cell11", "cell12", "cell13"]},

另外还有loadonce: true的用法。如果第一个电网负载时的rowObject 将是Array 类似

["cell11", "cell12", "cell13"]

在下一次刷新网格时，数据将采用如下格式

{_id_: "1", colName1: "cell11", colName2: "cell12", colName3: "cell13"}

如果使用setCell，格式化程序将在第三格式中以rowObject 调用。从setCell 的the source code 可以看出，rowObject 将被初始化为$('#table')[0].rows.namedItem(rowid)。 rowObject 将是 DOM 元素，对应于当前行中的 <tr>。所以要让单元格包含你必须使用类似的东西

var cellData = $(rowObject).children('td:eq(' + iCol + ')').text();

iCol 在colModel 中的索引中，用于您需要的列。您可以使用getColumnIndexByName 获取索引（例如，参见the answer）。