Bootstrap中如何處理樹列表條件和查詢條件

這篇文章將為大家詳細(xì)講解有關(guān)Bootstrap中如何處理樹列表條件和查詢條件，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

在Boostrap框架中，很多地方需要使用bootstrapTable表格插件和jstree樹形列表插件來共同構(gòu)建一個比較常見的查詢界面，bootstrapTable表格插件主要用來實現(xiàn)數(shù)據(jù)的分頁和表格展示，而jstree樹形列表插件則是用來展示樹形列表，以便快速分類查詢的，在很多場合下結(jié)合它們兩者，可以實現(xiàn)較好的用戶體驗效果。

本篇隨筆介紹在Bootstrap開發(fā)框架中使用bootstrapTable表格插件和jstree樹形列表插件時候，對樹列表條件和查詢條件的處理，是指在快速展示數(shù)據(jù)的時候，分頁條件信息也能夠通過更新。

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

bootstrapTable表格插件和jstree樹形列表插件結(jié)合起來展示數(shù)據(jù)的界面也是經(jīng)?？吹降模缦滤?。

以及在選擇用戶信息頁面的時候，也需要根據(jù)條件進(jìn)行篩選用戶。

從界面的展示來看，結(jié)合兩者確實可以帶來很多便利，不過使用的時候，需要特別注意相關(guān)屬性的處理，否則分頁就會顯示全部的記錄了。

默認(rèn)分頁查詢的代碼如下所示。

默認(rèn)屬性列表的綁定操作代碼如下所示。

//綁定左側(cè)樹形列表
        //如果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);
            });
        }

默認(rèn)情況下，通過樹形列表觸發(fā)的條件，或根據(jù)條件進(jìn)行重新更新分頁查詢控件，如下所示。

//加載指定的對象數(shù)據(jù)
        var clickId = "";
        function loadData(id) {
            var condition = { CustomedCondition: id + '' };

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

不過如果僅僅是這樣的處理，那么數(shù)據(jù)分頁的時候，單擊下一頁則會沒有記錄剛才的樹形列表條件，那么我們需要記錄這個選擇的樹形條件，從而在更新條件的時候加入所需的條件，那么修改上面代碼為以下代碼。

//加載指定的對象數(shù)據(jù)
        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表格插件的條件處理部分代碼里面，可以增加對這個條件的處理即可。

增加了紅色方框里面的條件后，我們選擇分頁會得到正確的結(jié)果，這樣也不會導(dǎo)致兩個條件的不兼容，同時我們在切換條件的時候，恢復(fù)到第一頁的頁碼。

而其中where里面存儲的是我們屬性列表的條件，以JSON方式存儲起來的，可以根據(jù)需要添加自己所需的分頁條件，如我的另一個選擇用戶界面的條件，可以如下代碼所示。

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

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

關(guān)于“Bootstrap中如何處理樹列表條件和查詢條件”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。