jQuery UI Widgets › Forums › Navigation › Tree › jqxTree data from,mysql can not work,pls help me!!
This topic contains 4 replies, has 3 voices, and was last updated by Dimitar 8 years ago.
-
Author
-
Hi bro.
I want to using jqxTree shown menu,I can get data from mysql,but can not work in jqxTree.pls help!!!
*************
php code:
public function treedata(){
$menu=D(‘menu’);
$list=$menu->select();
echo json_encode($list);
}
result is:
[{“id”:”1″,”parentid”:”0″,”name”:”Foods”},{“id”:”2″,”parentid”:”1″,”name”:”Fruits”},{“id”:”3″,”parentid”:”1″,”name”:”Vegetables”},{“id”:”4″,”parentid”:”2″,”name”:”apple”}]
*************
html code:
$(document).ready(function() {
// Stuff to do as soon as the DOM is ready;
$(“#splitter”).jqxSplitter({ width: ‘100%’, height: ‘100%’, panels: [{ size: 250}] });
$(‘#jqxTree’).jqxTree({ height: ‘100%’, width: ‘100%’,theme:’bootstrap’ });
$(‘#jqxTree’).css(‘visibility’, ‘visible’);
//get data
$(‘#jqxTree’).jqxTree({ source: source, width: ‘100%’, height: ‘100%’});
$(‘#jqxTree’).jqxTree(‘selectItem’, null);});
$.ajax({
type:’POST’,
url:’http://localhost/phperp/index.php/Home/Index/treedata’,
alert(data);
}
});
the question is:
var source =[];
source=data??? can not work!!!here is my code:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″>
<title>tree</title>
<link rel=”stylesheet” href=”<?php echo ADMIN_CSS_URL;?>jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”<?php echo ADMIN_CSS_URL;?>jqwidgets/styles/jqx.bootstrap.css” type=”text/css” />
<script type=”text/javascript” src=”<?php echo ADMIN_JS_URL;?>scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”<?php echo ADMIN_JS_URL;?>scripts/demos.js”></script>
<script type=”text/javascript” src=”<?php echo ADMIN_JS_URL;?>jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”<?php echo ADMIN_JS_URL;?>jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”<?php echo ADMIN_JS_URL;?>jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”<?php echo ADMIN_JS_URL;?>jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”<?php echo ADMIN_JS_URL;?>jqwidgets/jqxtree.js”></script>
<script type=”text/javascript” src=”<?php echo ADMIN_JS_URL;?>qwidgets/jqxexpander.js”></script>
<script type=”text/javascript” src=”<?php echo ADMIN_JS_URL;?>jqwidgets/jqxsplitter.js”></script>
<style type=”text/css”>
html, body
{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
</style>
<script type=”text/javascript”>
$(document).ready(function() {
// Stuff to do as soon as the DOM is ready;
$(“#splitter”).jqxSplitter({ width: ‘100%’, height: ‘100%’, panels: [{ size: 250}] });
$(‘#jqxTree’).jqxTree({ height: ‘100%’, width: ‘100%’,theme:’bootstrap’ });
$(‘#jqxTree’).css(‘visibility’, ‘visible’);
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘id’ },
{ name: ‘parentid’ },
{ name: ‘name’ }
],
url: ‘http://localhost/phperp/Home/Index/treedata’,
id: ‘id’,
async: false
};
var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();
var records = dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: ‘name’, map: ‘label’}]);
$(‘#jqxTree’).jqxTree({ source: records, width: ‘100%’, height: ‘100%’});
$(‘#jqxTree’).on(‘select’, function (event) {
var args = event.args;
var item = $(‘#jqxTree’).jqxTree(‘getItem’, args.element);
$(“#ContentPanel”).html(“<div style=’margin: 10px;’>” + item.id + “</div>”);
});
});
</script></head>
<body class=’default’>
<div id=”splitter”>
<div>
<div style=”visibility: hidden; border: none;” id=’jqxTree’>
</div></div>
<div id=”ContentPanel”>
</div>
</div>
</body>
</html>Hi Ray,
Could you, please, remove the following line:
$(‘#jqxTree’).jqxTree({ height: ’100%’, width: ’100%’,theme:’bootstrap’ });
and leave only this one:
$(‘#jqxTree’).jqxTree({ source: records, width: ’100%’, height: ’100%’});
Does the issue occur afterwards?If it has not been resolved, please make sure you are using the latest version of jQWidgets (4.1.2) and share if any errors are thrown in your browser’s console.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi guys.I have a problem.I want to use of jqxtree with checkBox.I want to bind data with ajax,but in edit mode some checkbox have true value.
I dont know how I can set value to checkbox.pleas help me.`
$.ajax({
url: url,
data: “”,
type: ‘POST’,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function (json) {
var result = $.parseJSON(json.d);
var source =
{
datatype: “json”,
localdata: result
};
var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();
var records = dataAdapter.getRecordsHierarchy(‘Id’, ‘ParentId’, ‘items’, [{ name: ‘Text’, map: ‘label’ }]);
$(element).jqxTree({ source: records, hasThreeStates: true, checkboxes: true });
$(element).on(‘change’, function (event) {
var checked = event.args.checked;
$(element).jqxTree({ hasThreeStates: checked });
});
$(element).jqxTree(‘selectItem’, $(“#home”)[0]);
}
}); -
AuthorPosts
You must be logged in to reply to this topic.