使用jqxGrid呈现作为对象的单元格值吗?

时间:2018-10-03 21:27:00

标签: javascript jqxgrid

在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
});

enter image description here

1 个答案:

答案 0 :(得分:1)

尝试

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 }] }
];