人女久久久,视频在线123区

本篇文章給大家介紹一下Bootstrap中使用bootstrapTable表格插件和jstree樹形列表插件時，對樹列表條件和查詢條件的處理方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

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

本篇隨筆介紹在Bootstrap開發(fā)框架中使用bootstrapTable表格插件和jstree樹形列表插件時候，對樹列表條件和查詢條件的處理，是指在快速展示數(shù)據(jù)的時候，分頁條件信息也能夠通過更新?！鞠嚓P(guān)推薦：《bootstrap教程》】

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

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

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

從界面的展示來看，結(jié)合兩者確實可以帶來很多便利，不過使用的時候，需要特別注意相關(guā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);
            });
        }

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

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