treeTable子节点数据分页显示

       最近在做政府的项目,页面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的分页,之后可以根据自己喜好,修改分页的样式。

你可能感兴趣的:(jquery,异步加载,treeTable)