而数据的显示，是在页面准备完成后，通过Search脚本函数进行处理，处理的时候，先序列号表单的条件和分页的条件信息，传入MVC控制器，获取对应的列表数据，在界面上进行动态绑定即可完成整个处理过程了。具体代码截图如下所示。
而其中的代码
则是通过脚本生成一些操作按钮，界面如下所示。
2）数据分页处理
我们页面显示的数据一般不是固定的记录，因此分页也是很必要的处理，可以提高性能，也可以提高用户的友好体验，其中的数据分页是采用了Bootstrap的插件Bootstrap Paginator进行处理的。这个控件用的很多，是一个很强大的分页插件。
Bootstrap Paginator它的GitHub代码地址为：
它的使用例子介绍，可以参考：
该控件使用的时候，引入Jquery和Bootstrap样式和类库后，通过下面的代码行即可添加使用。
该控件分页可以通过处理page-clicked和page-changed事件进行实现。
分页展示内容，我们通过在HTML代码里面添加一个DIV进行，声明一个ID为grid_paging的UL元素，代码如下所示。
然后具体的JS里面处理代码如下所示。
在MVC的后台，我们需要获取用户在前端页面传入的分页条件和表单数据条件，这样我们就可以根据这些参数，获取到对应的数据返回给客户端了。
由于这些处理都是很通用的，因此我们可以放到基类控制器进行处理，如果需要特殊化处理，再在子类控制器里面重写分页函数FindWithPager即可。
/// 根据条件查询数据库,并返回对象集合(用于分页数据显示)
///
/// 指定对象的集合
public virtual ActionResult FindWithPager()
{
//检查用户是否有权限，否则抛出MyDenyAccessException异常
base.CheckAuthorized(AuthorizeKey.ListKey);
string where = GetPagerCondition();
PagerInfo pagerInfo = GetPagerInfo();
List list = baseBLL.FindWithPager(where,pagerInfo);
//Json格式的要求{total:22,rows:{}}
//构造成Json的格式传递
var result = new { total = pagerInfo.RecordCount,rows = list };
return ToJsonContentDate(result);
}
其中GetPagerInfo就是获取用户传入进来的分页参数，还记得我们上面前端页面处理的URL参数吗，如下所示。
/// 根据Request参数获取分页对象数据
///
///
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 = baseBLL.FindWithPager(where,pagerInfo);
最后的界面效果如下所示
2、插件JSTree
前面小节也提高的树列表的展示，在一般情况下，如果数据有层次的，那么通过树列表展示，可以很直观的显示出它们的结构，因此树列表在很多情况下，可以辅助我们对数据的分类展示。
如对于用户数据来说，我们可以根据用户的组织机构或者角色进行分类，他们两者可以通过树列表进行直观的展示，这样我们在寻找不同类型的用户列表的时候，就很好找了。
或者对于字典数据或者省份城市的数据，一样更可以通过树列表进行展示
JSTree 控件的官方地址为
网站对JSTree控件的使用说明及案例讲解的已经很清晰了，一般情况下，我们直接参考例子就可以使用了。
简单的JSTree使用代码如下所示
对于JSTree的事件，我们一般可以通过下面代码进行绑定事件。
JSTree一般我们会通过JSON数据进行动态绑定，这个JSON的数据格式定义如下所示。
一般情况下，我们通过下面的脚本进行数据的清空和绑定操作
如果我们需要给用户提供复选框，设置JSTree的选中状态，界面效果如下所示。
那么一般的初始化函数就需要变化一下，如下代码所示
综合两者，我们可以进一步把JSTree控件的初始化绑定提炼为一个JS的公共函数bindJsTree即可。
因此在页面的绑定JSTree的时候，代码可以简化一下
对于复选框的列表，初始化代码如下所示。
对于复选框，我们一般是初始化数据，然后在根据需要设置树列表的选中状态，这种不用频繁初始化树，可以有效提高性能和响应体验。
那么我们在初始化树列表后，就需要清空选择项，然后设置我们所需要的选择项即可，具体代码如下所示，注意其中的uncheck_all和check_node事件的处理。
好了，介绍到这里，基本上也把常规的数据展示，数据分页；JSTree的绑定、事件处理，数据保存等操作介绍的相对完整了，希望得到大家的继续支持，我会继续详细介绍Bootstrap开发里面涉及到的要点和各个插件的使用，以便把学习更加具体化，实用化，能够给我们实价开发项目做有用的参考。
以上内容是小编给大家介绍的基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用 的相关知识，希望对大家有所帮助。在此也感谢大家对编程之家网站的支持，相信我们会做的更好！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
相关推荐
前端工程师一般用的是Bootstrap的框架而不是样式，样式一般自己重新定义class类即可，主要样式要随具体情况而定包括位置任何带有class.btn的元素都会继承圆角灰色按钮的默认外观。但是Bootstrap提供了一些选项来定义按钮的样式。<buttontype="button"class="btn">基本
起步导入：<linkrel="stylesheet"href="bootstrap-3.3.7-dist/css/bootstrap.css"><scriptsrc="js/jquery-3.3.1.js"></script><scriptsrc="bootstrap-3.3.7-dist/js/bootstrap.js"></script>屏幕
（1）modal声明一个模态框（2）modal-dialog定义模态框尺寸（3）modal-lg定义大尺寸模态框（4）modal-sm定义小尺寸模态框（5）modal-header（6）modal-body（7）modal-footer<!doctypehtml><html><head><metacharset="utf-8"><title>模态框<itle><linkrel=&quo
图片在Bootstrap版本3中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width:100%;、 height:auto; 和 display:block; 属性，从而让图片在其父元素中更好的缩放。如果需要让使用了 .img-responsive 类的图片水平居
<inputtype="text"class="form-controldatepicker"style="padding:0.375rem0.75rem;"placeholder="开始时间"readonly="true" id="start_time"name="start_time"> $(".datepicke
目录bootstrap-treeview使用小记零、写在前面的话一、功能说明二、特性简述三、实战3.1依赖环境3.2数据源格式3.3Options选项3.4Methods方法3.5Events事件N-2、番外N-1、本文demoN、参考资料bootstrap-treeview使用小记零、写在前面的话p.s.bootst
一、应用http://www.bootcss.com/进入bootstrap4或bootstrap3中文网，想要快速地将Bootstrap应用到你的项目中，有以下两种办法： 1、bootstrap可以在线引用，方法如下：A、CSS将引入Bootstrap样式表的 <link> 标签复制并粘贴到 <head> 中，并放在所有其他样式表之前。<!
第87节：Java中的Bootstrap基础与SQL入门前言复习什么是JQ？:writelessdomore写更少的代码，做更多的事找出所有兄弟：$("div").siblings()基本过滤器：选择器：过滤器$("div:first"):first:找到第一个元素:last:找到最后一个元素:even:找出偶数索引:odd:找出奇叔索引
1.bootstrap表单（1）form声明一个表单域（2）form-inline内联表单域（3）form-horizontal水平排列表单域（4）form-group表单组、包括表单文字和表单控件（5）form-control文本输入框、下拉列表控件样式（6）checkboxcheck-inline多选框样式（7）radioradio-inline单选框样式（8）input-group表单控件组
<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>首页<itle><
嗯。。。以前做ssh。应该是stratusspringhibernate。 然后现在来了一个新的需求。 要用java，bootstrap，oracle，springboot，jquery，mybatis。 开始，我也挺心虚的，但是后来一看，，，其实本没有必要这么虚。。。毕竟。。。这些东西，写的有问题。。。问题在于没有逻辑。 bootstrap，j
表格基本实例为任意 <table> 标签添加 .table 类可以为其赋予基本的样式—少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。
1、问题背景 一般情况下，查询列表有查询条件、查询按钮和重置按钮，输入查询条件，点击查询按钮查询列表等数据；点击重置按钮会将查询条件恢复到原始状态 2、实现源码 <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>Bootstrap-查询按钮和重置按钮<
Bootstrap简介什么是Bootstrap？Bootstrap官网框架：库liblibraryjQuery作为一个框架来讲，提供一套比较便捷的操作DOM的方式把大家都需要的功能预先写好到一些文件这就是一个框架Bootstrap让我们的Web开发更简单，更快捷；注意是Bootstrap不是BootStrap！这是一个词，不是
1.bootstrap图片img-responsive声明响应式图片2.bootstrap字体图标通过字体代替图标，font文件夹需要和css文件夹在同一目录3.bootst导航条（1）navbar声明导航条（2）navbar-default声明默认的导航条样式（3）navbar-inverse声明反白的导航条样式（4）navbar-static-top去掉导航条的圆角（5）n
1.路径导航<!doctypehtml><html><head><metacharset="utf-8"><title>路径导航<itle><linkrel="stylesheet"type="text/css"href="css/bootstrap.min.css"><scripttype="text/ja
问题描述：最近在学习BootStrap，过程中遇到引用glyphicon图标无法显示的问题，经过在百度后该问题已解决。1、首先看一下图标显示失败的页面：2、经过参考大佬们的经验，我找到了解决办法。首先我的BootStrap的css样式表是经过下载之后直接拷贝了其中一个文件到编译器中使用的，没有把所有
BootStrap布局一、BootStrap布局CSS组件主要包括栅格系统、列表组、进度条、icon图标、导航栏等组件。JavaScript插件主要有动画效果、窗体模式、下拉菜单、选项卡等二、网格系统Bootstrap内置了一套响应式、移动优先的流式栅格系统，随着屏幕设备或可视窗口（viewport）尺寸的
1引入所需要的文件2用法
想让bootstrap的table列内容超出部分省略号，要在table上加table-layout:fixed和word-break:break-all，然后在头部thead的th加上宽度百分比，最后在列里加个标签如span，在这个span加上单行超出部分省略号的css：display:inline-block，overflow:hidden，white-space:nowrap，text-overflow:e
