基于BootStrap Metronic開發(fā)框架經(jīng)驗(yàn)小結(jié)【二】列表分頁處理和插件JSTree的使用

更新時(shí)間：2016年05月12日 10:37:16 作者：伍華聰

本文給大家介紹基于BootStrap Metronic開發(fā)框架經(jīng)驗(yàn)小結(jié)【二】列表分頁處理和插件JSTree的使用，介紹頁面內(nèi)容常用到的數(shù)據(jù)分頁處理，以及Bootstrap插件JSTree的使用，非常具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧

在上篇基于BootStrap Metronic開發(fā)框架經(jīng)驗(yàn)小結(jié)【一】框架總覽及菜單模塊的處理，介紹了Bootstrap開發(fā)框架的一些基礎(chǔ)性概括，包括總體界面效果，以及布局、菜單等內(nèi)容，本篇繼續(xù)這一主題，介紹頁面內(nèi)容常用到的數(shù)據(jù)分頁處理，以及Bootstrap插件JSTree的使用。

在數(shù)據(jù)的界面顯示當(dāng)中，表格數(shù)據(jù)的展示以及分頁是非常常見的處理操作，利用Bootstrap的樣式布局，以及JQuery的Ajax數(shù)據(jù)處理，就能很好實(shí)現(xiàn)數(shù)據(jù)的動(dòng)態(tài)展示和分頁處理。

1、列表展示和分頁處理1）數(shù)據(jù)的列表展示

在很多頁面里面，我們一般都需要對(duì)數(shù)據(jù)庫(kù)記錄進(jìn)行列表展示并進(jìn)行分頁。

左側(cè)的樹列表下面小節(jié)介紹，右邊就是我們一般的數(shù)據(jù)查詢顯示區(qū)域，分為查詢內(nèi)容和數(shù)據(jù)列表兩部分，查詢內(nèi)容，我們一般放在一個(gè)表單里面進(jìn)行處理，用戶觸發(fā)查詢的時(shí)候，我們對(duì)事件進(jìn)行處理，并從MVC后臺(tái)的控制器里面請(qǐng)求對(duì)應(yīng)的數(shù)據(jù)返回給頁面前端，對(duì)數(shù)據(jù)進(jìn)行顯示和分頁處理即可。

如菜單頁面的查詢代碼如下所示。

 <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菜單圖標(biāo)</label>
    <div class="col-md-8">
     <input name="WHC_WebIcon" type="text" class="form-control">
    </div>
    </div>
   </div>
   </form>

我們?cè)陧撁娴腏S代碼里面，處理頁面初始化后，對(duì)數(shù)據(jù)進(jìn)行查詢的處理操作，如下腳本所示。

 //頁面初始化
 $(function () {
  initJsTree(); //初始化樹
  BindEvent(); //綁定事件處理
  Search(currentPage);//初始化第一頁數(shù)據(jù)
  InitDictItem(); //初始化字典信息
 });

