|
WizPS
|
 |
« on: August 23, 2022, 05:30:14 AM » |
|
Hello, I'm creating a recursive JSON to render a page with different easyUI components. In this example I use following JSON where expected outcome is a layout with "west" and "center" region that both has a propertygrid like so: {
"plugin": "layout",
"plugincontent": { "fit": true },
"contentarray": [
{
"region": "west",
"split": true,
"title": "west",
"content": "west",
"width": "50%",
"plugin": "propertygrid",
"plugincontent": {
"url": "myeasyUI_propertygrid_data1.json",
"method": "get",
"showGroup": true,
"scrollbarSize": 0
}
},
{
"region": "center",
"height": "20%",
"title": "center",
"content": "center",
"split": true,
"plugin": "propertygrid",
"plugincontent": {
"url": "myeasyUI_propertygrid_data1.json",
"method": "get",
"showGroup": true,
"scrollbarSize": 0
}
}
]
}
This is my page code. I see it does the recursion however only the last propertygrid gets rendered. <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic PropertyGrid</h2>
<div id="pg">pg</div>
<script type="text/javascript">
(function ($) {
$.fn.myeasyUI = function (opts) {
return main(opts, this);
};
function main(opts, $element) {
console.log(opts);
if (!opts || !opts.plugin) { return $element; }
$element[opts.plugin](opts.plugincontent);
if (opts.contentarray instanceof Object) {
$.each(opts.contentarray, function (i, o) {
$element[opts.plugin]('add', main(o, $element));
});
}
return $element;
}
})(jQuery);
$('#pg').myeasyUI({
plugin: 'layout'
, plugincontent: { fit: true }
, contentarray: [{
region: 'west', split: true, title: 'west', content: 'west', width: '50%', plugin: 'propertygrid', plugincontent: { url: 'myeasyUI_propertygrid_data1.json', method: 'get', showGroup: true, scrollbarSize: 0 }
}, {
region: 'center', height: '20%', title: 'center', content: 'center', split: true, plugin: 'propertygrid', plugincontent: { url: 'myeasyUI_propertygrid_data1.json', method: 'get', showGroup: true, scrollbarSize: 0 }
}]
});
</script>
</body>
</html>
Many thanks for your help! |
|
|
|
« Last Edit: August 23, 2022, 06:49:46 AM by WizPS »
|
Logged
|
|
|
|
|
jarry
|
|
« Reply #1 on: August 25, 2022, 02:04:18 AM » |
|
Please try this code instead. <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic PropertyGrid</h2>
<div id="pg">pg</div>
<script type="text/javascript">
(function ($) {
$.fn.myeasyUI = function (opts) {
return main(opts, this);
};
function main(opts, $element) {
console.log(opts);
if (!opts || !opts.plugin) { return $element; }
$element[opts.plugin](opts.plugincontent);
if (opts.contentarray instanceof Object) {
$.each(opts.contentarray, function (i, o) {
$element[opts.plugin]('add', o);
var p = $element[opts.plugin]('panel', o.region);
var c = $('<div></div>').appendTo(p);
main(o, c);
// $element[opts.plugin]('add', main(o, $element));
});
}
return $element;
}
})(jQuery);
$('#pg').myeasyUI({
plugin: 'layout'
, plugincontent: { fit: true }
, contentarray: [{
region: 'west', split: true, title: 'west', width: '50%', plugin: 'propertygrid', plugincontent: { url: 'myeasyUI_propertygrid_data1.json', method: 'get', showGroup: true,fit:true, scrollbarSize: 0 }
}, {
region: 'center', height: '20%', title: 'center', split: true, plugin: 'propertygrid', plugincontent: { url: 'myeasyUI_propertygrid_data1.json', method: 'get', showGroup: true,fit:true, scrollbarSize: 0 }
}]
});
</script>
</body>
</html>
|
|
|
|
|
Logged
|
|
|
|
|
WizPS
|
|
« Reply #2 on: August 26, 2022, 01:09:37 PM » |
|
Hi Jarry, Yes this works for layout however gives an error for tabs and accordion. Following code has west, center and east regions. Its expected to give tabs and accordion with propertygrid in center and east but this gives an error. https://jsfiddle.net/oc0wrzxq/#&togetherjs=s7RtukD3mi<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div id="pg">pg</div>
<script type="text/javascript">
var data = {
"total": 7, "rows": [
{ "name": "Name", "value": "Bill Smith", "group": "ID Settings", "editor": "text" },
{ "name": "Address", "value": "", "group": "ID Settings", "editor": "text" },
{ "name": "Age", "value": "40", "group": "ID Settings", "editor": "numberbox" },
{ "name": "Birthday", "value": "01/02/2012", "group": "ID Settings", "editor": "datebox" },
{ "name": "SSN", "value": "123-456-7890", "group": "ID Settings", "editor": "text" },
{
"name": "Email", "value": "bill@gmail.com", "group": "Marketing Settings", "editor": {
"type": "validatebox",
"options": {
"validType": "email"
}
}
},
{
"name": "FrequentBuyer", "value": "false", "group": "Marketing Settings", "editor": {
"type": "checkbox",
"options": {
"on": true,
"off": false
}
}
}
]
};
(function ($) {
$.fn.myeasyUI = function (opts) {
return main(opts, this);
};
function main(opts, $element) {
console.log(opts);
if (!opts || !opts.plugin) { return $element; }
$element[opts.plugin](opts.plugincontent);
if (opts.contentarray instanceof Object) {
$.each(opts.contentarray, function (i, o) {
$element[opts.plugin]('add', o);
var p = $element[opts.plugin]('panel', o.region);
var c = $('<div></div>').appendTo(p);
main(o, c);
// $element[opts.plugin]('add', main(o, $element));
});
}
return $element;
}
})(jQuery);
$('#pg').myeasyUI({
plugin: 'layout'
, plugincontent: { fit: true }
, contentarray: [{
region: 'west', width: '33%', title: 'west', split: true, plugin: 'propertygrid', plugincontent: { showGroup: true, scrollbarSize: 0, data:data }
}, {
region: 'center', title: 'center', split: true, plugin: 'accordion', plugincontent: {}, contentarray: [{ title: 'accordion1', height: 300, content: 'accordion1' }, { title: 'accordion2', height: 300, plugin: 'propertygrid', plugincontent: { showGroup: true, scrollbarSize: 0, data: data } }]
}, {
region: 'east', split: true, title: 'east', width: '33%', plugin: 'tabs', plugincontent: { fit: true, tabHeight: 20 }, contentarray: [{ title: 'tab1', content: 'tab1' }, { title: 'tab2', plugin: 'propertygrid', plugincontent: { showGroup: true, scrollbarSize: 0, data: data } }]
}]
});
</script>
</body>
</html>
Please advice how to get this to work for also tabs and accordions. Many thanks for your help! |
|
|
|
« Last Edit: August 26, 2022, 03:11:17 PM by WizPS »
|
Logged
|
|
|
|
|
jarry
|
|
« Reply #3 on: August 26, 2022, 08:07:43 PM » |
|
This code works fine. <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Layout - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div id="pg">pg</div>
<script type="text/javascript">
var data = {
"total": 7, "rows": [
{ "name": "Name", "value": "Bill Smith", "group": "ID Settings", "editor": "text" },
{ "name": "Address", "value": "", "group": "ID Settings", "editor": "text" },
{ "name": "Age", "value": "40", "group": "ID Settings", "editor": "numberbox" },
{ "name": "Birthday", "value": "01/02/2012", "group": "ID Settings", "editor": "datebox" },
{ "name": "SSN", "value": "123-456-7890", "group": "ID Settings", "editor": "text" },
{
"name": "Email", "value": "bill@gmail.com", "group": "Marketing Settings", "editor": {
"type": "validatebox",
"options": {
"validType": "email"
}
}
},
{
"name": "FrequentBuyer", "value": "false", "group": "Marketing Settings", "editor": {
"type": "checkbox",
"options": {
"on": true,
"off": false
}
}
}
]
};
(function ($) {
$.fn.myeasyUI = function (opts) {
return main(opts, this);
};
function main(opts, $element) {
console.log(opts);
if (!opts || !opts.plugin) { return $element; }
$element[opts.plugin](opts.plugincontent);
if (opts.contentarray instanceof Object) {
$.each(opts.contentarray, function (i, o) {
if (opts.plugin=='layout'){
$element[opts.plugin]('add', o);
var p = $element[opts.plugin]('panel', o.region);
var c = $('<div></div>').appendTo(p);
} else if (opts.plugin=='accordion'){
$element[opts.plugin]('add', o);
var panels = $element[opts.plugin]('panels');
var p = panels[panels.length-1];
var c = $('<div></div>').appendTo(p);
} else if (opts.plugin=='tabs'){
$element[opts.plugin]('add', o);
var panels = $element[opts.plugin]('tabs');
var p = panels[panels.length-1];
var c = $('<div></div>').appendTo(p);
} else {
var c = $('<div></div>').appendTo($element);
}
main(o, c);
// $element[opts.plugin]('add', main(o, $element));
});
}
return $element;
}
})(jQuery);
$('#pg').myeasyUI({
plugin: 'layout'
, plugincontent: { fit: true }
, contentarray: [{
region: 'west', width: '33%', title: 'west', split: true, plugin: 'propertygrid', plugincontent: {fit:true, showGroup: true, scrollbarSize: 0, data:data }
}, {
region: 'center', title: 'center', split: true, plugin: 'accordion', plugincontent: {fit:true}, contentarray: [{ title: 'accordion1', height: 300, content: 'accordion1' }, { title: 'accordion2', height: 300, plugin: 'propertygrid', plugincontent: {fit:true, showGroup: true, scrollbarSize: 0, data: data } }]
}, {
region: 'east', split: true, title: 'east', width: '33%', plugin: 'tabs', plugincontent: { fit: true, tabHeight: 20 }, contentarray: [{ title: 'tab1', content: 'tab1' }, { title: 'tab2', plugin: 'propertygrid', plugincontent: { fit:true, showGroup: true, scrollbarSize: 0, data: data } }]
}]
});
</script>
</body>
</html>
|
|
|
|
|
Logged
|
|
|
|
|
WizPS
|
|
« Reply #4 on: August 27, 2022, 12:44:41 PM » |
|
Hi Jarry,
Indeed that code works fine.
Many thanks for your valuable help!
|
|
|
|
« Last Edit: August 28, 2022, 07:48:25 AM by WizPS »
|
Logged
|
|
|
|
|
poeziafree
|
|
« Reply #5 on: August 31, 2022, 11:58:03 PM » |
|
Hello, mate!
What you are developing is a very good approach.
We would appreciate if you share the whole code for all EasyUI components to be rendered by json.
Good luck!
|
|
|
|
|
Logged
|
|
|
|
|
WizPS
|
|
« Reply #6 on: September 05, 2022, 11:32:20 PM » |
|
Hi poeziafree,
Yes, this is an interesting plugin to work with and I'm yet only experimenting what can be the use. Lets see and revert when something can be shown.
BR
|
|
|
|
|
Logged
|
|
|
|
|
