您好,登錄后才能下訂單哦!
在上篇《基于Metronic的Bootstrap開發(fā)框架經(jīng)驗總結(jié)(1)-框架總覽及菜單模塊的處理》介紹了Bootstrap開發(fā)框架的一些基礎(chǔ)性概括,包括總體界面效果,以及布局、菜單等內(nèi)容,本篇繼續(xù)這一主題,介紹頁面內(nèi)容常用到的數(shù)據(jù)分頁處理,以及Bootstrap插件JSTree的使用。在數(shù)據(jù)的界面顯示當中,表格數(shù)據(jù)的展示以及分頁是非常常見的處理操作,利用Bootstrap的樣式布局,以及JQuery的Ajax數(shù)據(jù)處理,就能很好實現(xiàn)數(shù)據(jù)的動態(tài)展示和分頁處理。
在很多頁面里面,我們一般都需要對數(shù)據(jù)庫記錄進行列表展示并進行分頁。
左側(cè)的樹列表下面小節(jié)介紹,右邊就是我們一般的數(shù)據(jù)查詢顯示區(qū)域,分為查詢內(nèi)容和數(shù)據(jù)列表兩部分,查詢內(nèi)容,我們一般放在一個表單里面進行處理,用戶觸發(fā)查詢的時候,我們對事件進行處理,并從MVC后臺的控制器里面請求對應的數(shù)據(jù)返回給頁面前端,對數(shù)據(jù)進行顯示和分頁處理即可。
如菜單頁面的查詢代碼如下所示。
<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代碼里面,處理頁面初始化后,對數(shù)據(jù)進行查詢的處理操作,如下腳本所示。
//頁面初始化 $(function () { initJsTree(); //初始化樹 BindEvent(); //綁定事件處理 Search(currentPage);//初始化第一頁數(shù)據(jù) InitDictItem(); //初始化字典信息 });
而數(shù)據(jù)的顯示部分,HTML代碼如下所示。主要就是顯示了表頭內(nèi)容,表格的主體內(nèi)容grid_body則有腳本動態(tài)構(gòu)建并顯示
<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" ><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>系統(tǒng)編號</th> <th >操作</th> </tr> </thead> <tbody id="grid_body"></tbody> </table> <div class="paging-toolbar"> <ul id='grid_paging'></ul> </div>
而數(shù)據(jù)的顯示,是在頁面準備完成后,通過Search腳本函數(shù)進行處理,處理的時候,先序列號表單的條件和分頁的條件信息,傳入MVC控制器,獲取對應的列表數(shù)據(jù),在界面上進行動態(tài)綁定即可完成整個處理過程了。具體代碼截圖如下所示。
而其中的代碼
tr += getActionHtml(item.ID);
則是通過腳本生成一些操作按鈕,界面如下所示。
我們頁面顯示的數(shù)據(jù)一般不是固定的記錄,因此分頁也是很必要的處理,可以提高性能,也可以提高用戶的友好體驗,其中的數(shù)據(jù)分頁是采用了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事件進行實現(xiàn)。
分頁展示內(nèi)容,我們通過在HTML代碼里面添加一個DIV進行,聲明一個ID為grid_paging的UL元素,代碼如下所示。
<div class="paging-toolbar"> <ul id='grid_paging'></ul> </div>
然后具體的JS里面處理代碼如下所示。
在MVC的后臺,我們需要獲取用戶在前端頁面?zhèn)魅氲姆猪摋l件和表單數(shù)據(jù)條件,這樣我們就可以根據(jù)這些參數(shù),獲取到對應的數(shù)據(jù)返回給客戶端了。
由于這些處理都是很通用的,因此我們可以放到基類控制器進行處理,如果需要特殊化處理,再在子類控制器里面重寫分頁函數(shù) FindWithPager 即可。
/// <summary> /// 根據(jù)條件查詢數(shù)據(jù)庫,并返回對象集合(用于分頁數(shù)據(jù)顯示) /// </summary> /// <returns>指定對象的集合</returns> public virtual ActionResult FindWithPager() { //檢查用戶是否有權(quán)限,否則拋出MyDenyAccessException異常 base.CheckAuthorized(AuthorizeKey.ListKey); string where = GetPagerCondition(); PagerInfo pagerInfo = GetPagerInfo(); List<T> list = baseBLL.FindWithPager(where, pagerInfo); //Json格式的要求{total:22,rows:{}} //構(gòu)造成Json的格式傳遞 var result = new { total = pagerInfo.RecordCount, rows = list }; return ToJsonContentDate(result); }
其中GetPagerInfo就是獲取用戶傳入進來的分頁參數(shù),還記得我們上面前端頁面處理的URL參數(shù)嗎,如下所示。
url = "/Menu/FindWithPager?page=" + page + "&rows=" + rows;
具體MVC控制器GetPagerInfo函數(shù)的實現(xiàn)代碼如下所示。
/// <summary> /// 根據(jù)Request參數(shù)獲取分頁對象數(shù)據(jù) /// </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; }
然后獲取到表單條件和分頁條件后,傳入給框架的業(yè)務邏輯類處理就可以了,這里已經(jīng)是框架底層的支持范疇了,不在繼續(xù)展開。
List<T> list = baseBLL.FindWithPager(where, pagerInfo);
最后的界面效果如下所示
前面小節(jié)也提高的樹列表的展示,在一般情況下,如果數(shù)據(jù)有層次的,那么通過樹列表展示,可以很直觀的顯示出它們的結(jié)構(gòu),因此樹列表在很多情況下,可以輔助我們對數(shù)據(jù)的分類展示。
如對于用戶數(shù)據(jù)來說,我們可以根據(jù)用戶的組織機構(gòu)或者角色進行分類,他們兩者可以通過樹列表進行直觀的展示,這樣我們在尋找不同類型的用戶列表的時候,就很好找了。
或者對于字典數(shù)據(jù)或者省份城市的數(shù)據(jù),一樣更可以通過樹列表進行展示
JSTree 控件的官方地址為https://www.jstree.com/
網(wǎng)站對JSTree控件的使用說明及案例講解的已經(jīng)很清晰了,一般情況下,我們直接參考例子就可以使用了。
簡單的JSTree使用代碼如下所示
$(function () { $('#jstree_demo_div').jstree(); });
對于JSTree的事件,我們一般可以通過下面代碼進行綁定事件。
$('#jstree_demo_div').on("changed.jstree", function (e, data) { console.log(data.selected); });
如果我們需要獲取JStree控件選中節(jié)點的內(nèi)容,然后進行相關(guān)的處理操作,那么它的處理代碼如下所示。
//綁定雙擊事件 $("#jstree_div").bind("dblclick.jstree", function (e, data) { EditDept(); }); $("#jstree_tag").bind("dblclick.jstree", function (e, data) { EditTag(); });
雙擊事件,其實是連續(xù)的單擊事件處理,一般情況下,或先選中當前節(jié)點,我們也可以在雙擊的時候,獲取對應的節(jié)點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');
獲取雙擊的節(jié)點ID,獲取選擇節(jié)點的名稱則可以通過代碼獲?。?/span>
var eventNodeName = e.target.nodeName;
JSTree一般我們會通過JSON數(shù)據(jù)進行動態(tài)綁定,這個JSON的數(shù)據(jù)格式定義如下所示。
{ 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 }
一般情況下,我們通過下面的腳本進行數(shù)據(jù)的清空和綁定操作
$('#jstree_demo_div').data('jstree', false);//清空數(shù)據(jù),必須 //異步進行JSON數(shù)據(jù)的綁定 $.getJSON(url, function (data) { $('#jstree_demo_div').jstree({ 'core': { 'data': data, "themes": { "responsive": false } } }).bind('loaded.jstree', loadedfunction); });
如果我們需要給用戶提供復選框,設(shè)置JSTree的選中狀態(tài),界面效果如下所示。
那么一般的初始化函數(shù)就需要變化一下,如下代碼所示
//帶復選框的JSTree的初始化代碼 $.getJSON(url, function (data) { control.jstree({ 'plugins' : [ "checkbox" ], //出現(xiàn)選擇框 'checkbox': { cascade: "", three_state: false }, //不級聯(lián) 'core': { 'data': data, "themes": { "responsive": false } } }).bind('loaded.jstree', loadedfunction); });
綜合兩者,我們可以進一步把JSTree控件的初始化綁定提煉為一個JS的公共函數(shù)bindJsTree即可。
//以指定的Json數(shù)據(jù),初始化JStree控件 //treeName為樹div名稱,url為數(shù)據(jù)源地址,checkbox為是否顯示復選框,loadedfunction為加載完畢的回調(diào)函數(shù) function bindJsTree(treeName, url, checkbox, loadedfunction) { var control = $('#' + treeName) control.data('jstree', false);//清空數(shù)據(jù),必須 var isCheck = arguments[2] || false; //設(shè)置checkbox默認值為false if(isCheck) { //復選框樹的初始化 $.getJSON(url, function (data) { control.jstree({ 'plugins' : [ "checkbox" ], //出現(xiàn)選擇框 'checkbox': { cascade: "", three_state: false }, //不級聯(lián) '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的時候,代碼可以簡化一下
//初始化組織機構(gòu)列表 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); //角色數(shù)據(jù)權(quán)限,先初始化所有部門 treeUrl = '/User/GetMyDeptJsTreeJson?userId=@Session["UserId"]'; bindJsTree("tree_roledata", treeUrl, true);
對于復選框,我們一般是初始化數(shù)據(jù),然后在根據(jù)需要設(shè)置樹列表的選中狀態(tài),這種不用頻繁初始化樹,可以有效提高性能和響應體驗。
那么我們在初始化樹列表后,就需要清空選擇項,然后設(shè)置我們所需要的選擇項即可,具體代碼如下所示,注意其中的uncheck_all和check_node事件的處理。
//初始化角色數(shù)據(jù)權(quán)限集合(組織機構(gòu)) function initRoleData(id) { if (id != "") { var treeMenu = "tree_roledata"; $('#' + treeMenu).jstree("uncheck_all");//取消所有選中 //勾選指定內(nèi)容 $.getJSON("/RoleData/GetRoleDataList?r=" + Math.random() + "&roleId=" + id, function (json) { $.each(json, function (i, item) { $('#' + treeMenu).jstree('check_node', item);//將節(jié)點選中 }); }); } }
數(shù)據(jù)保存的時候,我們獲得JSTree的節(jié)點選中列表就可以進行數(shù)據(jù)的保存了,具體代碼如下所示。
//保存角色數(shù)據(jù)權(quán)限 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("您未被授權(quán)使用該功能,請聯(lián)系管理員進行處理。"); }); }
好了,介紹到這里,基本上也把常規(guī)的數(shù)據(jù)展示,數(shù)據(jù)分頁;JSTree的綁定、事件處理,數(shù)據(jù)保存等操作介紹的相對完整了,希望得到大家的繼續(xù)支持,我會繼續(xù)詳細介紹Bootstrap開發(fā)里面涉及到的要點和各個插件的使用,以便把學習更加具體化,實用化,能夠給我們實價開發(fā)項目做有用的參考。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。