博主信息
imooc冰雨的博客
博文
1
粉丝
2
评论
6
访问量
4256
积分:0
P豆:72

layui中的table与treetable的结合使用分享

2018年03月26日 09:03:28阅读数:4272博客 / imooc冰雨的博客 / Layui

今天跟大家分享一款layui与treetable结合使用的树状表格

直接上代码:

HTML部分:

<table class="treetable layui-table" id='treeTable'>
	<thead>
		<tr><th>名称</th><th>URL</th><th>层级</th><th>是否显示</th><th width="170">管理操作</th></tr>
	</thead>
	<tbody>
	<volist name="list" id="v">
	<tr data-tt-id="{$v.id}" data-tt-parent-id="{$v.pid}">
		<td width="200">{$v.title}</td>
		<td>{$v.name}</td>
		<td>{$v.level}</td>
		<td>{$v.nav}</td>
		<td>
			<a href="#" title="" class="layui-btn layui-btn layui-btn-xs">添加子菜单</a>			
			<a href="#" title="" class="layui-btn layui-btn-normal layui-btn-xs">编辑</a>
			<a href="#" title="" class="layui-btn layui-btn-danger layui-btn-xs">删除</a>
		</td>
	</tr>
	</volist>			
	</tbody>
	</table>


JS部分:

<script type="text/javascript" src="/Public/js/jquery.js"></script>
<script type="text/javascript" src="/Public/jquery-treetable/jquery.treetable.js"></script>
<script type="text/javascript">
	$(function(){
		$('#treeTable').treetable({expandable: true,
          	    initialState: "expanded"
      		});
	});
</script>


效果图:

图片1.png


图片2.png

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
未知
  • 未知· 2018-10-11 12:47:356楼
  • 回复
  • 未知
  • 未知· 2018-10-11 12:28:065楼
  • 可以整一下源码吗 谢谢

  • 回复
  • Sue
  • Sue· 2018-08-19 00:31:374楼
  • 能否指点一二

  • 回复
  • imooc冰雨
  • imooc冰雨· 2018-05-27 23:07:083楼
  • {$}是thinkphp中试图的标签

  • 回复
  • 梦
  • · 2018-03-28 17:53:562楼
  • {$}这是个什么符号?

  • 回复
  • 梦
  • · 2018-03-28 17:48:221楼
  • expandable: true, initialState: &amp;quot;expanded&amp;quot;能解释一下这两个参数的含义么?

  • 回复