jQuery EasyUI tree menu - dynamically loaded tree grid
Dynamically loaded tree grid lines help to load data from the server portion, avoid loading large data long wait. This tutorial will show you how to create a tree with dynamic load characteristic grid (TreeGrid).
Create tree grid (TreeGrid)
<Table title = "Products" class = "easyui-treegrid" style = "width: 700px; height: 300px" url = "treegrid3_getdata.php" rownumbers = "true" idField = "id" treeField = "name"> <Thead> <Tr> <Th field = "name" width = "250"> Name </ th> <Th field = "quantity" width = "100" align = "right"> Quantity </ th> <Th field = "price" width = "150" align = "right" formatter = "formatDollar"> Price </ th> <Th field = "total" width = "150" align = "right" formatter = "formatDollar"> Total </ th> </ Tr> </ Thead> </ Table>
Server-side code
treegrid3_getdata.php
$ Id = isset ($ _ POST [ 'id']) intval ($ _ POST [ 'id']): 0;? include 'conn.php'; $ Result = array (); $ Rs = mysql_query ( "select * from products where parentId = $ id"); while ($ row = mysql_fetch_array ($ rs)) { ? $ Row [ 'state'] = has_child ($ row [ 'id']) 'closed': 'open'; $ Row [ 'total'] = $ row [ 'price'] * $ row [ 'quantity']; array_push ($ result, $ row); } echo json_encode ($ result); function has_child ($ id) { $ Rs = mysql_query ( "select count (*) from products where parentId = $ id"); $ Row = mysql_fetch_array ($ rs); return $ row [0]> 0 true:? false; }