浅谈bootstrapTable+jstree插件对树列表条件和查询条件的处理-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

本篇文章给大家介绍一下Bootstrap中使用bootstrapTable表格插件和jstree树形列表插件时，对树列表条件和查询条件的处理方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

在我Boostrap框架中，很多地方需要使用bootstrapTable表格插件和jstree树形列表插件来共同构建一个比较常见的查询界面，bootstrapTable表格插件主要用来实现数据的分页和表格展示，而jstree树形列表插件则是用来展示树形列表，以便快速分类查询的，在很多场合下结合它们两者，可以实现较好的用户体验效果。

本篇随笔介绍在Bootstrap开发框架中使用bootstrapTable表格插件和jstree树形列表插件时候，对树列表条件和查询条件的处理，是指在快速展示数据的时候，分页条件信息也能够通过更新。【相关推荐：《bootstrap教程》】

1、bootstrapTable表格插件和jstree树形列表插件的使用

bootstrapTable表格插件和jstree树形列表插件结合起来展示数据的界面也是经常看到的，如下所示。

以及在选择用户信息页面的时候，也需要根据条件进行筛选用户。

从界面的展示来看，结合两者确实可以带来很多便利，不过使用的时候，需要特别注意相关属性的处理，否则分页就会显示全部的记录了。

默认分页查询的代码如下所示。

默认属性列表的绑定操作代码如下所示。

//绑定左侧树形列表
        //如果update为True，则重新更新缓存
        function initJsTree(update) {
            var baseUrl = "/Apply/GetMyApplyJson?r=" + Math.random();
            var url = update ? baseUrl + "&update=true" : baseUrl;
            bindJsTree("jstree_div", url);
 
            //树控件的变化事件处理
            $('#jstree_div').on("changed.jstree", function (e, data) {
                var icon = data.node.icon;
                loadData(data.selected);
            });
        }