Dynamic Category Loading with Layui and ThinkPHP 5.1
This tutorial demonstrates how to integrate Layui with ThinkPHP 5.1 to dynamically load hierarchical city category data, covering HTML setup, JavaScript tree rendering, PHP backend data retrieval, and a recursive method for obtaining parent IDs, enabling interactive navigation of multi‑level locations.
When integrating Layui with ThinkPHP 5.1, you may need to dynamically load category data for hierarchical city listings.
First, create an HTML page that includes the Layui CSS/JS files, jQuery, and a placeholder <div id="test12"></div> for the tree component. Adjust the ___ADMIN__ path to your own assets.
Then, write JavaScript that uses Layui's tree.render to fetch data via $.get('{:url("getCategoryList")}') , parse the JSON, and render the tree with optional click handling.
On the backend, implement getCategoryList() in a controller to query the AreaModel for provinces, cities, and districts, building a nested array with fields such as title , id , href , checked , and spread . The method also calls getAllParentId() to mark parent nodes.
The helper getAllParentId($id) recursively collects all ancestor IDs by traversing the area table, returning an array of parent IDs used to set the appropriate tree node states.
Finally, test the page; the tree will display hierarchical city information and allow navigation to the corresponding article pages.
php中文网 Courses
php中文网's platform for the latest courses and technical articles, helping PHP learners advance quickly.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.