淺談Bootstrap中處理樹列表條件和查詢條件的方法

這篇文章要跟大家介紹一下在Bootstrap開發框架中使用bootstrapTable表格外掛程式和jstree樹形清單外掛程式時候，對樹列表條件和查詢條件的處理方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

在Boostrap框架中，很多地方需要使用bootstrapTable表格外掛程式和jstree樹形清單外掛程式來共同建構一個比較常見的查詢介面，bootstrapTable表格外掛主要用來實現資料的分頁和表格展示，而jstree樹形列表插件則是用來展示樹形列表，以便快速分類查詢的，在很多場合下結合它們兩者，可以實現較好的用戶體驗效果。 【相關推薦：《bootstrap教學》】

本隨筆介紹在Bootstrap開發框架中使用bootstrapTable表格外掛程式和jstree樹形清單外掛程式時候，對樹列表條件和查詢條件的處理，是指在快速展示資料的時候，分頁條件資訊也能夠透過更新。

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);
            });
        }

預設情況下，透過樹狀清單觸發的條件，或根據條件進行重新更新分頁查詢控件，如下所示。

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

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

不過如果只是這樣的處理，那麼資料分頁的時候，點擊下一頁則會沒有記錄剛才的樹形清單條件，那麼我們需要記錄這個選擇的樹形條件，從而在更新條件的時候加入所需的條件，那麼修改上面程式碼為以下程式碼。

//加载指定的对象数据
        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;
        }

這樣處理後，我們在bootstrapTable表格外掛程式的條件處理部分程式碼裡面，可以增加這個條件的處理即可。

增加了紅色方框裡面的條件後，我們選擇分頁會得到正確的結果，這樣也不會導致兩個條件的不相容，同時我們在切換條件的時候，恢復到第一頁的頁碼。

而其中where裡面儲存的是我們屬性清單的條件，以JSON方式儲存起來的，可以根據需要添加自己所需的分頁條件，如我的另一個選擇使用者介面的條件，可以如下程式碼所示。

例如流程範本的分頁展示和條件分類樹狀展示如下所示。

例如其中一個選單的樹狀清單以及資料展示介面如下所示。

更多程式相關知識，請造訪：程式設計教學！ ！

以上是淺談Bootstrap中處理樹列表條件和查詢條件的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！