基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用

在上篇基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理,介绍了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一般我们会通过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开发里面涉及到的要点和各个插件的使用,以便把学习更加具体化,实用化,能够给我们实价开发项目做有用的参考。

以上内容是小编给大家介绍的基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用 的相关知识,希望对大家有所帮助。在此也感谢大家对我们网站的支持,相信我们会做的更好!

时间: 2016-05-09

基于jstree使用AJAX请求获取数据形成树

概述: 一般情况下都是通过ajax进行请求获取数据.boostrap+ajax 1.代码 //权限分配 $('#authority').click(function() { $("#jstree").jstree({ "core" : { "themes" : { "responsive": false }, // so that create works "check_callback" : true,

基于jstree使用JSON数据组装成树

概述: 前面主要是html数据,这里主要是json数组 1.格式 jsTree需要一个具体格式JSON数据,在标准的语法没有那个字段是必须的-而是那些是你需要的.请记住你可以获取任何你请求的其他属性,jsTree将会不会碰他们,你将有可能在随后使用它们. 为了改变节点的图标你可以是用属性icon.具体的字符串需要包含/的一个图片的url路径,你可以使用任何其它字符串应用类样式去修饰<i>元素,它将会被用呈现这个图标.你可以使用boolean 值false来jsTree在渲染节点时没有图标. 你

JQery jstree 大数据量问题解决方法

问题解决:生成的树是逐级加载的,在open函数中有一个生成节点的代码: 代码 复制代码 代码如下: for (var i=0; i<data.length; i++) { var n = TREE_OBJ.create(data[i], $(NODE)); if (onaddnode) onaddnode(n); } var firstChild = TREE_OBJ.children(NODE)[0]; if ($(firstChild).attr('id')==-1) TREE_OBJ.re

基于jsTree的无限级树JSON数据的转换代码

jstree 主页 : http://www.jstree.com/ 其中提供了一种从后台取数据渲染成树的形式: 复制代码 代码如下: $("#mytree").tree({ data : { type : "json", url : "${ctx}/user/power!list.do" } }); 对于url中返回的值必须是它定义的json数据形式: 复制代码 代码如下: $("#demo2").tree({ data :

jquery下jstree简单应用 - v1.0

第一篇文章,具体使用也过去很长时间了,直接贴码: 1.代码中使用json数据格式(直接在页面中组装成的,并非后台组装,具体方法:function _callBack(d)) 2.提供右键菜单及功能实现 3.具有checkbox,提供获取选中节点ID方法:function getMenuIds() 复制代码 代码如下: <script type="text/javascript" src="@{'/public/javascripts/jquery-1.4.2.min.j

jquery.jstree 增加节点的双击事件代码

