TreeTable は、セルの行と列を結合することで無限のレベルを実現し、階層構造をより適切に表示できます。
1. ID/PID/NAME の配列を構築し、後でデータベースによって生成された動的データを使用します。ツリー アルゴリズムの場合、
をクリックしてコード をコピーしてください。コードは次のとおりです。
array(
* 1) => array('id '=>1','parentid'=>0,'name'=>'第 1 レベルの列 1'),
* 2 => '=>'2', 'parentid'=>0,'name'=>'第 1 レベルの列 2')、
* 3 => array('id'=>3' ,'parentid'=>1, 'name'=>'第 2 レベルの列 1'),
* 4 => array('id'=>4','parentid'=> 1,'name'=>'2 レベルの列 2'),
* 5 => array('id'=>5','parentid'=>2,'name'=> '第 2 レベルの列 3'),
* 6 => array('id'=>'6','parentid'=>3,'name'=>'第 3 レベルの列 1') ,
* 7 => array( 'id'=>7','parentid'=>3,'name'=>'第 3 レベルの列 2')
* )
2. TreeTable クラスライブラリをインポートします。
コードをコピーします コードは次のとおりです。
import('@.ORG.Util.TableTree'); // Thinkphp インポート メソッド
3. TreeTable HTML コードを生成します
コードをコピーします コードは次のとおりです:
$treeTable->init($treearr);
echo $treeTable->get_treetable();
注: get_treetable() はテーブル本体部分のみを生成します。 ;TALBE> 独自に作成してください。
完全なコード
コードをコピー コードは次のとおりです:
/**
* ファイル名: TreeTable.class.php
* 作成者: run.gao 312854458@qq.com 日付: 2012-07-24 23:22 GMT 8
* 説明: ユニバーサル テーブルの無制限の分類
**/
/**
* テーブル表示無制限分類は、ワイヤレス分類をテーブル形式で表示することで、分類の所属をよりよく反映できます
* 使用方法:
* 1. 分類をインスタンス化します
* $ treeTable = new TreeTable();
* 2. 分類を初期化します。$treearr は多次元配列であり、id、parentid、name フィールドが含まれている必要があります
* $treeTable->init($treearr); >* 3. 無制限の分類 HTML コードを取得します
* echo $treeTable->get_treetable();
**/
class TreeTable {
/**
* ツリー構造の生成に必要な 2 次元配列
* @var array
*/
public $arr = array();
/**
* テーブルの列数
* @var int
*/
public $columns = 0;
/**
* テーブルの行数
* @var int
*/
public $rows = 0;
/**
* TreeTable データを初期化します
* @param array 2 次元配列
* array(
* 1 => array('id'=>'1','parentid'=> 0 ,'name'=>'第 1 レベル列 1'),
* 2 => array('id'=>'2','parentid'=>0,'name'=> ;' 第 1 レベルの列 2'),
* 3 => array('id'=>'3','parentid'=>1,'name'=>'第 2 レベルの列 1 '),
* 4 => array('id'=>4','parentid'=>1,'name'=>'第 2 レベル列 2'),
* 5 => 配列 ('id'=>'5','parentid'=>2,'name'=>'第 2 レベルの列 3')、
* 6 => id'=>' 6','parentid'=>3,'name'=>'第 3 レベル列 1')、
* 7 => array('id'=> ','parentid'=> ;3,'name'=>'第 3 レベルの列 2')
* )
*/
public function init($arr=array()){
if(!is_array($arr)) return false;
foreach ($arr as $) k=>$v) {
$this->arr[$v['id']] = $v;
}
foreach ($this->arr as $k => ; $v){
$this->arr[$k]['column'] = $this->get_level($v['id']); // Y 軸の位置
$ this ->arr[$k]['arrchildid'] = $this->get_arrchildid($v['id']); // すべての子ノード
$this->arr[$k][ ' arrparentid'] = $this->get_arrparentid($v['id']); // すべての親ノード
$this->arr[$k]['child_bottom_num'] = $this->; get_child_count ($v['id']); // すべての基礎となる要素ノード
}
$this->columns = $this->get_columns(); // 行の総数
$ this-> ;rows = $this->get_rows(); // 列の総数
// arrparentid と ID 番号で並べ替えます
$this->sort_arr(); this->arr as $k => $v){
$this->arr[$k]['row'] = $this->get_row_location($v['id']); // X 軸の位置
$this->arr[$k]['rowspan'] = $v['child_bottom_num'] // 行マージの数
$this->arr[$k]; ]['colspan '] = $v['child_bottom_num'] == 0 ? $this->columns - $v['column'] 1 : 0; //結合された列の数
}
return $this->get_tree_arr();
}
/**
* 配列を取得
**/
public function get_tree_arr(){
return is_array($this->arr) ? >arr : false ;
}
/**
* arrparentid/id 番号で配列を並べ替えます
**/
public function sort_arr(){
// 並べ替えるフィールド
foreach ($this-> arr as $k = > $v){
$order_pid_arr[$k] = $v['arrparentid']
$order_iscost[] = $v['sort']; [$k] = $v['id'];
}
// まず arrparentid で並べ替え、次に ID 番号で並べ替えます
array_multisort(
$order_pid_arr, SORT_ASC, SORT_STRING,
$order_iscost, SORT_DESC, SORT_NUMERIC,
$order_id_arr, SORT_ASC, SORT_NUMERIC,
$this->arr)
// 各ノード レベルを取得します
for ($column = 1; $column <) ;= $this->columns; $column ) {
$row_level = 0;
foreach ($this->arr as $key => $node){
if ($node[ 'column '] == $column){
$row_level ;
$this->arr[$key]['column_level'] = $row_level;
}
//ID をキー名として再計算します
foreach ($this->arr as $k=>$v) {
$arr[$v['id']] = $v;
}
$this->arr = $arr;
}
/**
* 親配列を取得
* @param int
* @return array
*/
public function get_parent($myid){
$newarr = 配列( );
if(!isset($this->arr[$myid])) return false; > $pid = $this->arr[$pid]['parentid'];
if(is_array($this->arr)){
foreach($this->arr as $id) = > $a){
if($a['parentid'] == $pid) $newarr[$id] = $a>}
}
return $newarr; 🎜 >}
/**
* 子配列を取得します
* @param int
* @return array
*/
public function get_child($myid){
$a = $newarr = array();
if(is_array($this-> arr )){
foreach($this->arr as $id => $a){
if($a['parentid'] == $myid) $newarr[$id] = $ ;
}
}
$newarr : false;
/**
* 現在のノードのレベルを取得します
* @param $myid 現在のノード ID 番号
**/
public function get_level($myid, $init = true){
static $level = 1;
if($init) $level = 1;
if ($this->arr[$myid]['parentid']) {
$level ;
$this->get_level($this->gt;arr[$myid]['parentid'], false);
}
$level を返します。
}
/**
* 現在のノードのすべての基になるノード (子ノードのないノード) の数を取得します
* @param $myid ノード ID 番号
* @param $init 静的変数が初めてロードされます
**/
public function get_child_count($myid, $init = true){
static $count = 0;
if($init) $count = 0;
if(!$this->get_child($myid) && $init) return 0;
if($childarr = $this->get_child($myid)){
foreach ($childarr as $v){
$this->get_child_count($v['id'],間違い);
}
}else{
$count ;
}
$count を返します。
}
/**
* ノードのすべての子ノードの ID 番号を取得します
* @param $catid ノード ID 番号
* @param $init 最初のロードでシチュエーションが静的に初期化されます
**/
public function get_arrchildid($myid, $init = true) {
static $childid;
if($init) $childid = '';
if(!is_array($this->arr)) は false を返します。
foreach($this->arr as $id => $a){
if($a['parentid'] == $myid) {
$childid = $childid ? $childid.','.$a['id'] : $a['id'];
$this->get_arrchildid($a['id'], false);
}
}
$childid を返す ;
}
/**
* このノードのすべての親ノードの ID 番号を取得します
* @param $id ノード ID 番号
**/
public function get_arrparentid($id, $arrparentid = '') {
if(!is_array($this->arr)) return false ;
$parentid = $this->arr[$id]['parentid'];
if($parentid > 0) $arrparentid = $arrparentid ? $parentid.','.$arrparentid : $parentid;
if($parentid) $arrparentid = $this->get_arrparentid($parentid, $arrparentid);
$arrparentid を返す;
}
/**
* ノードの行位置を取得します
* @param $myid ノード ID 番号
*/
public function get_row_location($myid){
$nodearr = $this->arr;
// 获取一节点が存在する行の位置
foreach ($nodearr as $key => $node){
if($myid == $node['id']) {
$node_row_count = 0;
$arrparentid =explode(',', $node['arrparentid']);
// すべての父节点が現在の节点層次の最下層节点より小さい元素
foreach ($arrparentid as $pid){
foreach ($nodearr as $node_row){
if($node_row ['column'] == $nodearr[$pid]['column'] && $nodearr[$pid]['column_level'] > $node_row['column_level'] && $node_row['child_bottom_num'] == 0 ){
$node_row_count ;
}
}
}
// すべての現在の节点および节点层次(rowid_level)は現在の节点层次の数より小さい
foreach ($nodearr as $node_row){
if( $node['column'] == $node_row['column'] && $node_row['column_level'] $node_row_count = $node_row['child_bottom_num'] ? $node_row['child_bottom_num'] : 1;
}
}
$node_row_count ;
休憩;
}
}
return $node_row_count;
}
/**
* テーブル内の行数を取得します
**/
パブリック関数 get_rows(){
$row = 0;
foreach ($this->arr as $key => $node){
if($node['child_bottom_num'] == 0){
$rows ; // 行数
}
}
return $rows;
}
/**
* テーブル内の列の数を取得します
**/
パブリック関数 get_columns(){
$columns = 0 ;
foreach ($this->arr as $key =>$node){
if($node['column'] > $columns){
$columns = $node['column ']; // 总列数
}
}
return $columns;
}
/**
* カテゴリのテーブル表示形式を取得(ヘッダーを除く)
**/
パブリック関数 get_treetable(){
$table_string = '';
for($row = 1; $row rows; $row ){
$table_string .= "rt
foreach ($this->arr as $v){
if($v['row'] == $row){
$rowspan = $v['rowspan'] ? "rowspan='{$v['rowspan']}'" : '';
$colspan = $v['colspan'] ? "colspan='{$v['colspan']}'" : '';
$table_string .= "rtt
{$v['name']}
}
}
$table_string .= "rt
}
$table_string を返します。
}
}
?>

如何使用JavaScript实现表格列宽拖拽调整功能?随着Web技术的发展,越来越多的数据以表格的形式展示在网页上。然而,有时候表格的列宽并不能满足我们的需求,可能会出现内容溢出或者宽度不足的情况。为了解决这个问题,我们可以使用JavaScript实现表格的列宽拖拽调整功能,使用户可以根据需求自由调整列宽。实现表格列宽拖拽调整功能,需要以下三个主

在css中,可以使用border-collapse属性来去掉表格中重复的边框,该属性可以设置表格边框是折叠为单一边框还是分开的,只需要将值设置为collapse即可把重叠的边框合并在一起,成为一个边框,实现单线边框的效果。

表格有一条虚线外打印不到的解决办法:1、打开excel文件,在打开的页面中点击“打印”;2、在预览页找到“无缩放”,选择调整为一页;3、选择打印机打印文档即可。

Vue中如何实现表格数据的导出和导入,需要具体代码示例在使用Vue开发的Web项目中,经常会遇到需要将表格数据导出为Excel或导入Excel文件的需求。本文将介绍如何使用Vue来实现表格数据的导出和导入功能,并提供具体的代码示例。一、表格数据的导出安装依赖首先,我们需要安装一些依赖,用于导出Excel文件。在Vue项目中的命令行中运行以下命令:npmin

使用JavaScript实现表格筛选功能随着互联网技术的不断发展,表格成为了网页中常见的展示数据的方式。然而,当数据量庞大时,用户往往会面临找到特定数据的困难。因此,为表格添加筛选功能,让用户可以快速找到所需的数据,成为了很多网页设计的需求。本文将介绍如何使用JavaScript实现表格筛选功能。首先,我们需要有一份表格数据。下面是一个简单的例子:<t

如何使用JavaScript实现表格分页功能?随着互联网的发展,越来越多的网站都会使用表格来展示数据。在一些数据量较大的情况下,需要将数据进行分页展示,以提升用户体验。本文将介绍如何使用JavaScript实现表格分页功能,并提供具体的代码示例。一、HTML结构首先,我们需要准备一个HTML结构来承载表格和分页按钮。我们可以使用<tab

随着数据的不断增长,表格显示变得更加困难。大多数情况下,表格中的数据量过大,导致表格在加载时变得缓慢,而且用户需要不断地浏览页面才能找到自己想要的数据。本文将介绍如何使用JavaScript实现表格数据的分页显示,让用户更容易找到自己想要的数据。一、动态创建表格为了使分页功能更加可控,需要动态创建表格。在HTML页面中,添加一个类似于下面的table元素。

用于呈现数据的最常见的用户界面元素之一是表格。事实证明,使用表格时需要控制很多方面,例如:定义列和标题各种单元格格式(文本、数字、复选框)调整大小过滤动态成长样式在这个由两部分组成的系列中,您将了解使用ReactBootstrapTable组件在React中处理表格数据的细节。您将能够轻松创建复杂且具有专业外观的表格,并且能够自定义各个方面。开始使用 首先,您应该熟悉React本身。如果您需要React入门知识,EnvatoTuts+有一个很棒的系列可以帮助您开始使用React。在本教程中,我们


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SublimeText3 中国語版
中国語版、とても使いやすい

Dreamweaver Mac版
ビジュアル Web 開発ツール

EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

ホットトピック



