在Bootstrap開發框架中使用bootstrapTable表格插件和jstree樹形列表插件時候，對樹列表條件和查詢條件的處理 基於Metronic的Bootstrap開發框架經驗總結（16）--

在我Boostrap框架中，不少地方須要使用bootstrapTable表格插件和jstree樹形列表插件來共同構建一個比較常見的查詢界面，bootstrapTable表格插件主要用來實現數據的分頁和表格展現，而jstree樹形列表插件則是用來展現樹形列表，以便快速分類查詢的，在不少場合下結合它們二者，能夠實現較好的用戶體驗效果。本篇隨筆介紹在Bootstrap開發框架中使用bootstrapTable表格插件和jstree樹形列表插件時候，對樹列表條件和查詢條件的處理，是指在快速展現數據的時候，分頁條件信息也可以經過更新。

一、bootstrapTable表格插件和jstree樹形列表插件的使用

關於Boostrap table表格插件的使用，我在隨筆《基於Metronic的Bootstrap開發框架經驗總結（16）-- 使用插件bootstrap-table實現表格記錄的查詢、分頁、排序等處理》和《基於Metronic的Bootstrap開發框架經驗總結（18）-- 在代碼生成工具Database2Sharp中集成對Bootstrap-table插件的分頁及排序支持》都有介紹，可謂居家旅行必備良藥。

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方式存儲起來的，能夠根據須要添加本身所需的分頁條件，如個人另外一個選擇用戶界面的條件，能夠以下代碼所示。

 

 例如流程模板的分頁展現和條件分類樹形展現以下所示。

例如其中一個菜單的樹形列表以及數據展現界面以下所示。