扩展表格按树状显示
先看显示效果
具体修改方法:
第一步:在table的Builder.php里面增加一个方法 setTreeMode
找到 tbody元素,加入属性
第三步:下载附件 treeTable.zip,解压后放至 __LIBS__ 目录,并利用dolphinPHP引入css和js的方法,将相应的JS和CSS文件引入,即可
第四步:加入树特效的执行代码,可以放到layout.html,也可以引入自定义的js文件
第五步:在控制器输出表格之前调用 setTreeMode 方法
记↓得↓不↓要↓忘↓了↓下↓载↓附↓件!
具体修改方法:
第一步:在table的Builder.php里面增加一个方法 setTreeMode
/**第二步:修改table的layout.html
* 设置树状表格,此模式建议设置为无分页模式
* @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;
}
找到 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();
记↓得↓不↓要↓忘↓了↓下↓载↓附↓件!