How-to render plugin-objects in a table

EasyUI Forum

April 19, 2024, 05:28:41 PM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > EasyUI for jQuery > How-to render plugin-objects in a table

Pages: [1]

« previous next »

Author

Topic: How-to render plugin-objects in a table (Read 1236 times)

WizPS

Jr. Member

Posts: 67

How-to render plugin-objects in a table

« 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

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!


	Logged

jarry

Administrator
Hero Member

Posts: 2262

Re: How-to render plugin-objects in a table

« Reply #1 on: September 06, 2022, 01:45:34 AM »

This is the working example.