Một plugin jQuery miễn phí với chế độ xem web của plugin treeview hiển thị với chế độ xem dạng cây động dưới dạng có thể kiểm tra, có thể lọc, có thể thu gọn, từ lược đồ JSON. Chế độ xem dạng cây Bootstrap Hiển thị cấu trúc cây phân cấp theo chiều dọc đồng thời tận dụng những gì tốt nhất mà Bootstrap cung cấp

Được cấp phép theo Giấy phép Apache, Phiên bản 2. 0

Chế độ xem cây Bootstrap 3 thuần túy với jQuery. Nhấp chuột

Cách sử dụng

Thêm với thư viện jQuery với cây Bootstrap và biểu định kiểu của Twitter Bootstrap được tải trong Html

Tạo phần tử giữ chỗ cho chế độ xem dạng cây

Cấu trúc JSON cần thiết để chứa dữ liệu phân cấp của bạn

var myTree = [
    {
      text: "Item 1",
      nodes: [
        {
          text: "Item 1-1",
          nodes: [
            {
              text: "Item 1-1-1"
            },
            {
              text: "Item 1-1-2"
            }
          ]
        },
        {
          text: "Item 1-2"
        }
      ]
    },
    {
      text: "Item 2"
    },
    {
      text: "Item 3"
    }
    ...
];

Hiển thị chế độ xem dạng cây mặc định bên trong bộ chứa DIV mà bạn vừa tạo

$('#default-tree').treeview({
  data: myTree
});

Xong

Thanks for make jQuery plugin được phát triển bởi Để hữu ích hơn cho người dùng, vui lòng kiểm tra trang demo hoặc truy cập trang web chính thức

Trong bài viết này, chúng ta sẽ tìm hiểu quy trình từng bước để tìm nạp menu treeview và menu con từ cơ sở dữ liệu bằng MVC và Entity Framework. Ngoài ra, chúng ta có thể tìm hiểu cách thiết lập mối quan hệ menu và menu con giữa các cột trong bảng

Trước khi xem qua phần này, vui lòng xem các bài viết trước của tôi liên quan đến MVC và Entity Framework

Trong bài đăng này, chúng tôi sẽ cung cấp cho bạn thông tin về PHP Codeigniter 3 – Tạo Dynamic Tree View bằng Bootstrap Treeview JS. Nghe này, chúng tôi sẽ cung cấp cho bạn chi tiết về PHP Codeigniter 3 – Tạo Chế độ xem dạng cây động bằng Bootstrap Treeview JS Và cách sử dụng nó cũng cung cấp cho bạn bản demo cho nó nếu cần thiết

Hôm nay mình sẽ chia sẻ với các bạn cách tạo node treeview động từ cơ sở dữ liệu mysql trong codeigniter 3. Trong hướng dẫn này, chúng ta sẽ từng bước xây dựng cấu trúc cây động bằng cách sử dụng bootstrap treeview js trong codeigniter 3

Chúng tôi có thể yêu cầu tạo cấu trúc cây động cho cây danh mục, v.v. trong ứng dụng của mình. Vì vậy, nếu bạn đang làm việc trên framework codeigniter thì bạn có thể tìm hiểu nhanh cách bạn có thể xây dựng ví dụ về treeview động

Trong ví dụ này, chúng ta sẽ tạo bảng “item” với cột ‘id’, ‘name’ và ‘parent_id’, Sau đó, chúng ta sẽ tạo route codeigniter. Sau đó, chúng tôi sẽ tạo bộ điều khiển ‘ItemController’ và các mục mới. tập tin lưỡi php. Vì vậy, chỉ cần làm theo vài bước và bạn sẽ nhận được kết quả như ảnh chụp màn hình bên dưới

Xem trước

Bước 1. Tạo bảng mục

Ở bước đầu tiên, chúng ta sẽ tạo bảng mới “item” trong cơ sở dữ liệu. Bạn có thể sử dụng Truy vấn SQL sau để tạo bảng "mục". Vì vậy, hãy tạo bằng cách sử dụng truy vấn sql dưới đây

bảng mục

