 Show Posts
|
|
Pages: [1] 2 3 ... 5
|
|
3
|
General Category / EasyUI for jQuery / Loading combogrid columns in datagrid
|
on: October 30, 2022, 02:43:42 PM
|
Hi, Please help loading combogrid columns inside onShowPanel event like attached example. When clicking any product combobox, there should be a dropdown panel with 3 columns and pagination and this is not occuring for me. https://jsfiddle.net/79ubm42f/<!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>
<h2>Row Editing in DataGrid</h2>
<p>Click the row to start editing.</p>
<div style="margin:20px 0;"></div>
<div id="dg"></div>
<script type="text/javascript">
$('#dg').datagrid({
iconCls: 'icon-edit',
singleSelect: true,
onClickCell: onClickCell,
onEndEdit: onEndEdit,
columns: [[{ field: 'itemid', title: 'Item ID', width: 80 }
, {
field: 'productid',
title: 'Product',
width: 100,
formatter: function (value, row) { return row.productname; },
editor: {
type: 'combogrid', options: {
panelWidth: 450
, valueField: 'productid',
textField: 'productname',
required: true,
onShowPanel: function () {
$(this).combogrid({
columns: [[{ field: 'field1', title: 'field1', width: 80 }, { field: 'field2', title: 'field2', width: 80 }, { field: 'field3', title: 'field3', width: 80 }]]
, pagination: true
});
}
}
}
},
{ field: 'listprice', title: 'listprice', width: 80, align: 'right', editor: { type: 'numberbox', options: { precision: 2 } } }
, { field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right', editor: { type: 'numberbox', options: { precision: 2 } } }
, { field: 'attr1', title: 'attr1', width: 250, editor: 'textbox' }
, { field: 'status', title: 'status', width: 60, align: 'center', editor: { type: 'checkbox', options: { on: 'P', off: '' } } }
]]
, data: [
{ "productid": "FI-SW-01", "productname": "Koi", "unitcost": "10.00", "status": "P", "listprice": "36.50", "attr1": "Large", "itemid": "EST-1" },
{ "productid": "K9-DL-01", "productname": "Dalmation", "unitcost": "12.00", "status": "P", "listprice": "18.50", "attr1": "Spotted Adult Female", "itemid": "EST-10" },
{ "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": "12.00", "status": "P", "listprice": "38.50", "attr1": "Venomless", "itemid": "EST-11" },
{ "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": "12.00", "status": "P", "listprice": "26.50", "attr1": "Rattleless", "itemid": "EST-12" },
{ "productid": "RP-LI-02", "productname": "Iguana", "unitcost": "12.00", "status": "P", "listprice": "35.50", "attr1": "Green Adult", "itemid": "EST-13" },
{ "productid": "FL-DSH-01", "productname": "Manx", "unitcost": "12.00", "status": "P", "listprice": "158.50", "attr1": "Tailless", "itemid": "EST-14" },
{ "productid": "FL-DSH-01", "productname": "Manx", "unitcost": "12.00", "status": "P", "listprice": "83.50", "attr1": "With tail", "itemid": "EST-15" },
{ "productid": "FL-DLH-02", "productname": "Persian", "unitcost": "12.00", "status": "P", "listprice": "23.50", "attr1": "Adult Female", "itemid": "EST-16" },
{ "productid": "FL-DLH-02", "productname": "Persian", "unitcost": "12.00", "status": "P", "listprice": "89.50", "attr1": "Adult Male", "itemid": "EST-17" },
{ "productid": "AV-CB-01", "productname": "Amazon Parrot", "unitcost": "92.00", "status": "P", "listprice": "63.50", "attr1": "Adult Male", "itemid": "EST-18" }
]
});
function onClickCell(index, field) {
if (editIndex != index) {
if (endEditing()) {
$('#dg').datagrid('selectRow', index)
.datagrid('beginEdit', index);
var ed = $('#dg').datagrid('getEditor', { index: index, field: field });
if (ed) {
($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
}
editIndex = index;
} else {
setTimeout(function () {
$('#dg').datagrid('selectRow', editIndex);
}, 0);
}
}
}
var editIndex = undefined;
function endEditing() {
if (editIndex == undefined) { return true }
if ($('#dg').datagrid('validateRow', editIndex)) {
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function onEndEdit(index, row) {
var ed = $(this).datagrid('getEditor', {
index: index,
field: 'productid'
});
row.productname = $(ed.target).combobox('getText');
}
</script>
</body>
</html> Thanks for advice! |
|
|
|
|
4
|
General Category / EasyUI for jQuery / Ribbon extension to indicate selected "mother" tab when looking at another tab.
|
on: September 16, 2022, 03:09:05 AM
|
Hi, I use ribbon extension and want the tab of the selected menu (mother tab) to indicate its current having that selection, when user looks at another tab (non mother tab). So when the user selects a menu objects, it gets "selected". However when user clicks another tab, its no longer visible under witch tab the active and selected menu object is. Therefore it would be good to highlight the "mother tab" when a "non mother tab" gets selected. Possibly by changing the background colour of the "mother tab" or similar. <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ribbon - jQuery EasyUI</title>
<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>
<link rel="stylesheet" type="text/css" href="ribbon.css">
<link rel="stylesheet" type="text/css" href="ribbon-icon.css">
<script type="text/javascript" src="jquery.ribbon.js"></script>
<script type="text/javascript">
var data = {
selected: 0,
tabs: [{
title: 'Home',
groups: [{
title: 'Clipboard',
tools: [{
type: 'splitbutton',
id: 'paste',
text: 'Paste',
iconCls: 'icon-paste-large',
iconAlign: 'top',
size: 'large',
menuItems: [{
id: 'paste',
text: 'Paste',
iconCls: 'icon-paste'
}, {
id: 'paste-special',
text: 'Paste Special...',
iconCls: 'icon-paste'
}]
}, {
type: 'toolbar',
dir: 'v',
tools: [{
id: 'cut',
text: 'Cut',
iconCls: 'icon-cut'
}, {
id: 'copy',
text: 'Copy',
iconCls: 'icon-copy'
}, {
id: 'format',
text: 'Format',
iconCls: 'icon-format'
}]
}]
}, {
title: 'Editing',
dir: 'v',
tools: [{
type: 'splitbutton',
id: 'find',
text: 'Find',
iconCls: 'icon-find',
menuItems: [{
id: 'find',
text: 'Find',
iconCls: 'icon-find'
}, {
id: 'go',
text: 'Go to...',
iconCls: 'icon-go'
}]
}, {
id: 'replace',
text: 'Replace',
iconCls: 'icon-replace'
}, {
type: 'menubutton',
id: 'select',
text: 'Select',
iconCls: 'icon-select',
menuItems: [{
id: 'selectall',
text: 'Select All',
iconCls: 'icon-selectall'
}, {
id: 'select-object',
text: 'Select Objects',
iconCls: 'icon-select'
}]
}]
}]
}, {
title: 'Home2',
groups: [{
title: 'Clipboard2',
tools: [{
type: 'splitbutton',
id: 'paste2',
text: 'Paste2',
iconCls: 'icon-paste-large',
iconAlign: 'top',
size: 'large',
menuItems: [{
id: 'paste2',
text: 'Paste2',
iconCls: 'icon-paste'
}, {
id: 'paste-special2',
text: 'Paste Special2...',
iconCls: 'icon-paste'
}]
}, {
type: 'toolbar',
dir: 'v',
tools: [{
id: 'cut2',
text: 'Cut2',
iconCls: 'icon-cut'
}, {
id: 'copy2',
text: 'Copy2',
iconCls: 'icon-copy'
}, {
id: 'format2',
text: 'Format2',
iconCls: 'icon-format'
}]
}]
}]
}, {
title: 'Insert',
groups: [{
title: 'Table',
tools: [{
type: 'menubutton',
id: 'table',
text: 'Table',
iconCls: 'icon-table-large',
iconAlign: 'top',
size: 'large'
}]
}, {
title: 'Illustrations',
tools: [{
id: 'picture',
text: 'Picture',
iconCls: 'icon-picture-large',
iconAlign: 'top',
size: 'large'
}, {
id: 'clipart',
text: 'Clip Art',
iconCls: 'icon-clipart-large',
iconAlign: 'top',
size: 'large'
}, {
type: 'menubutton',
id: 'shapes',
text: 'Shapes',
iconCls: 'icon-shapes-large',
iconAlign: 'top',
size: 'large'
}, {
id: 'smartart',
text: 'SmartArt',
iconCls: 'icon-smartart-large',
iconAlign: 'top',
size: 'large'
}, {
id: 'chart',
text: 'Chart',
iconCls: 'icon-chart-large',
iconAlign: 'top',
size: 'large'
}]
}]
}]
};
$(function () {
$('#rr').ribbon({
data: data
, onClick: function (name, target) {
var selected = $('.l-btn-selected');
for (var obj of selected) {
console.log($(obj).linkbutton('options').id);
$(obj).linkbutton('unselect');
}
$('#' + $(target).linkbutton('options').id).linkbutton("select");
}
});
});
</script>
</head>
<body>
<div id="rr" style="width:100%;">
</div>
<div id="content" style="width:100%;">
</div>
</body>
</html> Thanks for advice! |
|
|
|
|
6
|
General Category / EasyUI for jQuery / 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<!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! |
|
|
|
|
8
|
General Category / EasyUI for jQuery / Re: Stacked panels in json rendered layout
|
on: September 02, 2022, 02:40:03 PM
|
Hi Jarry, When resizing the browser window, propertygrid should follow and currently id does not. When adding fit:true something odd happens to the height of the panels. Please have a look at the following code example: https://jsfiddle.net/47qjuvcx/1/<!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>').appendTo(p);
} else if (opts.plugin == 'panel') {
var c = $('<div></div>').appendTo($element);
c.panel(o);
}
main(o, c);
// $element[opts.plugin]()
});
}
return $element;
}
})(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: 'panel', contentarray: [
{ fit: true , title: 'Panel1', width: '100%', height: 200, plugin: 'propertygrid', plugincontent: { data: data } },
{ fit: true, title: 'Panel2', width: '100%', height: 150, plugin: 'propertygrid', plugincontent: { data: data } },
{ fit: true, title: 'Panel3', width: '100%', height: 150, plugin: 'propertygrid', plugincontent: { data: data } }
]
}]
});
</script>
</body>
</html> Please advice how to get the panel and property grid to follow the browser with. Many thanks in advance! |
|
|
|
|
9
|
General Category / EasyUI for jQuery / Re: Stacked panels in json rendered layout
|
on: August 31, 2022, 08:35:53 AM
|
Hi Jarry, That code produces the stacked panels however panel content can't be rendered. Recursion by main(o, c) is left out. In this example there's an added propertygrid to each of the tree panels. Expected outcome is three stacked panels containing a property grid each like so: <!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>').appendTo(p);
main(o, c);
} else if (opts.plugin == 'panel') {
var p = $('<div></div>').appendTo($element);
p.panel(o);
} else {
main(o, c);
}
// main(o, c);
// $element[opts.plugin]()
});
}
return $element;
}
})(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: 'panel', contentarray: [
{ title: 'Panel1', width: '100%', height: 200, plugin:'propertygrid', plugincontent: { data: data }},
{ title: 'Panel2', width: '100%', height: 150, plugin: 'propertygrid', plugincontent: { data: data } },
{ title: 'Panel3', width: '100%', height: 150, plugin: 'propertygrid', plugincontent: { data: data } }
]
}]
});
</script>
</body>
</html> Please propose how to render also the propertygrid into the panels. Thanks' in advance for help! |
|
|
|
|
10
|
General Category / EasyUI for jQuery / Stacked panels in json rendered layout
|
on: August 29, 2022, 04:03:54 PM
|
Hello, In this example I use JSON rendering a layout where expected outcome is tree stacked panels (Panel1,Panel2,Panel3) in the "center" layout like so: https://jsfiddle.net/wqdLef8r/#&togetherjs=HeSQ1cLuLE<!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>').appendTo(p);
} else if (opts.plugin == 'panel') {
var p = $element[opts.plugin](o);
}
main(o, c);
$element[opts.plugin]()
});
}
return $element;
}
})(jQuery);
$('#pg').myeasyUI({
plugin: 'layout'
, plugincontent: { fit: true }
, contentarray: [{
region: 'center', title: 'center layout', split: true, plugin: 'panel', contentarray: [
{ title: 'Panel1', width: '100%', height: 200 },
{ title: 'Panel2', width: '100%', height: 150 },
{ title: 'Panel3', width: '100%', height: 150 }
]
}]
});
</script>
</body>
</html> However only the last panel is getting rendered. Please advise how can I get these panels stacked on top of each other? Many thanks for your help! |
|
|
|
|
12
|
General Category / EasyUI for jQuery / Re: EasyUI components rendered by JSON
|
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! |
|
|
|
|
13
|
General Category / EasyUI for jQuery / EasyUI components rendered by JSON
|
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! |
|
|
|
|
15
|
General Category / EasyUI for jQuery / Maximizing portal panel not working as expected
|
on: January 17, 2021, 08:07:00 AM
|
Maximizing portal panel just gets a bit higher instead of getting maximized across the window. How can I get portal panel to be maximized across the window? I added to $(function(){
$('#pp').portal({
border:false,
fit:true
});
add();
});
function add(){
for(var i=0; i<3; i++){
var p = $('<div/>').appendTo('body');
p.panel({
title:'Title'+i,
content:'<div style="padding:5px;">Content'+(i+1)+'</div>',
height:100,
closable:true,
collapsible: true,
maximizable: true
});
$('#pp').portal('add', {
panel:p,
columnIndex:i
});
}
$('#pp').portal('resize');
}Please advice. |
|
|
|
|
