而数据的显示，是在页面准备完成后，通过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使用代码如下所示
rush:js;">
$(function () { $('#jstree_demo_div').jstree(); });
对于JSTree的事件，我们一般可以通过下面代码进行绑定事件。
rush:js;">
$('#jstree_demo_div').on("changed.jstree",function (e,data) {
console.log(data.selected);
});
JSTree一般我们会通过JSON数据进行动态绑定，这个JSON的数据格式定义如下所示。
rush:js;">
{
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
}
一般情况下，我们通过下面的脚本进行数据的清空和绑定操作
rush:js;">
$('#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的选中状态，界面效果如下所示。
那么一般的初始化函数就需要变化一下，如下代码所示
rush:js;">
//带复选框的JSTree的初始化
代码
$.getJSON(url,function (data) {
control.jstree({
'plugins' : [ "check
Box" ],//出现选择框
'check
Box': { cascade: "",three_state: false },//不级联
'core': {
'data': data,"themes": {
"responsive": false
}
}
}).bind('loaded.jstree',loadedfunction);
});
综合两者，我们可以进一步把JSTree控件的初始化绑定提炼为一个JS的公共函数bindJsTree即可。
rush:js;">
//以指定的Json数据，初始化JStree控件
//treeName为树div
名称，url为数据源地址，check
Box为是否
显示复选框，loadedfunction为加载完毕的回调
函数
function bindJsTree(treeName,url,check
Box,loadedfunction) {
var control = $('#' + treeName)
control.data('jstree',false);//清空数据，必须
var isCheck = arguments[2] || false; //设置check
Box默认值为false
if(isCheck) {
//复选框树的初始化
$.getJSON(url,loadedfunction);
});
}
else {
//普通树列表的初始化
$.getJSON(url,function (data) {
control.jstree({
'core': {
'data': data,loadedfunction);
});
}
}
因此在页面的绑定JSTree的时候，代码可以简化一下
rush:js;">
//初始化组织机构列表
function initDeptTreeview() {
var treeUrl = '/User/GetMyDeptJsTreeJson?userId=@Session["UserId"]';
bindJsTree("jstree_div",treeUrl);
//树控件的变化事件处理
$('#jstree_div').on("changed.jstree",data) {
var icon = data.node.icon;
loadDataByOu(data.selected);
});
}
对于复选框的列表，初始化代码如下所示。
rush:js;">
//初始化所有该
用户的所有
功能集合
var treeUrl = '/Function/GetRoleFunctio
njsTreeByUser?userId=@Session["UserId"]';
bindJsTree("tree_function",treeUrl,true);
//角色数据权限，先初始化所有部门
treeUrl = '/User/GetMyDeptJsTreeJson?userId=@Session["UserId"]';
bindJsTree("tree_roledata",true);
对于复选框，我们一般是初始化数据，然后在根据需要设置树列表的选中状态，这种不用频繁初始化树，可以有效提高性能和响应体验。
那么我们在初始化树列表后，就需要清空选择项，然后设置我们所需要的选择项即可，具体代码如下所示，注意其中的uncheck_all和check_node事件的处理。
rush:js;">
//初始化角色数据权限集合（组织机构）
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的节点选中列表就可以进行数据的保存了，具体代码如下所示。
rush:js;">
//保存角色数据权限
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的使用 的相关知识，希望对大家有所帮助。在此也感谢大家对编程之家网站的支持，相信我们会做的更好！
相关文章
Bootstrip HTML 查询搜索常用格式模版 <form class=&...
如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...
要让两个按钮左右排列，你可以使用 Bootstrap 的网格系统将它...
是的，可以将status设置为布尔类型，这样可以在前端使用复选...
前端工程师一般用的是Bootstrap的框架而不是样式，样式一般自...
起步导入：<linkrel="stylesheet"href="b...
