Print Page - EasyUI components rendered by JSON

Title: EasyUI components rendered by JSON
Post by: 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:

Code:

{
"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.

Code:

https://jsfiddle.net/yh7uqjpz/#&togetherjs=249Mn2Trhh (https://jsfiddle.net/yh7uqjpz/#&togetherjs=249Mn2Trhh)
Many thanks for your help!

Title: Re: EasyUI components rendered by JSON
Post by: jarry on August 25, 2022, 02:04:18 AM

Please try this code instead.

Code:

Title: Re: EasyUI components rendered by JSON
Post by: WizPS 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 (https://jsfiddle.net/oc0wrzxq/#&togetherjs=s7RtukD3mi)

Code:

<!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!

Title: Re: EasyUI components rendered by JSON
Post by: jarry on August 26, 2022, 08:07:43 PM

This code works fine.

Code:

<!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>

Title: Re: EasyUI components rendered by JSON
Post by: WizPS on August 27, 2022, 12:44:41 PM

Hi Jarry,

Indeed that code works fine.

Many thanks for your valuable help!

Title: Re: EasyUI components rendered by JSON
Post by: poeziafree 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!

Title: Re: EasyUI components rendered by JSON
Post by: WizPS 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

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: WizPS on August 23, 2022, 05:30:14 AM