基于BootStrap Metronic开发框架的经验总结[2]列表分页处理和插件JSTree的使用

最后一章，基于BootStrap Metronic开发框架的经验总结[I]框架概述和菜单模块处理，介绍了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 '显示名称/标签div class='col-md-8 '输入名称=' WHC _ Name ' type=' text ' class=' form-control '/Div/Div class=' col-MD-3 col-sm-3 col-xs-6 ' Div class=' form-group ' label class label div class='col-md-8 '输入名称=' WHC _ URl ' type=' text ' class=' form-control '/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 class=' col-MD-8 '输入名称=' WHC _ web icon ' type=' text ' class=' form-control '/Div/Div/form。 在页面的JS代码中，我们处理页面初始化后的数据查询操作，如下脚本所示。

//页面初始化$(function(){ initJsTree()；//初始化树BindEvent()；//绑定事件处理搜索(CurrentPage)；//初始化第一页数据initdictionitem()；//初始化字典信息})；数据显示部分的HTML代码如下。主要显示表头内容，表格grid_body的主要内容是通过脚本动态构建和显示的。

Table ID=' grid ' class=' Table-stripped Table-bordered Table-hover ' cell padding=' 0 ' cell spacing=' 0 ' border=' 0 ' class=' display ' width=' 100% ' the ID=' grid _ head ' tr Th class=' Table-checkbox ' style=' width :40 px ' input class=' group-checkable ' type=' checkbox ' onclick='全选(this)'/th显示名称/th排序/Th函数ID/th菜单可见/th在处理时，先将流水号表和分页条件的条件信息传输给MVC控制器，得到相应的列表数据，整个处理过程可以通过在接口上动态绑定来完成。具体代码截图如下。

以及其中的代码。

tr=getActionHtml(项。ID)；有些动作按钮是脚本生成的，界面如下图。

2)数据分页处理。

一般我们页面显示的数据都不是固定的记录，所以分页也是一个必要的过程，可以提高性能和用户的友好体验。数据分页由Bootstrap的插件Bootstrap Paginator处理。这个控件被广泛使用，是一个强大的分页插件。

引导分页器它的GitHub代码地址是：https://github.com/lyonlai/bootstrap-paginator.

有关其应用示例的介绍，请参考http://lyonlai.github.io/bootstrap-paginator/.

使用此控件时，在介绍了Jquery和Bootstrap样式和类库后，可以通过以下代码行添加和使用它。

script src=' http :/js/bootstrap-paginator . min . js '/script这个控件可以通过处理页面点击和页面更改事件进行分页。

对内容进行分页，我们在HTML代码中添加一个DIV，并声明一个ID为grid_paging的UL元素。代码如下所示。

class=' paging-toolbar ' ul id=' grid _ paging '/ul/div，然后JS中具体的处理代码如下。

在MVC的后台，我们需要在首页获取用户传入的分页条件和表单数据条件，这样我们就可以根据这些参数获取相应的数据并返回给客户端。

由于这些进程都非常通用，我们可以将它们放在基类控制器中进行处理。如果需要特殊处理，我们可以在子类控制器中重写分页函数FindWithPager。

///summary////根据条件查询数据库并返回对象集合(用于分页数据显示)////summary////returns指定对象集合/returns public virtual action result find page(){//检查用户是否有权限。否则，将引发MyDenyAccessException异常base . check authorized(authorizekey . list key)；字符串，其中=getpage condition()；page info page info=getpage info()；ListT list=baseBLL。FindWithPager(其中，pagerInfo)；//Json格式要求{total:22，rows 3360 } }//构造Json格式并传递var result=new { total=page info . record count，rows=list }；返回到sonContentDate(结果)；} GetPagerInfo是获取用户传入的分页参数。记住上面首页处理的URL参数，如下图。

url='/Menu/FindWithPager？page=' page ' rows=' rowsMVC控制器的GetPagerInfo功能的实现代码如下。

///summary////根据Request参数获取分页对象数据////summary///returns/returns受保护的虚拟分页信息getpage info(){ int page index=Request[' page ']==null？1 : int。解析(请求['页面'])；int pageSize=请求[' row ']==null？10 : int。分析(请求['行'])；page info page info=new page info()；寻呼机信息。CurrenetPageIndex=pageIndex寻呼机信息。页面大小=页面大小；返回寻呼机信息；}然后在获取表单条件和分页条件后，就可以对转移到框架中的业务逻辑类进行处理了。这已经是框架底部的支持类别，因此不会再扩展。

ListT list=baseBLL。FindWithPager(其中，pagerInfo)；最终的界面效果如下。

2.插件JSTree。

上一节还改进了树列表的显示。一般来说，如果数据是分层的，可以直观地显示数据的结构。因此，在许多情况下，树列表可以帮助我们对数据进行分类显示。

例如，对于用户数据，我们可以根据用户的组织或角色对用户进行分类，两者都可以通过树形列表直观地显示出来，这样我们就可以轻松找到不同类型的用户列表。

或者对于字典数据或者省市数据，也可以通过树形列表显示。

JS控制的官方地址是https://www.jstree.com/.

网站已经明确说明了JSTree控件的使用说明和案例。一般我们可以直接参考例子来使用。

简单JSTree的使用代码如下。

$(function(){ $(' # jstree _ demo _ div ').jstree()；});对于JSTree的事件，我们一般可以通过下面代码进行绑定事件。

