使用 jqxGrid 渲染作为对象的单元格值?
Use jqxGrid to render cell values that are objects?
在 jqxGrid 中是否可以呈现作为对象的单元格值?
例如在此 Codepen example 中,每一行都有一个具有对象值的属性 details
。我想说的是,制作一个显示它的 JSON 字符串化版本的自定义渲染器,以及一个自定义编辑器来修改它。
挑战在于行值显示为字符串 "[Object object]"
:
var rows = [
{ color: "red", details: { a: 1, b: 2 } },
{ color: "green", details: { a: 2, b: 4 } },
{ color: "blue", details: { a: 3, b: 8 } },
{ color: "yellow", details: { a: 4, b: 16 } }
];
我尝试创建一个单元格渲染器,但调用该函数时参数 value
已被压缩为字符串 "[Object object]"
。我需要对数据适配器做些什么来获取对象值吗?
var cellsrenderer = function(row, column, value) {
console.log(value);
return "<div>" + JSON.stringify(value) + "</div>";
};
var columns = [
{
text: "Color",
datafield: "color",
width: 100
},
{
text: "Details",
datafield: "details",
width: 200,
cellsrenderer: cellsrenderer
}
];
var source = {
localdata: rows,
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function(data) {},
loadError: function(xhr, status, error) {}
});
$("#grid").jqxGrid({
height: 600,
width: 600,
source: dataAdapter,
pageable: true,
pagesize: 20,
autoheight: true,
columns: columns
});
试试这个
var rows = [
{ color: "red", details: [{ a: 1, b: 2 }] },
{ color: "green", details: [{ a: 2, b: 4 }] },
{ color: "blue", details: [{ a: 3, b: 8 }] },
{ color: "yellow", details: [{ a: 4, b: 16 }] }
];
在 jqxGrid 中是否可以呈现作为对象的单元格值?
例如在此 Codepen example 中,每一行都有一个具有对象值的属性 details
。我想说的是,制作一个显示它的 JSON 字符串化版本的自定义渲染器,以及一个自定义编辑器来修改它。
挑战在于行值显示为字符串 "[Object object]"
:
var rows = [
{ color: "red", details: { a: 1, b: 2 } },
{ color: "green", details: { a: 2, b: 4 } },
{ color: "blue", details: { a: 3, b: 8 } },
{ color: "yellow", details: { a: 4, b: 16 } }
];
我尝试创建一个单元格渲染器,但调用该函数时参数 value
已被压缩为字符串 "[Object object]"
。我需要对数据适配器做些什么来获取对象值吗?
var cellsrenderer = function(row, column, value) {
console.log(value);
return "<div>" + JSON.stringify(value) + "</div>";
};
var columns = [
{
text: "Color",
datafield: "color",
width: 100
},
{
text: "Details",
datafield: "details",
width: 200,
cellsrenderer: cellsrenderer
}
];
var source = {
localdata: rows,
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function(data) {},
loadError: function(xhr, status, error) {}
});
$("#grid").jqxGrid({
height: 600,
width: 600,
source: dataAdapter,
pageable: true,
pagesize: 20,
autoheight: true,
columns: columns
});
试试这个
var rows = [
{ color: "red", details: [{ a: 1, b: 2 }] },
{ color: "green", details: [{ a: 2, b: 4 }] },
{ color: "blue", details: [{ a: 3, b: 8 }] },
{ color: "yellow", details: [{ a: 4, b: 16 }] }
];