|
Title: How-to render plugin-objects in a table Post by: WizPS on September 05, 2022, 11:34:41 PM Hello,
I need to render different plugins ordered as table within a layout panel and below you find an example. The expected outcome is a center layout with a 3x3 table with cells like so: row:1,col:2 panel test1 containing a propertygrid row:2,col:3 panel test2 row:3,col:1 propertygrid test3 https://jsfiddle.net/uvLrtgpm/#&togetherjs=1OS43x2rsx (https://jsfiddle.net/uvLrtgpm/#&togetherjs=1OS43x2rsx) 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"> (function ($) { $.fn.myeasyUI = function (opts) { var ret = main(opts, this); return ret; }; function main(opts, $element) { if (!opts || !opts.plugin) { return $element; } try { $element[opts.plugin](opts.plugincontent); } catch (error) { console.log(error); var c = $('<div/>').appendTo($element); $element.text('aaaa'); } 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 == 'panel') { var c = $('<div></div>').appendTo($element); c.panel(o); } main(o, c); }); } return $element; } $.fn.table = function (opts) { var table = $('<table/>', { border: 1, width: '100%' }); for (i = 0; i < opts.rows; i++) { var row = $('<tr/>'); for (ii = 0; ii < opts.cols; ii++) { var content = opts.tablecontent.filter(function (obj) { return obj.row === i && obj.col === ii; })[0]; var dat = $('<td/>', { width: 1 / opts.cols * 100 + '%' }); if (content) { var c = $('<div/>').appendTo(dat); main(content, c); } row.append(dat); } table.append(row); } $(this).append(table); return this; }; })(jQuery); 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 } } }] } $('#pg').myeasyUI({ plugin: 'layout' , plugincontent: { fit: true } , contentarray: [{ region: 'center', title: 'center layout', split: true, plugin: 'table', plugincontent: { rows: 3, cols: 3 , tablecontent: [ { id: 'test1', row: 0, col: 1, plugin: 'panel', plugincontent: { fit: false, height: 100, width: 300, title: 'test1', plugin: 'propertygrid', plugincontent: { fit: true, showGroup: true, data: data } } } , { id: 'test2', row: 1, col: 2, plugin: 'panel', plugincontent: { fit: false, height: 100, width: 300, title: 'test2' } } , { id: 'test3', row: 2, col: 0, plugin: 'propertygrid', plugincontent: { title: 'test3', fit: true, showGroup: true, data: data } } ] } }] }); </script> </body> </html> However propertygrid test3 is not getting rendered. Please advice how to render any easyUI component in a table. Many thanks in advance! Title: Re: How-to render plugin-objects in a table Post by: jarry on September 06, 2022, 01:45:34 AM This is the working example.
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"> (function ($) { $.fn.myeasyUI = function (opts) { var ret = main(opts, this); return ret; }; function main(opts, $element) { 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 == 'panel') { var c = $('<div></div>').appendTo($element); // c.panel(o); } main(o, c); // $element[opts.plugin]() }); } return $element; } $.fn.table = function (opts) { var table = $('<div class="f-column"></div>').appendTo(this); for(var i=0; i<opts.rows; i++){ var row = $('<div class="f-row"></div>').appendTo(table); for(var j=0; j<opts.cols; j++){ var col = $('<div style="flex:1;overflow:hidden;position:relative;border:1px solid #ccc"></div>').appendTo(row); var content = opts.tablecontent.filter(function (obj) { return obj.row === i && obj.col === j; })[0]; if (content){ col.css('height', content.height); var p = $('<div></div>').appendTo(col); p.css({ position:'absolute', width:'100%', height:'100%', overflow:'auto' }); var c = $('<div/>').appendTo(p); main(content, c); } } } table.trigger('resize'); return this; }; })(jQuery); 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 } } }] } $('#pg').myeasyUI({ plugin: 'layout' , plugincontent: { fit: true } , contentarray: [{ region: 'center', title: 'center layout', split: true, plugin: 'table', plugincontent: { rows: 3, cols: 3 , tablecontent: [ { id: 'test1', row: 0, col: 1, height:'200px', plugin: 'panel', plugincontent: { fit: true, title: 'test1'}, contentarray: [ {plugin:'propertygrid',plugincontent:{fit:true,title:'propertygrid', data:data}} ] } , { id: 'test2', row: 1, col: 2, height:'100px', plugin: 'panel', plugincontent: { fit: false, height: 100, width: 300, title: 'test2' } } , { id: 'test3', row: 2, col: 0, height:'200px', plugin: 'propertygrid', plugincontent: { title: 'test3', fit: true, showGroup: true, data: data } } ] } }] }); </script> </body> </html> Title: Re: How-to render plugin-objects in a table Post by: WizPS on September 10, 2022, 01:46:57 AM Yes thats works. Many thanks for this fine help! :)
|