$('#jstree_demo_div ').on('changed.jstree '，函数(e，数据){控制台。日志(数据。选中)；});JSTree一般我们会通过数据数据进行动态绑定，这个数据的数据格式定义如下所示。

{ id : ' string '/必需的父项： ' string '/必需的文本： ' string '/自定义状态：的节点文本图标： ' string '/字符串{ open 3360 boolean//是节点打开禁用：布尔//是节点禁用选定的：布尔值/是节点所选}，li_attr : {} //生成的节点的属性LI _ attr 3: {//生成的A的属性一般情况下，我们通过下面的脚本进行数据的清空和绑定操作

$('#jstree_demo_div ').数据(' jstree '，false)；//清空数据，必须//异步进行数据数据的绑定$.getJSON(url，函数（数据){ $('#jstree_demo_div ').jstree({ ' core ' : { ' data ' : data，' themes ' : { ' responsive ' : false } }).bind('loaded.jstree '，加载的函数)；});如果我们需要给用户提供复选框，设置JSTree的选中状态，界面效果如下所示。

那么一般的初始化函数就需要变化一下，如下代码所示

//带复选框的JSTree的初始化代码$.getJSON(url，函数（数据){控制。jstree({ ' plugins ' :[' checkbox ']，//出现选择框复选框： { cascade: ' '，three_state: false }，//不级联core': { 'data': data，' themes ' : { ' responsive ' : false } } }).bind('loaded.jstree '，加载的函数)；});综合两者，我们可以进一步把JSTree控件的初始化绑定提炼为一个射流研究…的公共函数bindJsTree即可。

//以指定的数据数据，初始化JStree控件//treeName为树差异名称，url为数据源地址，复选框为是否显示复选框，加载了函数为加载完毕的回调函数函数bindstree(treeName，url，复选框，加载的函数){ var control=$(' # ' TreeNAmE)控件。数据(' jstree '，false)；//清空数据，必须var isCheck=引数[2]| | false；//设置检验盒默认值为如果(isCheck) { //复选框树的初始化$.getJSON(url，函数（数据){控制。jstree({ ' plugins ' :[' checkbox ']，//出现选择框复选框： { cascade: ' '，three_state: false }，//不级联core': { 'data': data，' themes ' : { ' responsive ' : false } } }).bind('loaded.jstree '，加载的函数)；});} else { //普通树列表的初始化$.getJSON(url，函数（数据){控制。jstree({ ' core ' : { ' data ' : data，' themes ' : { ' responsive ' : false } }).bind('loaded.jstree '，加载的函数)；});}}因此在页面的绑定JSTree的时候，代码可以简化一下

//初始化组织机构列表函数initDeptTreeview(){ var tree URL='/User/GetMyDeptJsTreeJson？[电子邮件保护][' UserId ']'；bindstree(' jstree _ div '，TreeURl)；//树控件的变化事件处理$('#jstree_div ').on('changed.jstree '，函数(e，data){ var icon=data。节点。图标；loaddatabye(数据。选中)；});}对于复选框的列表，初始化代码如下所示。

//初始化所有该用户的所有功能集合var树URL='/Function/getroleffectionjstreebuser？[电子邮件保护][' UserId ']'；bindstree(' tree _ function '，treeUrl，true)；//角色数据权限，先初始化所有部门树URL='/User/GetMyDeptJsTreeJson？[电子邮件保护][' UserId ']'；bindstree(' tree _ role data '，treeUrl，true)；对于复选框，我们一般是初始化数据，然后在根据需要设置树列表的选中状态，这种不用频繁初始化树，可以有效提高性能和响应体验。

那么我们在初始化树列表后，就需要清空选择项，然后设置我们所需要的选择项即可，具体代码如下所示，注意其中的取消选中全部和检查节点事件的处理。

//初始化角色数据权限集(组织)函数initRoleData(id) {if (id！=' '){ var TreeMenu=' tree _ role data '；$(“#”树形菜单)。jstree(' uncheck _ all ')；//全部取消选中//选中指定的内容$。getjson('/roledata/getroledata list？r=' Math.random() 'roleId=' id，function (json) { $。每个(json，函数(I，item) { $('#' treeMenu)。jstree('check_node '，item)；//选择节点})；});}}保存数据时，我们可以通过获取所选的JSTree节点列表来保存数据。具体代码如下所示。

//保存角色数据权限函数saveroledata(roleid){ var ou list=$(' # tree _ role data ')。jstree(' get _ selected ')；var url='/RoleData/UpdateData？r=' math . random()；var postData={ roleId: roleid，ouList: ouList.join('，')}；$.post(url，postData，function(JSON){ initRoleData(roleid)；}).错误(函数(){showTips('您无权使用此函数，请联系管理员进行处理。');});}

好了，这里基本上显示常规数据，分页数据；JSTree的绑定、事件处理、数据保存等操作都比较完整，希望得到大家的持续支持。我会继续详细介绍Bootstrap开发中涉及的要点以及各种插件的使用，让学习更加具体实用，为我们实价开发项目提供有益的参考。

以上内容是基于边肖介绍的BootStrap Metronic开发框架的经验总结[2]。列表分页处理的相关知识和插件JSTree的使用希望对大家有所帮助。感谢您对我们网站的支持，相信我们会做得更好！