而數(shù)據(jù)的顯示部分，HTML代碼如下所示。主要就是顯示了表頭內(nèi)容，表格的主體內(nèi)容grid_body則有腳本動(dòng)態(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" 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菜單圖標(biāo)</th>
    <th>系統(tǒng)編號(hào)</th>
    <th style="width:90px">操作</th>
    </tr>
   </thead>
   <tbody id="grid_body"></tbody>
   </table>
   <div class="paging-toolbar">
   <ul id='grid_paging'></ul>
   </div>

而數(shù)據(jù)的顯示，是在頁面準(zhǔn)備完成后，通過Search腳本函數(shù)進(jìn)行處理，處理的時(shí)候，先序列號(hào)表單的條件和分頁的條件信息，傳入MVC控制器，獲取對(duì)應(yīng)的列表數(shù)據(jù)，在界面上進(jìn)行動(dòng)態(tài)綁定即可完成整個(gè)處理過程了。具體代碼截圖如下所示。

而其中的代碼

tr += getActionHtml(item.ID);

則是通過腳本生成一些操作按鈕，界面如下所示。

2）數(shù)據(jù)分頁處理

我們頁面顯示的數(shù)據(jù)一般不是固定的記錄，因此分頁也是很必要的處理，可以提高性能，也可以提高用戶的友好體驗(yàn)，其中的數(shù)據(jù)分頁是采用了Bootstrap的插件Bootstrap Paginator進(jìn)行處理的。這個(gè)控件用的很多，是一個(gè)很強(qiáng)大的分頁插件。

Bootstrap Paginator它的GitHub代碼地址為：https://github.com/lyonlai/bootstrap-paginator

它的使用例子介紹，可以參考：http://lyonlai.github.io/bootstrap-paginator/

該控件使用的時(shí)候，引入Jquery和Bootstrap樣式和類庫(kù)后，通過下面的代碼行即可添加使用。

<script src="/js/bootstrap-paginator.min.js"></script>

該控件分頁可以通過處理page-clicked和page-changed事件進(jìn)行實(shí)現(xiàn)。

分頁展示內(nèi)容，我們通過在HTML代碼里面添加一個(gè)DIV進(jìn)行，聲明一個(gè)ID為grid_paging的UL元素，代碼如下所示。

 <div class="paging-toolbar">
  <ul id='grid_paging'></ul>
 </div>

然后具體的JS里面處理代碼如下所示。

在MVC的后臺(tái)，我們需要獲取用戶在前端頁面?zhèn)魅氲姆猪摋l件和表單數(shù)據(jù)條件，這樣我們就可以根據(jù)這些參數(shù)，獲取到對(duì)應(yīng)的數(shù)據(jù)返回給客戶端了。

由于這些處理都是很通用的，因此我們可以放到基類控制器進(jìn)行處理，如果需要特殊化處理，再在子類控制器里面重寫分頁函數(shù)FindWithPager即可。

 /// <summary>
 /// 根據(jù)條件查詢數(shù)據(jù)庫(kù),并返回對(duì)象集合(用于分頁數(shù)據(jù)顯示)
 /// </summary>
 /// <returns>指定對(duì)象的集合</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就是獲取用戶傳入進(jìn)來的分頁參數(shù)，還記得我們上面前端頁面處理的URL參數(shù)嗎，如下所示。

url = "/Menu/FindWithPager?page=" + page + "&rows=" + rows;

具體MVC控制器GetPagerInfo函數(shù)的實(shí)現(xiàn)代碼如下所示。

 /// <summary>
 /// 根據(jù)Request參數(shù)獲取分頁對(duì)象數(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è)務(wù)邏輯類處理就可以了，這里已經(jīng)是框架底層的支持范疇了，不在繼續(xù)展開。

List<T> list = baseBLL.FindWithPager(where, pagerInfo);

最后的界面效果如下所示

2、插件JSTree

前面小節(jié)也提高的樹列表的展示，在一般情況下，如果數(shù)據(jù)有層次的，那么通過樹列表展示，可以很直觀的顯示出它們的結(jié)構(gòu)，因此樹列表在很多情況下，可以輔助我們對(duì)數(shù)據(jù)的分類展示。

如對(duì)于用戶數(shù)據(jù)來說，我們可以根據(jù)用戶的組織機(jī)構(gòu)或者角色進(jìn)行分類，他們兩者可以通過樹列表進(jìn)行直觀的展示，這樣我們?cè)趯ふ也煌愋偷挠脩袅斜淼臅r(shí)候，就很好找了。

或者對(duì)于字典數(shù)據(jù)或者省份城市的數(shù)據(jù)，一樣更可以通過樹列表進(jìn)行展示

JSTree 控件的官方地址為https://www.jstree.com/

網(wǎng)站對(duì)JSTree控件的使用說明及案例講解的已經(jīng)很清晰了，一般情況下，我們直接參考例子就可以使用了。

簡(jiǎn)單的JSTree使用代碼如下所示

$(function () { $('#jstree_demo_div').jstree(); });

對(duì)于JSTree的事件，我們一般可以通過下面代碼進(jìn)行綁定事件。

$('#jstree_demo_div').on("changed.jstree", function (e, data) {
 console.log(data.selected);
});