jsTree 是基于jquery的树插件,支持拖放.复制.删除.快捷键.多选.自定义节点图标.自定义右键菜单.跨页面保存状态等等,总之我想到的它基本上都有了,而且最值得表扬的是它让人感觉一点都不慢哦. jsTree有节点选择事件,即 复制代码 代码如下: .bind("select_node.jstree", function(e, data) { //alert(data.rslt.obj.attr("id") + ":" + data.rsl

jsTree树控件(基于jQuery, 超强悍)[推荐]

1.支持基于HTML定义.Json.XML方式加载树节点 2.支持拖放,动态增加.删除.重命名树节点 3.支持复选框 4.支持复制.剪切.粘贴树节点,动态刷新树 5.提供足够的回调方法: 6.此外,还提供了详细的使用文档 下载地址 :http://code.google.com/p/jstree/ 文档 :http://jstree.com/reference/_documentation/1_files.html 例子 :http://jstree.com/reference/_example

jsTree事件和交互以及插件plugins详解

本文为大家分享了jsTree事件和交互以及插件plugins,供大家参考,具体内容如下 1.事件 jsTree在容器中触发变量事件,你可以浏览所有事件,然后了解如何进行监听:https://www.jstree.com/api/#/?q=.jstree%20Event 通过data参数获取更多详细信息关于事件检查. 更多情况下就是你会得到所有节点对象,如果你通过ID获取这个节点,查看节点使用.get_node(). $('#jstree') // listen for event .on('ch

jsTree 基于JQuery的排序节点 Bug

例如: - a (position 1) - b (position 2) - c (position 3) move c between a and b: cp=1 move a between b and c: cp=2 下移位置多加了1,不太清楚为什么,这里提供一种修复方法,也许它不是很好. 把 "position" : data.rslt.cp + i, 换成 "position" : data.rslt.o.index() + i, 可能对你有所帮助

jstree创建无限分级树的方法【基于ajax动态创建子节点】

本文实例讲述了jstree创建无限分级树的方法.分享给大家供大家参考,具体如下: 首先来看一下效果 页面加载之初 节点全部展开后 首先数据库的表结构如下 其中Id为主键,PId为关联到自身的外键 两个字段均为GUID形式 层级关系主要靠这两个字段维护 其次需要有一个类型 public class MenuType { public Guid Id { get; set; } public Guid PId { get; set; } public string MenuName { get; s

C# TreeView无限目录树实现方法

本文实例讲述了C# TreeView无限目录树实现方法.分享给大家供大家参考,具体如下: #region 绑定客户树 protected void bindTreeView() { TreeView1.Nodes.Clear(); string userid = Session["UserID"].ToString(); string sqlwr = new SY_ADMINUSER().GetUserIDListByLoginUser(userid, "CUSTOMERSE

PHP使用方法重载实现动态创建属性的get和set方法

在PHP中,我们不能够直接通过方法名相同,签名不同的方法来实现方法重载,因为PHP是弱数据类型,不能很好的区分签名.但是,可以在PHP的类中运用__call()方法来实现方法重载.当调用一个类中并不存在的方法时,会自动调用__call()方法,其形式为__call($name,$arguments) 其中$name是方法的名称,$arguments是一个数组类型的参数. 下面的例子是使用PHP的方法重载来动态创建get和set方法.(在面向对象编程中,一个类中的属性会使用get和set来赋值,但

bootstrap treeview 扩展addNode方法动态添加子节点的方法

bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等. 本文只是详细说明对bootstrap-treeview添加子节点的扩展方法(addNode),如了解bootstrap-treeview所有用法请看官方API 官方api  https://www.npmjs.com/package/bootstrap-treeview 

基于jquery的关于动态创建DOM元素的问题

复制代码 代码如下: <script type="text/javascript"> document.getElementById("testDiv").innerHTML ="动态创建的div"; </script> 而且用的应该是还是乐此不疲,但是有多少人知道这是错误的做法!错误的原因: (1) 在页面加载时改变了页面的结构. 在IE6中如果网络变慢或者页面内容太大就会出现"终止操作"的错误. 也

JS中动态创建元素的三种方法总结(推荐)

1.动态创建元素一 document.write() 例如向页面中输出一个 li 标签 <pre class="html" name="code"><span style="font-size:12px;"><script> document.write("<li>123</li>"); </script></span> body标签中就会插入

通过js动态创建标签,并设置属性方法

当我们在写jsp页面时,往往会遇到这种情况:从后台获取的数据个数不确定,此时在前端写jsp页面时也就不确定怎么设计了.这个时候就需要通过js动态创建标签: 1.创建某个标签:如下在body中创建一个div的事例: <script> function fun(){ var frameDiv = document.createElement("div");//创建一个标签 var bodyFa = document.getElementById("bodyid&quo

JavaScript与DOM组合动态创建表格实例

这篇文章简单介绍了DOM 1.0一些基本而强大的方法以及如何在JavaScript中使用它们.你可以学到如何动态地创建.获取.控制和删除HTML元素.这些DOM方法同样适用于XML.所有全面支持DOM 1.0的浏览器都能很好地运行本篇的实例,比如IE5,Firefox等. 这篇文章通过实例代码介绍DOM.请从尝试下面的HTML例子开始.它使用DOM 1的方法由JavaScript动态创建一个HTML表格.它创建一个由四个包含文本内容的单元格组成的小表格.单元格的文字内容是:"单元格是第y行第x列

MySQL递归查询树状表的子节点、父节点具体实现

简介:mysql5.0.94版本,该版本以及较高级的版本(5.5.6等等)尚未支持循环递归查询,和sqlserver.oracle相比,mysql难于在树状表中层层遍历的子节点.本程序重点参考了下面的资料,写了两个sql存储过程,子节点查询算是照搬了,父节点查询是逆思维弄的. 表结构和表数据就不公示了,查询的表user_role,主键是id,每条记录有parentid字段(对应该记录的父节点,当然,一个父节点自然会有一个以上的子节点嘛) 复制代码 代码如下: CREATE FUNCTION `g

创建无限极分类树型结构的简单方法

先上效果图 顶级分类其实就是一级分类,二级分类也叫作一级分类的子分类,在这个基础上,子分类还可以拥有子分类,这样就构成了无限极分类. 接下来看具体实现的代码: 一.在控制器中按字段查询,查询出所有分类信息(id:该分类的ID值,cate_name:该分类的名称,pid:父ID,sorts:为显示标题顺序排序做准备,可不写.) public function cate_display() { $cate = D('Cate'); $field = array('id','cate_name','p