在我Boostrap框架中，很多地方需要使用bootstrapTable表格插件和jstree树形列表插件来共同构建一个比较常见的查询界面，bootstrapTable表格插件主要用来实现数据的分页和表格展示，而jstree树形列表插件则是用来展示树形列表，以便快速分类查询的，在很多场合下结合它们两者，可以实现较好的用户体验效果。本篇随笔介绍在Bootstrap开发框架中使用bootstrapTable表格插件和jstree树形列表插件时候，对树列表条件和查询条件的处理，是指在快速展示数据的时候，分页条件信息也能够通过更新。
1、bootstrapTable表格插件和jstree树形列表插件的使用
关于Boostrap table表格插件的使用，我在随笔《》和《》都有介绍，可谓居家旅行必备良药。
bootstrapTable表格插件和jstree树形列表插件结合起来展示数据的界面也是经常看到的，如下所示。
从界面的展示来看，结合两者确实可以带来很多便利，不过使用的时候，需要特别注意相关属性的处理，否则分页就会显示全部的记录了。
baseUrl = "/Apply/GetMyApplyJson?r=" + url = update ? baseUrl + "&update=true""jstree_div"
</span><span style="color: #008000;">//</span><span style="color: #008000;">树控件的变化事件处理</span>
$('#jstree_div').on("changed.jstree",<span style="color: #0000ff;">function</span><span style="color: #000000;"> (e,data) {
</span><span style="color: #0000ff;">var</span> icon =<span style="color: #000000;"> data.node.icon;
loadData(data.selected);
});
}</span></pre>
默认情况下，通过树形列表触发的条件，或根据条件进行重新更新分页查询控件，如下所示。
clickId = "" condition = { CustomedCondition: id + ''
</span><span style="color: #008000;">//</span><span style="color: #008000;"><a href="https://www.jb51.cc/tag/xiugai/" target="_blank" class="keywords">修改</a>条件后需要重新刷新</span>
$table.bootstrapTable('refresh',{ url: queryUrl,query: condition,pageNumber:1<span style="color: #000000;">});
clickId </span>=<span style="color: #000000;"> id;
}</span></pre>
不过如果仅仅是这样的处理，那么数据分页的时候，单击下一页则会没有记录刚才的树形列表条件，那么我们需要记录这个选择的树形条件，从而在更新条件的时候加入所需的条件，那么修改上面代码为以下代码。
<div class="cnblogs_code">
clickId = "" where = {};
condition = { CustomedCondition: id + ''自定义条件
<span style="color: #008000;">//</span><span style="color: #008000;"><a href="https://www.jb51.cc/tag/xiugai/" target="_blank" class="keywords">修改</a>条件后需要重新刷新</span>
$table.bootstrapTable('refresh',pageNumber:1<span style="color: #000000;">});
clickId </span>=<span style="color: #000000;"> id;
}</span></pre>
