在我Boostrap框架中蕾久，很多地方需要使用bootstrapTable表格插件和jstree樹形列表插件來(lái)共同構(gòu)建一個(gè)比較常見(jiàn)的查詢界面，bootstrapTable表格插件主要用來(lái)實(shí)現(xiàn)數(shù)據(jù)的分頁(yè)和表格展示新娜，而jstree樹形列表插件則是用來(lái)展示樹形列表，以便快速分類查詢的既绩，在很多場(chǎng)合下結(jié)合它們兩者概龄，可以實(shí)現(xiàn)較好的用戶體驗(yàn)效果。本篇隨筆介紹在Bootstrap開發(fā)框架中使用bootstrapTable表格插件和jstree樹形列表插件時(shí)候饲握，對(duì)樹列表?xiàng)l件和查詢條件的處理私杜，是指在快速展示數(shù)據(jù)的時(shí)候，分頁(yè)條件信息也能夠通過(guò)更新救欧。
1衰粹、bootstrapTable表格插件和jstree樹形列表插件的使用
關(guān)于Boostrap table表格插件的使用，我在隨筆《基于Metronic的Bootstrap開發(fā)框架經(jīng)驗(yàn)總結(jié)（16）-- 使用插件bootstrap-table實(shí)現(xiàn)表格記錄的查詢笆怠、分頁(yè)铝耻、排序等處理》和《基于Metronic的Bootstrap開發(fā)框架經(jīng)驗(yàn)總結(jié)（18）-- 在代碼生成工具Database2Sharp中集成對(duì)Bootstrap-table插件的分頁(yè)及排序支持》都有介紹，可謂居家旅行必備良藥蹬刷。
bootstrapTable表格插件和jstree樹形列表插件結(jié)合起來(lái)展示數(shù)據(jù)的界面也是經(jīng)称白剑看到的，如下所示箍铭。
以及在選擇用戶信息頁(yè)面的時(shí)候泊柬，也需要根據(jù)條件進(jìn)行篩選用戶。
從界面的展示來(lái)看诈火，結(jié)合兩者確實(shí)可以帶來(lái)很多便利兽赁，不過(guò)使用的時(shí)候，需要特別注意相關(guān)屬性的處理冷守，否則分頁(yè)就會(huì)顯示全部的記錄了刀崖。
默認(rèn)分頁(yè)查詢的代碼如下所示。
默認(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)情況下，通過(guò)樹形列表觸發(fā)的條件充活，或根據(jù)條件進(jìn)行重新更新分頁(yè)查詢控件蜂莉，如下所示。
//加載指定的對(duì)象數(shù)據(jù)
var clickId = "";
function loadData(id) {
var condition = { CustomedCondition: id + '' };
//修改條件后需要重新刷新
$table.bootstrapTable('refresh', { url: queryUrl, query: condition, pageNumber:1});
clickId = id;
}
不過(guò)如果僅僅是這樣的處理混卵，那么數(shù)據(jù)分頁(yè)的時(shí)候映穗，單擊下一頁(yè)則會(huì)沒(méi)有記錄剛才的樹形列表?xiàng)l件，那么我們需要記錄這個(gè)選擇的樹形條件幕随，從而在更新條件的時(shí)候加入所需的條件蚁滋，那么修改上面代碼為以下代碼。
//加載指定的對(duì)象數(shù)據(jù)
var clickId = "";
var where = {};//樹列表?xiàng)l件
function loadData(id) {
var condition = { CustomedCondition: id + '' };
where = {};//清空
where["CustomedCondition"] = id + '';//使用自定義條件
//修改條件后需要重新刷新
$table.bootstrapTable('refresh', { url: queryUrl, query: condition, pageNumber:1});
clickId = id;
}
這樣處理后，我們?cè)赽ootstrapTable表格插件的條件處理部分代碼里面辕录，可以增加對(duì)這個(gè)條件的處理即可睦霎。
增加了紅色方框里面的條件后，我們選擇分頁(yè)會(huì)得到正確的結(jié)果走诞，這樣也不會(huì)導(dǎo)致兩個(gè)條件的不兼容副女，同時(shí)我們?cè)谇袚Q條件的時(shí)候，恢復(fù)到第一頁(yè)的頁(yè)碼速梗。
而其中where里面存儲(chǔ)的是我們屬性列表的條件肮塞，以JSON方式存儲(chǔ)起來(lái)的，可以根據(jù)需要添加自己所需的分頁(yè)條件姻锁，如我的另一個(gè)選擇用戶界面的條件枕赵，可以如下代碼所示。
例如流程模板的分頁(yè)展示和條件分類樹形展示如下所示位隶。
例如其中一個(gè)菜單的樹形列表以及數(shù)據(jù)展示界面如下所示拷窜。
