javascript - JqG​​rid:显示列内 HTML 元素的文本

Question

我使用 gridComplete 来显示 HTML 按钮，但它显示 HTML 文本而不是按钮，并将编码的 HTML 作为标题，看起来不太好。请帮助我删除或更改标题(工具提示)并显示按钮

输出

当我检查此单元格时，我可以在 chrome 工具中看到以下内容 -

<td role="gridcell" style="" title="&amp;lt;input type='button' value='Publish' onclick='publish(100)' /&amp;gt;" aria-describedby="list_actionBtn">&lt;input type='button' value='Publish' onclick='publish(100)' /&gt;</td>

jqgrid 代码

var myColModel = [ {
    name : "promoId",
    index : 'Promotionid',
    width : 60
}, {
    name : "promoCode",
    index : 'promotioncode',
    width : 110
}, {
    name : "name",
    index : 'name',
    width : 160
}, {
    name : "description",
    index : 'description',
    width : 250
}, {
    name : "distCode",
    index : 'distributor_code',
    width : 110
} , {
    name : "statusId",
    hidden : true
} , {
    name : "statusVal",
    index : 'status',
    width : 90
}, {
    name : "startDate",
    index : 'start_date',
    width : 100,
    sorttype : "date",
    align : "right"
}, {
    name : "endDate",
    index : 'end_date',
    width : 100,
    sorttype : "date",
    align : "right"
}, {
    name : "discount",
    index : 'discount',
    width : 80
}, {
    name : "extension",
    index : 'extension',
    width : 80
}, {
    name : "isDiscount",
    hidden : true
}, {
    name : "isExtension",
    hidden : true
}, {
    name : "actionBtn",
    width : 100
} ];
$(function() {
    $("#list")
            .jqGrid(
                    {
                        url : '/suiactcodegen/action/promotion/promolist',
                        datatype : "json",
                        mtype : "GET",
                        colNames : [ "Promo ID", "Promo Code", "Name",
                                "Description", "Distributor Code", "Stt Id",
                                "Status", "Start Date", "End Date",
                                "Discount", "Extension", "Is Disc", "isExtn", "" ],
                        colModel : myColModel,
                        pager : "#pager",
                        rowNum : 10,
                        rowList : [ 10, 20, 30 ],
                        sortname : "end_date",
                        sortorder : "asc",
                        viewrecords : true,
                        gridview : true,
                        rownumber : true,
                        autoencode : true,
                        width : '1000px',
                        height : 'auto',
                        caption : "Promotion Summary",
                        gridComplete: function() {
                            var ids = $("#list").jqGrid('getDataIDs');
                            for (var i = 0; i < ids.length; i++) {
                                var rowId = ids[i],
                                    statusId = $("#list").jqGrid ('getCell', rowId, 'statusId'),
                                    activeBtn = "";
                                    if (statusId == 0) { // Inactive
                                        activeBtn = "<input type='button' value='Publish' " +
                                           "onclick='publish(" + rowId + ")' />";
                                    }
                                    //else if (statusId == 1) { // Published
                                    //  activeBtn = "<input type='button' value='Expire' " +
                                    //       "onclick=\"expire(" + rowId + ");\" />";
                                    //} 
                                 $("#list").jqGrid('setRowData', rowId, { actionBtn: activeBtn });
                            }
                        } 
                        }).jqGrid('navGrid', '#pager', {
                add : false,
                edit : false,
                del : false,
                search : true,
                refresh : false
            }).jqGrid('navButtonAdd', '#pager', {
                caption : " Edit ",
                // buttonicon: "ui-icon-bookmark",
                onClickButton : editPromo,
                position : "last"
            });


});

-- 更新 -- 我已经为本专栏尝试过 autoencode = false 但没有成功

IMP 更新 我认为它不起作用的原因是因为数据类型是“json”，但按钮类型不是 json 数据类型。如何将其创建为单独的行？对于“本地”数据，它可以工作。看 fiddle http://jsfiddle.net/zpXCT/3/ 。甚至在我的本地主机中测试了它

Answer 1

抱歉，我从 JqGrid 站点复制了基本网格，然后对其进行了编辑，但没有注意到网格级别的 autoencode:true 。因此，即使我在专栏级别提到它，它也不起作用。现在它出现了。