Creating a dynamic tabs

[park no eunMember]

Hello students studying in Korea jqxwidget.

does not work on one of jqxtabs import json object value when you click jqxtree I want to create a dynamic tab.

inputbox or tab generated jqxgrid several

I would like to know more about initTabsContent method.

My good intentions Eagle hayeoseo Google Translator to translate the delivery will happen I do not know.

Thank you.

$(document).ready(function () {
var theme = getTheme();
$.getJSON(‘http://localhost:8181/smartbiserver/selectfolder.do?’, function(json) {
console.log(json);
var data = json;
var source =
{
datatype: “json”,
datafields: [
{ name: ‘id’ },
{ name: ‘parentid’ },
{ name: ‘text’ }
],
id: ‘id’,
localdata: data
};

var dataAdapter = new $.jqx.dataAdapter(source);

dataAdapter.dataBind();

var records = dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: ‘text’, map: ‘label’}]);
$(‘#jqxTree’).jqxTree({ source: records, width: ‘300px’, theme: theme });
var items = $(‘#jqxTree’).jqxTree(‘getItems’);
console.log(items);

})
$(‘#jqxTabs’).append(“”+”test”+””);

//$(‘#jqxTabs’).jqxTabs({ height: ‘500px’, width: ‘500px’, theme: theme });

//jqxtabs 추가하는 코드
//$(‘#jqxTabs’).jqxTabs(‘addLast’, ‘Sample title’, ‘Sample content’);
//$(‘#jqxTabs’).jqxTabs(‘ensureVisible’, -1);

var initGrid = function () {

var source =
{
datatype: “json”,
datafields: [
{ name: ‘base_dt’ },
{ name: ‘base_dd_name’ },
{ name: ‘base_yy’ },
{ name: ‘base_yy_name’ },
{ name: ‘base_mm_name’ },
{ name: ‘load_dtm’ }
],
url: ‘http://localhost:8181/smartbiserver/selectallstat_basdt_code.do?’
};

//var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } });
var dataAdapter = new $.jqx.dataAdapter(source);

//그리드 뿌리는 구간
$(“#jqxGrid”).jqxGrid(
{
width: ‘100%’,
height: ‘84%’,
source: dataAdapter,
theme: theme,
sortable: true,
pageable: true,
autoheight: true,
columnsresize: true,
columns: [
{ text: ‘base_dt’, datafield: ‘base_dt’},
{ text: ‘base_dd_name’, datafield: ‘base_dd_name’},
{ text: ‘base_yy’, datafield: ‘base_yy’ },
{ text: ‘base_yy_name’, datafield: ‘base_yy_name’ },
{ text: ‘base_mm_name’, datafield: ‘base_mm_name’ },
{ text: ‘load_dtm’, datafield: ‘load_dtm’ }
]
});
}

var initWidgets = initGrid();
//이런식으로 써도됨

$(‘#jqxTabs’).jqxTabs({ width: 600, height: 600, theme: theme ,initTabContent: initWidgets, showCloseButtons: true });
// $(‘#jqxTabs’).jqxTabs({ ‘addLast’, ‘Sample title’, initTabContent: initWidgets }); < —

//$('#jqxTabs').jqxTabs('addLast', 'Sample title', 'Sample content');
$('#jqxTree').bind('select', function (event) {
var args = event.args;
var item = $('#jqxTree').jqxTree('getItem', args.element);
// $('#Events').jqxPanel('prepend', '

Selected: ‘ + item.label + ”);
console.log(item.label);
//$(‘#jqxTabs’).append(“”+item.label+””+”

“+item.label+”

“);
$(‘#jqxTabs’).jqxTabs(‘addLast’, item.label, item.label+”의 content”);
$(‘#jqxTabs’).jqxTabs(‘ensureVisible’, -1);

});
});

[DimitarParticipant]

Hello park no eun,

The initTabContent callback function is a function, which is called the first time a tab is initialized. For example, if you have three tabs and the first one is selected by default, initTabContent is called for the first tab when the widgets is initialized. When you select the second or the third tab for the first time, initTabContent is called for them. Find out more in the API Reference of jqxTabs.

Please check out the demo Loading Tab contents with Ajax, too.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts