扩展表格按树状显示

先看显示效果

 
具体修改方法：
 
第一步：在table的Builder.php里面增加一个方法 setTreeMode

/**

     * 设置树状表格，此模式建议设置为无分页模式

     * @param string $key    唯一标识字段

     * @param string $pkey   父结点字段

     * @param int    $pos    可控制列位置，默认为0，即第一列

     * @param int    $expand 默认展开层级，默认为1

     */

    public function setTreeMode($key = "id", $pkey = "pid", $pos = 0, $expand = 1)

    {

        if (!empty($key) && !empty($pkey)) {

            $this->_vars['tree_mode'] = [

                'key' => $key,

                'pkey' => $pkey,

                'pos' => $pos,

                'expand' => $expand,

            ];

        }

        return $this;

    }

第二步：修改table的layout.html
 
找到 tbody元素，加入属性

<tbody{present name='tree_mode'} id="tree_table" expand="{$tree_mode.expand|default=1}" pos="{$tree_mode.pos|default=0}"{/present}</tbody>

在tbody的循环体的tr里面，加入属性

<tr class="{$row['_tr_class']|default=''}"{present name='tree_mode'} id="{$row[$tree_mode['key']]}" pid="{$row[$tree_mode['pkey']]}"{/present}></tr>

第三步：下载附件 treeTable.zip，解压后放至 __LIBS__ 目录，并利用dolphinPHP引入css和js的方法，将相应的JS和CSS文件引入，即可

第四步：加入树特效的执行代码，可以放到layout.html，也可以引入自定义的js文件

$('#tree_table').treeTable({

    expandLevel:$('#tree_table').attr("expand"),

    column:$('#tree_table').attr("pos")

});

 
第五步：在控制器输出表格之前调用 setTreeMode 方法

return ZBuilder::make('table')

    ....

    ->setTreeMode("id", "pid", 1, 99)

    ->noPages() //建议使用无分页模式，取数据的时候，一次性将数据取出来

    ->fetch();

    

记↓得↓不↓要↓忘↓了↓下↓载↓附↓件！
 

• treeTable.zip