基於Metronic的Bootstrap開發框架經驗總結(2)--列表分頁處理和外掛JSTree的使用
在上篇《基於Metronic的Bootstrap開發框架經驗總結(1)-框架總覽及選單模組的處理》介紹了Bootstrap開發框架的一些基礎性概括,包括總體介面效果,以及佈局、選單等內容,本篇繼續這一主題,介紹頁面內容常用到的資料分頁處理,以及Bootstrap外掛JSTree的使用。在資料的介面顯示當中,表格資料的展示以及分頁是非常常見的處理操作,利用Bootstrap的樣式佈局,以及JQuery的Ajax資料處理,就能很好實現資料的動態展示和分頁處理。
1、列表展示和分頁處理
1)資料的列表展示
在很多頁面裡面,我們一般都需要對資料庫記錄進行列表展示並進行分頁。
左側的樹列表下面小節介紹,右邊就是我們一般的資料查詢顯示區域,分為查詢內容和資料列表兩部分,查詢內容,我們一般放在一個表單裡面進行處理,使用者觸發查詢的時候,我們對事件進行處理,並從MVC後臺的控制器裡面請求對應的資料返回給頁面前端,對資料進行顯示和分頁處理即可。
如選單頁面的查詢程式碼如下所示。
<form class="form-horizontal" id="ffSearch"> <div class="col-md-3 col-sm-3 col-xs-6"> <div class="form-group"> <label class="control-label col-md-4">顯示名稱</label> <div class="col-md-8"> <input name="WHC_Name" type="text" class="form-control"> </div> </div> </div> <div class="col-md-3 col-sm-3 col-xs-6"> <div class="form-group"> <label class="control-label col-md-4">功能ID</label> <div class="col-md-8"> <input name="WHC_FunctionId" type="text" class="form-control"> </div> </div> </div> <div class="col-md-3 col-sm-3 col-xs-6"> <div class="form-group"> <label class="control-label col-md-4">Web連線地址</label> <div class="col-md-8"> <input name="WHC_Url" type="text" class="form-control"> </div> </div> </div> <div class="col-md-3 col-sm-3 col-xs-6"> <div class="form-group"> <label class="control-label col-md-4">Web選單圖示</label> <div class="col-md-8"> <input name="WHC_WebIcon" type="text" class="form-control"> </div> </div> </div> </form>
我們在頁面的JS程式碼裡面,處理頁面初始化後,對資料進行查詢的處理操作,如下指令碼所示。
//頁面初始化
$(function () {
initJsTree(); //初始化樹
BindEvent(); //繫結事件處理
Search(currentPage);//初始化第一頁資料
InitDictItem(); //初始化字典資訊
});
而資料的顯示部分,HTML程式碼如下所示。主要就是顯示了表頭內容,表格的主體內容grid_body則有指令碼動態構建並顯示
<table id="grid" class="table table-striped table-bordered table-hover" cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
<thead id="grid_head">
<tr>
<th class="table-checkbox" style="width:40px"><input class="group-checkable" type="checkbox" onclick="selectAll(this)"></th>
<th>顯示名稱</th>
<th>排序</th>
<th>功能ID</th>
<th>選單可見</th>
<th>Web連線地址</th>
<th>Web選單圖示</th>
<th>系統編號</th>
<th style="width:90px">操作</th>
</tr>
</thead>
<tbody id="grid_body"></tbody>
</table>
<div class="paging-toolbar">
<ul id='grid_paging'></ul>
</div>
而資料的顯示,是在頁面準備完成後,通過Search指令碼函式進行處理,處理的時候,先序列號表單的條件和分頁的條件資訊,傳入MVC控制器,獲取對應的列表資料,在介面上進行動態繫結即可完成整個處理過程了。具體程式碼截圖如下所示。
而其中的程式碼
tr += getActionHtml(item.ID);
則是通過指令碼生成一些操作按鈕,介面如下所示。
2)資料分頁處理
我們頁面顯示的資料一般不是固定的記錄,因此分頁也是很必要的處理,可以提高效能,也可以提高使用者的友好體驗,其中的資料分頁是採用了Bootstrap的外掛Bootstrap Paginator 進行處理的。這個控制元件用的很多,是一個很強大的分頁外掛。
Bootstrap Paginator 它的GitHub程式碼地址為:https://github.com/lyonlai/bootstrap-paginator
它的使用例子介紹,可以參考:http://lyonlai.github.io/bootstrap-paginator/
該控制元件使用的時候,引入Jquery和Bootstrap樣式和類庫後,通過下面的程式碼行即可新增使用。
<script src="/js/bootstrap-paginator.min.js"></script>
該控制元件分頁可以通過處理page-clicked和page-changed事件進行實現。
分頁展示內容,我們通過在HTML程式碼裡面新增一個DIV進行,宣告一個ID為grid_paging的UL元素,程式碼如下所示。
<div class="paging-toolbar">
<ul id='grid_paging'></ul>
</div>
然後具體的JS裡面處理程式碼如下所示。
在MVC的後臺,我們需要獲取使用者在前端頁面傳入的分頁條件和表單資料條件,這樣我們就可以根據這些引數,獲取到對應的資料返回給客戶端了。
由於這些處理都是很通用的,因此我們可以放到基類控制器進行處理,如果需要特殊化處理,再在子類控制器裡面重寫分頁函式 FindWithPager 即可。
/// <summary>
/// 根據條件查詢資料庫,並返回物件集合(用於分頁資料顯示)
/// </summary>
/// <returns>指定物件的集合</returns>
public virtual ActionResult FindWithPager()
{
//檢查使用者是否有許可權,否則丟擲MyDenyAccessException異常
base.CheckAuthorized(AuthorizeKey.ListKey);
string where = GetPagerCondition();
PagerInfo pagerInfo = GetPagerInfo();
List<T> list = baseBLL.FindWithPager(where, pagerInfo);
//Json格式的要求{total:22,rows:{}}
//構造成Json的格式傳遞
var result = new { total = pagerInfo.RecordCount, rows = list };
return ToJsonContentDate(result);
}
其中GetPagerInfo就是獲取使用者傳入進來的分頁引數,還記得我們上面前端頁面處理的URL引數嗎,如下所示。
url = "/Menu/FindWithPager?page=" + page + "&rows=" + rows;
具體MVC控制器GetPagerInfo函式的實現程式碼如下所示。
/// <summary>
/// 根據Request引數獲取分頁物件資料
/// </summary>
/// <returns></returns>
protected virtual PagerInfo GetPagerInfo()
{
int pageIndex = Request["page"] == null ? 1 : int.Parse(Request["page"]);
int pageSize = Request["rows"] == null ? 10 : int.Parse(Request["rows"]);
PagerInfo pagerInfo = new PagerInfo();
pagerInfo.CurrenetPageIndex = pageIndex;
pagerInfo.PageSize = pageSize;
return pagerInfo;
}
然後獲取到表單條件和分頁條件後,傳入給框架的業務邏輯類處理就可以了,這裡已經是框架底層的支援範疇了,不在繼續展開。
List<T> list = baseBLL.FindWithPager(where, pagerInfo);
最後的介面效果如下所示
2、外掛JSTree
前面小節也提高的樹列表的展示,在一般情況下,如果資料有層次的,那麼通過樹列表展示,可以很直觀的顯示出它們的結構,因此樹列表在很多情況下,可以輔助我們對資料的分類展示。
如對於使用者資料來說,我們可以根據使用者的組織機構或者角色進行分類,他們兩者可以通過樹列表進行直觀的展示,這樣我們在尋找不同型別的使用者列表的時候,就很好找了。
或者對於字典資料或者省份城市的資料,一樣更可以通過樹列表進行展示
JSTree 控制元件的官方地址為https://www.jstree.com/
網站對JSTree控制元件的使用說明及案例講解的已經很清晰了,一般情況下,我們直接參考例子就可以使用了。
簡單的JSTree使用程式碼如下所示
$(function () { $('#jstree_demo_div').jstree(); });
對於JSTree的事件,我們一般可以通過下面程式碼進行繫結事件。
$('#jstree_demo_div').on("changed.jstree", function (e, data) {
console.log(data.selected);
});
如果我們需要獲取JStree控制元件選中節點的內容,然後進行相關的處理操作,那麼它的處理程式碼如下所示。
//繫結雙擊事件
$("#jstree_div").bind("dblclick.jstree", function (e, data) {
EditDept();
});
$("#jstree_tag").bind("dblclick.jstree", function (e, data) {
EditTag();
});
雙擊事件,其實是連續的單擊事件處理,一般情況下,或先選中當前節點,我們也可以在雙擊的時候,獲取對應的節點ID,如下程式碼所示。
bindJsTree("jstree_div", "/Menu/GetMenuJsTreeJson");
$("#jstree_div").bind("dblclick.jstree", function (e, data) {
var id = $(e.target).parents('li').attr('id');
EditViewById(id);
});
也就是可以通過
var id = $(e.target).parents('li').attr('id');
獲取雙擊的節點ID,獲取選擇節點的名稱則可以通過程式碼獲取:
var eventNodeName = e.target.nodeName;
JSTree一般我們會通過JSON資料進行動態繫結,這個JSON的資料格式定義如下所示。
{
id : "string" // required
parent : "string" // required
text : "string" // node text
icon : "string" // string for custom
state : {
opened : boolean // is the node open
disabled : boolean // is the node disabled
selected : boolean // is the node selected
},
li_attr : {} // attributes for the generated LI node
a_attr : {} // attributes for the generated A node
}
一般情況下,我們通過下面的指令碼進行資料的清空和繫結操作
$('#jstree_demo_div').data('jstree', false);//清空資料,必須
//非同步進行JSON資料的繫結
$.getJSON(url, function (data) {
$('#jstree_demo_div').jstree({
'core': {
'data': data,
"themes": {
"responsive": false
}
}
}).bind('loaded.jstree', loadedfunction);
});
如果我們需要給使用者提供複選框,設定JSTree的選中狀態,介面效果如下所示。
那麼一般的初始化函式就需要變化一下,如下程式碼所示
//帶複選框的JSTree的初始化程式碼
$.getJSON(url, function (data) {
control.jstree({
'plugins' : [ "checkbox" ], //出現選擇框
'checkbox': { cascade: "", three_state: false }, //不級聯
'core': {
'data': data,
"themes": {
"responsive": false
}
}
}).bind('loaded.jstree', loadedfunction);
});
綜合兩者,我們可以進一步把JSTree控制元件的初始化繫結提煉為一個JS的公共函式bindJsTree即可。
//以指定的Json資料,初始化JStree控制元件
//treeName為樹div名稱,url為資料來源地址,checkbox為是否顯示覆選框,loadedfunction為載入完畢的回撥函式
function bindJsTree(treeName, url, checkbox, loadedfunction) {
var control = $('#' + treeName)
control.data('jstree', false);//清空資料,必須
var isCheck = arguments[2] || false; //設定checkbox預設值為false
if(isCheck) {
//複選框樹的初始化
$.getJSON(url, function (data) {
control.jstree({
'plugins' : [ "checkbox" ], //出現選擇框
'checkbox': { cascade: "", three_state: false }, //不級聯
'core': {
'data': data,
"themes": {
"responsive": false
}
}
}).bind('loaded.jstree', loadedfunction);
});
}
else {
//普通樹列表的初始化
$.getJSON(url, function (data) {
control.jstree({
'core': {
'data': data,
"themes": {
"responsive": false
}
}
}).bind('loaded.jstree', loadedfunction);
});
}
}
因此在頁面的繫結JSTree的時候,程式碼可以簡化一下
//初始化組織機構列表
function initDeptTreeview() {
var treeUrl = '/User/GetMyDeptJsTreeJson?userId=@Session["UserId"]';
bindJsTree("jstree_div", treeUrl);
//樹控制元件的變化事件處理
$('#jstree_div').on("changed.jstree", function (e, data) {
var icon = data.node.icon;
loadDataByOu(data.selected);
});
}
對於複選框的列表,初始化程式碼如下所示。
//初始化所有該使用者的所有功能集合
var treeUrl = '/Function/GetRoleFunctionJsTreeByUser?userId=@Session["UserId"]';
bindJsTree("tree_function", treeUrl, true);
//角色資料許可權,先初始化所有部門
treeUrl = '/User/GetMyDeptJsTreeJson?userId=@Session["UserId"]';
bindJsTree("tree_roledata", treeUrl, true);
對於複選框,我們一般是初始化資料,然後在根據需要設定樹列表的選中狀態,這種不用頻繁初始化樹,可以有效提高效能和響應體驗。
那麼我們在初始化樹列表後,就需要清空選擇項,然後設定我們所需要的選擇項即可,具體程式碼如下所示,注意其中的uncheck_all和check_node事件的處理。
//初始化角色資料許可權集合(組織機構)
function initRoleData(id) {
if (id != "") {
var treeMenu = "tree_roledata";
$('#' + treeMenu).jstree("uncheck_all");//取消所有選中
//勾選指定內容
$.getJSON("/RoleData/GetRoleDataList?r=" + Math.random() + "&roleId=" + id, function (json) {
$.each(json, function (i, item) {
$('#' + treeMenu).jstree('check_node', item);//將節點選中
});
});
}
}
資料儲存的時候,我們獲得JSTree的節點選中列表就可以進行資料的儲存了,具體程式碼如下所示。
//儲存角色資料許可權
function saveRoleData(roleid) {
var ouList = $('#tree_roledata').jstree('get_selected');
var url = '/RoleData/UpdateData?r=' + Math.random();
var postData = { roleId: roleid, ouList: ouList.join(',')};
$.post(url, postData, function (json) {
initRoleData(roleid);
}).error(function () {
showTips("您未被授權使用該功能,請聯絡管理員進行處理。");
});
}
好了,介紹到這裡,基本上也把常規的資料展示,資料分頁;JSTree的繫結、事件處理,資料儲存等操作介紹的相對完整了,希望得到大家的繼續支援,我會繼續詳細介紹Bootstrap開發裡面涉及到的要點和各個外掛的使用,以便把學習更加具體化,實用化,能夠給我們實價開發專案做有用的參考。