A brief discussion on how to handle tree list conditions and query conditions in Bootstrap

This article will introduce to you how to handle tree list conditions and query conditions when using the bootstrapTable table plug-in and jstree tree list plug-in in the Bootstrap development framework. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

In the Boosttrap framework, bootstrapTable table plug-in and jstree tree list plug-in are needed to jointly build a common query interface in many places. The bootstrapTable table plug-in is mainly used to implement Data paging and table display, while the jstree tree list plug-in is used to display tree lists for quick classification and query. Combining the two on many occasions can achieve a better user experience. [Related recommendations: "bootstrap Tutorial"]

This essay introduces the tree list conditions and query conditions when using the bootstrapTable table plug-in and jstree tree list plug-in in the Bootstrap development framework. Processing means that when displaying data quickly, the paging condition information can also be updated.

1. The use of bootstrapTable table plug-in and jstree tree list plug-in

The interface that combines bootstrapTable table plug-in and jstree tree list plug-in to display data is also often seen. , as shown below.

And when selecting the user information page, users also need to be filtered based on conditions.

Judging from the interface display, combining the two can indeed bring a lot of convenience, but when using it, you need to pay special attention to the processing of related attributes, otherwise paging will be displayed. All recorded.

The code for the default paging query is as follows.

The binding operation code for the default attribute list is as follows.

//绑定左侧树形列表
        //如果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);
            });
        }

By default, the paging query control is re-updated through the conditions triggered by the tree list, or based on the conditions, as shown below.

//加载指定的对象数据
        var clickId = "";
        function loadData(id) {
            var condition = { CustomedCondition: id + '' };

            //修改条件后需要重新刷新
            $table.bootstrapTable('refresh', { url: queryUrl, query: condition, pageNumber:1});
            clickId = id;
        }

However, if this is just the processing, then when the data is paging, clicking the next page will not record the tree list condition just now, then we need to record the selected tree condition, so as to When updating the conditions, add the required conditions, then modify the above code to the following code.

//加载指定的对象数据
        var clickId = "";
        var where = {};//树列表条件
        function loadData(id) {
            var condition = { CustomedCondition: id + '' };
            where = {};//清空
            where["CustomedCondition"] = id + '';//使用自定义条件

            //修改条件后需要重新刷新
            $table.bootstrapTable('refresh', { url: queryUrl, query: condition, pageNumber:1});
            clickId = id;
        }

After processing in this way, we can add processing of this condition in the condition processing part of the bootstrapTable table plug-in code.

After adding the conditions in the red box, we will get the correct results by selecting paging, which will not cause the two conditions to be incompatible. At the same time, we are switching When the condition is met, the page number is restored to the first page.

Where is stored the conditions of our attribute list, which are stored in JSON. You can add the paging conditions you need as needed, such as my other A condition for selecting the user interface can be as shown in the following code.

For example, the paging display and conditional classification tree display of the process template are as follows.

#For example, the tree list and data display interface of one of the menus are as follows.

For more programming-related knowledge, please visit: Programming Teaching! !

The above is the detailed content of A brief discussion on how to handle tree list conditions and query conditions in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!