是否可以使用JSON在Grid上与记录一起配置列配置？
答案 0 :(得分：1)
没有默认的接受JSON的表格属性，但是您当然可以构造表格列并使用自己的JSON有效负载（即，从Web服务返回）进行记录。我刚刚为客户完成了此操作。
javascript函数：
function constructGrid(db) {
console.log("Constructing the grid...");
var dynamicColumns = [];
var dynamicSearches = [];
var tableData = [];
/* Get the columns of the table */
var columns = db.Payload.Metadata.Columns;
/* Assign column and search properties */
for (var i = 0; i < columns.length; i++) {
var search = {
field: columns[i].Name,
caption: columns[i].Name.split('_').join(' ')
};
var col = {
sortable: true,
searchable: true,
resizable: true,
field: columns[i].Name,
caption: columns[i].Name.split('_').join(' ')
};
/* assign column length */
var colLength = col.caption.length;
if (columns[i].DataLength > colLength) {
colLength = columns[i].DataLength;
if (colLength > 999) {
colLength = colLength / 70;
}
}
var colSize = colLength * 10;
col["size"] = colSize + 'px';
if (columns[i].DataType == "NUMBER") {
if (columns[i].DataScale > 0) {
col['editable'] = { type: 'float' };
search['type'] = 'float';
} else {
col['editable'] = { type: 'int' };
search['type'] = 'int';
}
col['render'] = function(record, index, col_index) {
var html = null;
var value = this.getCellValue(index, col_index);
if (value !== undefined) {
var t = typeof value;
if (t == "number") {
if (!isNaN(value)) {
html = this.getCellValue(index, col_index);
}
}
};
return html;
};
} else if (columns[i].DataType == "DATE" ){
col['editable'] = { type: 'date' };
col['render'] = "date:mm/dd/yyyy";
search['type'] = 'date';
} else {
col['editable'] = { type: 'text' };
search['type'] = 'text';
}
/* Alter grid header to visually indicate required field */
col['caption'] = createColumnCaption(columns[i]);
/* If foreign key table, we need to build dropdown */
if (columns[i].FKColumn != null && columns[i].FKTableCount <= maxDropdownItems) {
col['editable'] = { type: 'select', showAll: true };
col['editable'].items = [{id: '', text: ''}].concat(dddws[i]);
col['render'] = function(record, index, column_index) {
var html = '';
var map = dddwsMap[column_index];
var value = this.getCellValue(index, column_index);
if (value !== undefined && map !== undefined) {
var t = typeof value;
if (t == "number") {
if (!isNaN(value)) {
html = map[this.getCellValue(index, column_index)];
}
} else {
html = map[this.getCellValue(index, column_index)];
}
};
return html;
};
}
/* set background color of cell for primary key */
if (columns[i].IsPrimaryKey == true) {
col['style'] = "background-color: HSL(0, 0%, 51%); background-clip: padding-box;";
}
/* Any audit column is defaulted to hidden. User can display them and search for them if they want */
if (columns[i].IsAuditable == true) {
col['hidden'] = true;
}
/* Add both search and column to their grid property arrays */
dynamicColumns.push(col);
dynamicSearches.push(search);
}
w2ui['grid'].columns = dynamicColumns;
w2ui['grid'].searches = dynamicSearches;
w2ui['grid'].multiSearch = true;
w2ui['grid'].multiSort = true;
console.log("Dynamic Grid columns:");
console.log(dynamicColumns);
console.log("Dynamic Search columns:");
console.log(dynamicSearches);
/* clear table data */
tableData.length = 0;
/* Load table data only once */
if (tableData.length == 0) {
db.Payload.Records.forEach(function (rec, index, array) {
var row = {};
row['recid'] = index;
row['editable'] = true;
row['rowIndicator'] = "R";
row['Code'] = rec.Code;
row['OptimisticValue'] = rec.OptimisticValue;
/* Construct the columns of a row */
db.Payload.Metadata.Columns.forEach(function (col, i, a) {
if (columns[i].DataType == "NUMBER") {
if (!isNaN(rec.ColumnData[i])) {
row[col.Name] = parseInt(rec.ColumnData[i]);
}
} else {
row[col.Name] = rec.ColumnData[i];
}
});
/* Add the row of columns to the table */
tableData.push(row);
});
}
w2ui['grid'].records = tableData;
}
函数使用的JSON对象：
{
"ID": 0,
"Payload": {
"Table": "AMTB_AIR_INJECTION_TYPE",
"Metadata": {
"Table": "AMTB_AIR_INJECTION_TYPE",
"ContainsMappingColumn": false,
"Columns": [
{
"Name": "AIR_INJECTION_TYPE_CODE",
"DataType": "CHAR",
"DataScale": 0,
"DataLength": 2,
"ForeignKeyTable": null,
"FKParentTable": null,
"FKPosition": 1,
"FKColumn": null,
"FKTableCount": 0,
"IsFKMapping": false,
"IsPrimaryKey": true,
"IsOptimistic": false,
"IsRequired": true,
"IsAutoGenerated": false,
"IsAuditable": false,
"CanValidateAgainstFKTable": false
},
{
"Name": "AIR_INJECTION_TYPE_DESC",
"DataType": "VARCHAR2",
"DataScale": 0,
"DataLength": 30,
"ForeignKeyTable": null,
"FKParentTable": null,
"FKPosition": 1,
"FKColumn": null,
"FKTableCount": 0,
"IsFKMapping": false,
"IsPrimaryKey": false,
"IsOptimistic": false,
"IsRequired": true,
"IsAutoGenerated": false,
"IsAuditable": false,
"CanValidateAgainstFKTable": false
},
{
"Name": "INACTIVE_FLAG",
"DataType": "CHAR",
"DataScale": 0,
"DataLength": 1,
"ForeignKeyTable": null,
"FKParentTable": null,
"FKPosition": 1,
"FKColumn": null,
"FKTableCount": 0,
"IsFKMapping": false,
"IsPrimaryKey": false,
"IsOptimistic": false,
"IsRequired": true,
"IsAutoGenerated": false,
"IsAuditable": false,
"CanValidateAgainstFKTable": false
},
{
"Name": "USER_ID_LAST_UPDT",
"DataType": "VARCHAR2",
"DataScale": 0,
"DataLength": 50,
"ForeignKeyTable": null,
"FKParentTable": null,
"FKPosition": 1,
"FKColumn": null,
"FKTableCount": 0,
"IsFKMapping": false,
"IsPrimaryKey": false,
"IsOptimistic": false,
"IsRequired": true,
"IsAutoGenerated": false,
"IsAuditable": true,
"CanValidateAgainstFKTable": false
},
{
"Name": "TMSP_LAST_UPDT",
"DataType": "DATE",
"DataScale": 0,
"DataLength": 23,
"ForeignKeyTable": null,
"FKParentTable": null,
"FKPosition": 1,
"FKColumn": null,
"FKTableCount": 0,
"IsFKMapping": false,
"IsPrimaryKey": false,
"IsOptimistic": true,
"IsRequired": true,
"IsAutoGenerated": false,
"IsAuditable": true,
"CanValidateAgainstFKTable": false
}
]
},
"Records": [
{
"Code": "AS",
"OriginalCode": null,
"Description": "Air Sparging",
"RowIndicator": "R",
"IsInactive": false,
"OptimisticValue": "04/23/2019 04:11:49",
"ColumnData": [
"AS",
"Air Sparging",
"Y",
"stephen.bowers@cgi.com",
"4/23/2019 4:11:49.0"
]
},
{
"Code": "BV",
"OriginalCode": null,
"Description": "Bioventing",
"RowIndicator": "R",
"IsInactive": false,
"OptimisticValue": "04/22/2019 20:49:02",
"ColumnData": [
"BV",
"Bioventing",
"N",
"stephen.bowers@cgi.com",
"4/22/2019 20:49:2.0"
]
},
{
"Code": "OI",
"OriginalCode": null,
"Description": "Oxygen Injection",
"RowIndicator": "R",
"IsInactive": false,
"OptimisticValue": "04/22/2019 20:49:02",
"ColumnData": [
"OI",
"Oxygen Injection",
"N",
"stephen.bowers@cgi.com",
"4/22/2019 20:49:2.0"
]
},
{
"Code": "AA",
"OriginalCode": null,
"Description": "AA Description",
"RowIndicator": "R",
"IsInactive": false,
"OptimisticValue": "03/01/2019 11:34:48",
"ColumnData": [
"AA",
"AA Description",
"N",
"stephen.bowers@cgi.com",
"3/1/2019 11:34:48.0"
]
},
{
"Code": "BB",
"OriginalCode": null,
"Description": "BB Description",
"RowIndicator": "R",
"IsInactive": false,
"OptimisticValue": "03/01/2019 11:34:48",
"ColumnData": [
"BB",
"BB Description",
"N",
"stephen.bowers@cgi.com",
"3/1/2019 11:34:48.0"
]
},
{
"Code": "TE",
"OriginalCode": null,
"Description": "Description 1",
"RowIndicator": "R",
"IsInactive": false,
"OptimisticValue": "03/01/2019 12:40:59",
"ColumnData": [
"TE",
"Description 1",
"N",
"omar.elboury@cgi.com",
"3/1/2019 12:40:59.0"
]
},
{
"Code": "z4",
"OriginalCode": null,
"Description": "Test ZZ",
"RowIndicator": "R",
"IsInactive": false,
"OptimisticValue": "04/23/2019 05:52:45",
"ColumnData": [
"z4",
"Test ZZ",
"Y",
"stephen.bowers@cgi.com",
"4/23/2019 5:52:45.0"
]
},
{
"Code": "z6",
"OriginalCode": null,
"Description": "Test ZZ",
"RowIndicator": "R",
"IsInactive": false,
"OptimisticValue": "04/23/2019 05:58:57",
"ColumnData": [
"z6",
"Test ZZ",
"Y",
"stephen.bowers@cgi.com",
"4/23/2019 5:58:57.0"
]
},
{
"Code": "z7",
"OriginalCode": null,
"Description": "Test ZZz",
"RowIndicator": "R",
"IsInactive": false,
"OptimisticValue": "04/23/2019 06:54:30",
"ColumnData": [
"z7",
"Test ZZz",
"Y",
"stephen.bowers@cgi.com",
"4/23/2019 6:54:30.0"
]
},
{
"Code": "A1",
"OriginalCode": null,
"Description": "Test ZZ",
"RowIndicator": "R",
"IsInactive": false,
"OptimisticValue": "04/27/2019 08:34:16",
"ColumnData": [
"A1",
"Test ZZ",
"Y",
"stephen.bowers@cgi.com",
"4/27/2019 8:34:16.0"
]
},
{
"Code": "P9",
"OriginalCode": null,
"Description": "Test ZZI",
"RowIndicator": "R",
"IsInactive": false,
"OptimisticValue": "04/29/2019 09:43:07",
"ColumnData": [
"P9",
"Test ZZI",
"Y",
"omar.elboury@cgi.com",
"4/29/2019 9:43:7.0"
]
},
{
"Code": "z5",
"OriginalCode": null,
"Description": "Test ZZ",
"RowIndicator": "R",
"IsInactive": false,
"OptimisticValue": "04/23/2019 05:56:36",
"ColumnData": [
"z5",
"Test ZZ",
"Y",
"stephen.bowers@cgi.com",
"4/23/2019 5:56:36.0"
]
},
{
"Code": "QQ",
"OriginalCode": null,
"Description": "Scott Test Code",
"RowIndicator": "R",
"IsInactive": false,
"OptimisticValue": "04/05/2019 08:52:37",
"ColumnData": [
"QQ",
"Scott Test Code",
"Y",
"stephen.bowers@cgi.com",
"4/5/2019 8:52:37.0"
]
},
{
"Code": "z3",
"OriginalCode": null,
"Description": "Test ZZ",
"RowIndicator": "R",
"IsInactive": false,
"OptimisticValue": "04/22/2019 20:55:37",
"ColumnData": [
"z3",
"Test ZZ",
"Y",
"stephen.bowers@cgi.com",
"4/22/2019 20:55:37.0"
]
},
{
"Code": "ZZ",
"OriginalCode": null,
"Description": "Test ZZ",
"RowIndicator": "R",
"IsInactive": false,
"OptimisticValue": "04/25/2019 06:24:32",
"ColumnData": [
"ZZ",
"Test ZZ",
"N",
"stephen.bowers@cgi.com",
"4/25/2019 6:24:32.0"
]
},
{
"Code": "Z2",
"OriginalCode": null,
"Description": "Test ZZ",
"RowIndicator": "R",
"IsInactive": false,
"OptimisticValue": "04/22/2019 20:54:03",
"ColumnData": [
"Z2",
"Test ZZ",
"Y",
"stephen.bowers@cgi.com",
"4/22/2019 20:54:3.0"
]
},
{
"Code": "Z9",
"OriginalCode": null,
"Description": "Test ZZ",
"RowIndicator": "R",
"IsInactive": false,
"OptimisticValue": "04/26/2019 06:56:40",
"ColumnData": [
"Z9",
"Test ZZ",
"Y",
"stephen.bowers@cgi.com",
"4/26/2019 6:56:40.0"
]
},
{
"Code": "q1",
"OriginalCode": null,
"Description": "Test ZZ",
"RowIndicator": "R",
"IsInactive": false,
"OptimisticValue": "04/27/2019 19:08:49",
"ColumnData": [
"q1",
"Test ZZ",
"Y",
"stephen.bowers@cgi.com",
"4/27/2019 19:8:49.0"
]
},
{
"Code": "q2",
"OriginalCode": null,
"Description": "Test ZZ",
"RowIndicator": "R",
"IsInactive": false,
"OptimisticValue": "04/27/2019 19:08:49",
"ColumnData": [
"q2",
"Test ZZ",
"Y",
"stephen.bowers@cgi.com",
"4/27/2019 19:8:49.0"
]
},
{
"Code": "q3",
"OriginalCode": null,
"Description": "Test ZZz",
"RowIndicator": "R",
"IsInactive": false,
"OptimisticValue": "04/27/2019 19:08:49",
"ColumnData": [
"q3",
"Test ZZz",
"Y",
"stephen.bowers@cgi.com",
"4/27/2019 19:8:49.0"
]
},
{
"Code": "q4",
"OriginalCode": null,
"Description": "Test ZZ",
"RowIndicator": "R",
"IsInactive": false,
"OptimisticValue": "04/27/2019 19:08:49",
"ColumnData": [
"q4",
"Test ZZ",
"Y",
"stephen.bowers@cgi.com",
"4/27/2019 19:8:49.0"
]
},
{
"Code": "q5",
"OriginalCode": null,
"Description": "Test ZZ",
"RowIndicator": "R",
"IsInactive": false,
"OptimisticValue": "04/27/2019 19:08:49",
"ColumnData": [
"q5",
"Test ZZ",
"Y",
"stephen.bowers@cgi.com",
"4/27/2019 19:8:49.0"
]
},
{
"Code": "q6",
"OriginalCode": null,
"Description": "Scott Test Code",
"RowIndicator": "R",
"IsInactive": false,
"OptimisticValue": "04/27/2019 19:08:49",
"ColumnData": [
"q6",
"Scott Test Code",
"Y",
"stephen.bowers@cgi.com",
"4/27/2019 19:8:49.0"
]
},
{
"Code": "q7",
"OriginalCode": null,
"Description": "Test ZZ",
"RowIndicator": "R",
"IsInactive": false,
"OptimisticValue": "04/27/2019 19:08:49",
"ColumnData": [
"q7",
"Test ZZ",
"Y",
"stephen.bowers@cgi.com",
"4/27/2019 19:8:49.0"
]
},
{
"Code": "q8",
"OriginalCode": null,
"Description": "Test ZZ",
"RowIndicator": "R",
"IsInactive": false,
"OptimisticValue": "04/27/2019 19:08:49",
"ColumnData": [
"q8",
"Test ZZ",
"N",
"stephen.bowers@cgi.com",
"4/27/2019 19:8:49.0"
]
},
{
"Code": "q9",
"OriginalCode": null,
"Description": "Test ZZ",
"RowIndicator": "R",
"IsInactive": false,
"OptimisticValue": "04/27/2019 19:08:49",
"ColumnData": [
"q9",
"Test ZZ",
"Y",
"stephen.bowers@cgi.com",
"4/27/2019 19:8:49.0"
]
}
]
},
"ResponseMessages": [],
"ResponseStatusCode": 1,
"ResponseMessage": ""
}