JqGrid：在列中显示HTML元素的文本 [英] JqGrid: Showing text for HTML elements inside column
问题描述
我已经使用gridComplete来显示HTML按钮，但它显示HTML文本而不是按钮和编码HTML作为标题，看起来不太好。请帮助我删除或更改标题（tooltip）并显示按钮
输出
当我检查这个单元格，然后我可以在铬工具中看到以下内容 -
< td role =gridcellstyle =title =& 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
$ {b $ b名称：distCode，
索引：'distributor_code'，
width：110
}，{
名称：statusId，
hidden：true
}，{
name：statusVal，
index：'status'，
width：90
}，{
name：startDate，
index：'start_date'，
width：100，
sorttype：date，
align：right
}，{
名称：endDate，
索引：'end_date'，
宽度：100，
sorttype：date，
align：right
}，{
name：discount，
index：'discount'，
width：80
}，{
名称：extension，
index：'extension'，
width：80
}，{
名称：isDiscount，
hidden： true
} {
name：isExtension，
hidden：true
}，{
name：actionBtn，
width：100
}];
$（function（）{
$（＃list）
.jqGrid（
{
url：'/ suiactcodegen / action / promotion / promolist'，
datatype：json，
mtype：GET，
colNames：[促销ID，促销代码，名称，
说明，分销商代码，标准ID，
状态，开始日期，结束日期，
折扣，扩展，是光盘，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'，
标题：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，
编辑：false，
del ：false，
search：true，
refresh：false
}）。jqGrid（'navButtonAdd'，'#pager'，{
caption：Edit，
// buttonicon：ui-icon-bookmark，
onClickButton：editPromo，
位置：last
}）;
}）;
- 更新 -
我已经试过autoencode =此列无效
IMP更新
它不起作用的原因我相信是因为数据类型是'json'，但按钮类型不是json数据类型。我怎样才能创建它作为一个单独的行？在本地数据的情况下，它的作品。查看小提琴 http://jsfiddle.net/zpXCT/3/ 。甚至在我的本地主机上测试过它
Sry我从JqGrid网站复制了基本网格，然后进行编辑并没有注意到autoencode：网格级别为true。所以即使我提到它的列级别，它不起作用。现在看来。
I have used gridComplete to show HTML buttons but it shows the HTML text instead of button and encoded HTML as title which does not look good. Kindly help me remove or change the title (tooltip) and show the buttons
The Output
When I inspect this cell then I could see the following in chrome tools -
<td role="gridcell" style="" title="&lt;input type='button' value='Publish' onclick='publish(100)' /&gt;" aria-describedby="list_actionBtn"><input type='button' value='Publish' onclick='publish(100)' /></td>
The jqgrid Code
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"
});
});
-- Update -- I have already tried autoencode = false for this column but it didn't work
IMP Update The reason why it doesn't work I believe is because datatype is 'json' but button type is not json data type. How can I create it as a separate row? In case of 'local' data it works. See the fiddle http://jsfiddle.net/zpXCT/3/. Even tested it in my localhost
Sry I copied the basic grid from JqGrid site and then edited that and didn't notice that autoencode:true for grid level. So even though I mentioned it for column level it wasn't working. Now it appears.
这篇关于JqGrid：在列中显示HTML元素的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
