использование пользовательских форматеров с jqgrid setCell - PullRequest
Новая
       19

использование пользовательских форматеров с jqgrid setCell

0 голосов
/ 15 марта 2012

Итак, я пытаюсь настроить ячейки на лету, но у меня есть несколько пользовательских форматеров для моей сетки, например: 

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

1 Ответ

1 голос
/ 15 марта 2012

Прежде всего, я не уверен, зачем вам такой форматер. Доступ к атрибуту с data-id возможен только в том случае, если в элементе ячейки указан DOM или объект jQuery myCell, но в случае $(myCell).closest("tr.jqgrow").attr("id") вы получите идентификатор строки.

Тем не менее проблема, которую вы описываете, является общей.

Я бы порекомендовал вам переписать код форматера как 

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 rowObject будет инициализирован как $('#table')[0].rows.namedItem(rowid). rowObject будет элементом DOM, который соответствует <tr> из текущей строки. Таким образом, чтобы получить ячейку, вы должны использовать что-то вроде 

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

, где iCol в индексе в colModel для нужного вам столбца. Вы можете использовать getColumnIndexByName, чтобы получить индекс (см. ответ , например).

...