最近在做政府的项目,页面UI较为官方,这里用到一个treeTable显示某些数据,这些数据是用windows服务按计划执行的,也就是说每天数据都会增加,那么当时间长了以后,treeTable子节点下的数据会非常多,显示在页面上将会很难看,所以需要把每个节点下的数据进行分页。
使用过treeTable的想必都知道beforeExpand和OnSelect两个事件,具体含义请百度。这里使用异步加载的方式,即在beforeExpand事件中调用后台方法返回json数据。那么这里要实现分页的关键就是如何将分页的html加到json数据结果中,并且要使得每一组json数据的分页响应自己的换页事件。分页的做法有很多,控件也有很多,无论是如何生成和绑定的分页控件,归根结底还是js的处理,那么我们将分页简单写成html代码,例如
<tr pid='id'> <td> <a onclick="GetJson(id,pageIndex)" href="javascript:void(0)">上一页</a> <a onclick="GetJson(id,pageIndex)" href="javascript:void(0)">下一页</a> </td> <tr>
简单来说,这里需要在用代码生成的html中直接写好分页a标签的onclick事件,注意到这里有两个参数,这个函数的功能先放一下,先说一下treeTable的布局。
起初的做法是用treeTable的addChild方法将json数据添加到treeTable中,但是之后在处理分页的时候发现有些问题不好解决,这里说一下另一种解决方法。
<table> @foreach(var item in list) { <tr id="@item.Id" haschild="true"> <td></td> <td>标题</td> </tr> <tbody id="tbody_"+item.Id></tbody> } </table>这里循环了一个list用于显示每一条数据,用Id来区分每一条数据,这个一定要是唯一的,然后再这一行下面添加一个tbody,id同样用item的Id来区分。到这里就显而易见了,我们需要根据点击的节点,调用后台方法返回html然后使用$("#tbody_"+id).html(data)即可,在beforeExpand事件中添加
beforeExpand事件: function($treeTable,id){ GetJson(id,1); } script方法: var GetJson=function(id,pageIndex){ $.post(url,{id:id,pageIndex:pageIndex},function(data){ $("#tbody_"+id).html(data); $("#tbody_"+id).show(); } }我们在处理分页的html中添加的onclick事件便是调用这里方法,第一个参数传递行的Id,第二个参数传递需要跳转到的页码,然后再后台读取数据的方法中可以根据这两个参数筛选出数据。注意到这里添加了一个show()方法,是为了和节点的收起想对应的。
由于我们添加了tbody,没有使用addChild来添加子节点,所以破坏了treeTable的结构,那么他在收起的时候无法自动帮我们收起下面对应的tbody,需要我们手动去处理。这里使用的treeTable的节点机制是这样的,一个节点包含有两个Class,一个通用的vsStyle_active_node和一个vsStyle_shut,第二个Class为节点未展开时,当节点展开后会将这个Class Remove掉然后添加一个vsStyle_hover_open,那么我们需要处理节点收起的方法时只需要处理vsStyle_hover_open的事件,注意这里不能直接写$(".vsStyle_hover_open").click的方法,无论放在外部或者是放在beforeExpand事件中,因为当页面第一次加载节点数据时,所有节点的Class都是shut的,所以之后点击vsStyle_hover_open的事件是无法响应的,所以这里在外部添加如下的点击方法
$(".vsStyle_active_node").unbind("click").click(function () { if ($(this).hasClass("vsStyle_hover_open")) { $("#div_" + $(this).parent().parent().attr("id")).hide(); } });这里Class中的hover是当鼠标移在节点上的Class,如果未移动在节点上,那么Class名称为vsStyle_open,因为我们点击收起时鼠标必然在节点上所以这里有hover。
相关推荐
treetable的动态获取子节点,展开前触发ajax从数据库获取数据,拼接成json传给前台,实现动态加载无限极子节点
layui treegrid树形显示加分页,教程: https://blog.csdn.net/po2600/article/details/103819801
Jquery的treeTable实现树型结构显示数据,里面有官方Demo以及我写的一个Demo便于理解,希望对你们有所帮助
这是js实现的treeTable插件,是从jeesite中剥离出来的,通过里面的jsp页面以及Demo可以知道如何使用
采用了layui treetable框架,实现树形目录。内容有页面、后台和js。
今天小编就为大家分享一篇layui-tree实现Ajax异步请求后动态添加节点的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
Layui、treeTable、树形表格、无限层级
原创:点击节点数据,动态获取下级菜单数据
java 的treetable好东西。
主要为大家详细介绍了layui实现数据表格table分页功能、异步加载,表格渲染,含条件查询,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Jquery TreeTable及示例,仿zTree绑定数据方式,亲测能用
Jquery的treeTable实现树型结构显示数据,里面有官方Demo以及我剥离出来的一个Demo便于理解
layui-treetable 兼容layui,带复选框,树形列表,以及在树形列表添加操作按钮
jQuery treeTable 插件的功能跟 JQTreeTable 类似,是在一个表格内显示树状结果
看网上有几种tree table的实现,都是先把表格或数据填好,然后再对表格进行处理,但是很少有需求是这样,实际应用中,数据可能就是JSON对象,这个JSON对象有自己的结构。用户需要把这个JSON用TreeTable的形式展现...
JQuery Treetable,可以动态加载数据,在客户端生成treetable
jq实现的一个树表,原本也是下载别人的,但还原本载入以后所有节点是展开的,还有打开一个节点以后所有子节点就全部打开了,本人修改了一下程序默认全部节点是合着的,打开节点也不会自动打开子节点,但是合上以后子...
JQuery TreeTable 具体参考
, limit: Number.MAX_VALUE // 数据表格默认全部显示 , cols: [[ {field: 'id', title: '序号', width: 60, style: 'font-size: 12px; color: #666'}, {field: 'modelNum', title: '任务编号', style: 'font-...
比较完整的制作树,带介绍和实例