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的分页，之后可以根据自己喜好，修改分页的样式。