CREATE TABLE IF NOT EXISTS 'item' (
  'id' int(11) NOT NULL AUTO_INCREMENT,
  'name' varchar(255) NOT NULL,
  'parent_id' int(11) NOT NULL DEFAULT '0',
  PRIMARY KEY ('id')
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2

Sau khi tạo bảng, bạn phải thêm một số bản ghi giả

Bước 2. Tạo tuyến đường

Ở đây, chúng tôi sẽ thêm các tuyến mới cho chế độ xem và phương thức ajax. vì vậy các tuyến đường mở. php và thêm mã như dưới đây

ứng dụng/cấu hình/tuyến. php

$route['item'] = "ItemController";
$route['getItem'] = "ItemController/getItem";

Xem thêm. Codeigniter 3 – select2 ajax tự động hoàn thành từ ví dụ về cơ sở dữ liệu với bản trình diễn

Bước 3. Tạo bộ điều khiển ItemController

bây giờ, chúng ta phải tạo bộ điều khiển “ItemController” với index(), membersTree() và getItem(). vì vậy hãy tạo ItemController. php trong ứng dụng/bộ điều khiển đường dẫn này và đặt mã dưới đây vào tệp này

ứng dụng/bộ điều khiển/ItemController. php

defined('BASEPATH') OR exit('No direct script access allowed');
 
class ItemController extends CI_Controller {
  
    /**



     * Get All Data from this method.
     *
     * @return Response
    */
    public function __construct() {
       parent::__construct();
       $this->load->database();
    }
  
    /**
     * Get All Data from this method.
     *
     * @return Response
    */
    public function index()
    {
        $this->load->view('items');
    }
   
    /**
     * Get All Data from this method.
     *
     * @return Response
    */
    public function getItem()
    {
          $data = [];
          $parent_key = '0';
          $row = $this->db->query('SELECT id, name from item');
            
          if($row->num_rows() > 0)
          {
              $data = $this->membersTree($parent_key);
          }else{
              $data=["id"=>"0","name"=>"No Members presnt in list","text"=>"No Members is presnt in list","nodes"=>[]];
          }
   
          echo json_encode(array_values($data));
    }
   



 /**
 * Get All Data from this method.
 *
 * @return Response
 */
 public function membersTree($parent_key)
 {
 $row1 = [];
 $row = $this->db->query('SELECT id, name from item WHERE parent_id="'.$parent_key.'"')->result_array();

 foreach($row as $key => $value)
 {
 $id = $value['id'];
 $row1[$key]['id'] = $value['id'];
 $row1[$key]['name'] = $value['name'];
 $row1[$key]['text'] = $value['name'];
 $row1[$key]['nodes'] = array_values($this->membersTree($value['id']));
 }

 return $row1;
 }

}

Bước 4. Tạo Xem tập tin

Trong bước này, chúng tôi sẽ tạo các mục. php xem tập tin. Trong tệp này, chúng tôi sẽ viết mã cho chế độ xem dạng cây động. Vì vậy, hãy cập nhật tập tin sau

ứng dụng/lượt xem/mục. php

Xem thêm. Ví dụ về xác thực biểu mẫu Google Recaptcha của PHP Codeigniter 3

  
  
  
  
  


  

  




 

 
PHP Codeigniter 3 - Create Dynamic Treeview Example - ItSolutionStuff.com
 
 

 

 
 
 

Bây giờ, nó đã hoàn tất, bạn có thể chạy và kiểm tra xem nó hoạt động như thế nào

Tôi hy vọng nó có thể giúp bạn…

Hy vọng mã và bài đăng này sẽ giúp bạn triển khai PHP Codeigniter 3 – Tạo Dynamic Tree View bằng Bootstrap Treeview JS. nếu bạn cần bất kỳ trợ giúp hoặc bất kỳ phản hồi nào, hãy đưa ra trong phần bình luận hoặc bạn có ý tưởng hay về bài đăng này, bạn có thể đưa ra phần bình luận. Nhận xét của bạn sẽ giúp chúng tôi giúp bạn nhiều hơn và cải thiện chúng tôi. chúng tôi cũng sẽ cung cấp cho bạn loại bài đăng thú vị hơn này trong phần nổi bật,