JSTree一般我們會(huì)通過JSON數(shù)據(jù)進(jìn)行動(dòng)態(tài)綁定，這個(gè)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
}

一般情況下，我們通過下面的腳本進(jìn)行數(shù)據(jù)的清空和綁定操作

$('#jstree_demo_div').data('jstree', false);//清空數(shù)據(jù)，必須
//異步進(jìn)行JSON數(shù)據(jù)的綁定
$.getJSON(url, function (data) {
 $('#jstree_demo_div').jstree({
 'core': {
  'data': data,
  "themes": {
  "responsive": false
  }
 }
 }).bind('loaded.jstree', loadedfunction);
});

如果我們需要給用戶提供復(fù)選框，設(shè)置JSTree的選中狀態(tài)，界面效果如下所示。

那么一般的初始化函數(shù)就需要變化一下，如下代碼所示

 //帶復(fù)選框的JSTree的初始化代碼
 $.getJSON(url, function (data) {
  control.jstree({
  'plugins' : [ "checkbox" ], //出現(xiàn)選擇框
  'checkbox': { cascade: "", three_state: false }, //不級(jí)聯(lián)
  'core': {
   'data': data,
   "themes": {
   "responsive": false
   }
  }
  }).bind('loaded.jstree', loadedfunction);
 });

綜合兩者，我們可以進(jìn)一步把JSTree控件的初始化綁定提煉為一個(gè)JS的公共函數(shù)bindJsTree即可。

//以指定的Json數(shù)據(jù)，初始化JStree控件
//treeName為樹div名稱，url為數(shù)據(jù)源地址，checkbox為是否顯示復(fù)選框，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默認(rèn)值為false
 if(isCheck) {
 //復(fù)選框樹的初始化
 $.getJSON(url, function (data) {
  control.jstree({
  'plugins' : [ "checkbox" ], //出現(xiàn)選擇框
  'checkbox': { cascade: "", three_state: false }, //不級(jí)聯(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的時(shí)候，代碼可以簡(jiǎn)化一下

 //初始化組織機(jī)構(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);
  });
 }

對(duì)于復(fù)選框的列表，初始化代碼如下所示。

 //初始化所有該用戶的所有功能集合
  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);

對(duì)于復(fù)選框，我們一般是初始化數(shù)據(jù)，然后在根據(jù)需要設(shè)置樹列表的選中狀態(tài)，這種不用頻繁初始化樹，可以有效提高性能和響應(yīng)體驗(yàn)。

那么我們?cè)诔跏蓟瘶淞斜砗?，就需要清空選擇項(xiàng)，然后設(shè)置我們所需要的選擇項(xiàng)即可，具體代碼如下所示，注意其中的uncheck_all和check_node事件的處理。

//初始化角色數(shù)據(jù)權(quán)限集合（組織機(jī)構(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é)點(diǎn)選中 
   });
  });
  }
 }

數(shù)據(jù)保存的時(shí)候，我們獲得JSTree的節(jié)點(diǎn)選中列表就可以進(jìn)行數(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)使用該功能，請(qǐng)聯(lián)系管理員進(jìn)行處理。");
  });
 }

好了，介紹到這里，基本上也把常規(guī)的數(shù)據(jù)展示，數(shù)據(jù)分頁；JSTree的綁定、事件處理，數(shù)據(jù)保存等操作介紹的相對(duì)完整了，希望得到大家的繼續(xù)支持，我會(huì)繼續(xù)詳細(xì)介紹Bootstrap開發(fā)里面涉及到的要點(diǎn)和各個(gè)插件的使用，以便把學(xué)習(xí)更加具體化，實(shí)用化，能夠給我們實(shí)價(jià)開發(fā)項(xiàng)目做有用的參考。

以上內(nèi)容是小編給大家介紹的基于BootStrap Metronic開發(fā)框架經(jīng)驗(yàn)小結(jié)【二】列表分頁處理和插件JSTree的使用的相關(guān)知識(shí)，希望對(duì)大家有所幫助。在此也感謝大家對(duì)腳本之家網(wǎng)站的支持，相信我們會(huì)做的更好！

您可能感興趣的文章: