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

 <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>

 //页面初始化
 $(function () {
  initJsTree(); //初始化树
  BindEvent(); //绑定事件处理
  Search(currentPage);//初始化第一页数据
  InitDictItem(); //初始化字典信息
 });

<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>

tr += getActionHtml(item.ID);

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

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

 /// <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);
 } 

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

 /// <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);

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

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

{
 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的初始化代码
 $.getJSON(url, function (data) {
  control.jstree({
  'plugins' : [ "checkbox" ], //出现选择框
  'checkbox': { cascade: "", three_state: false }, //不级联
  'core': {
   'data': data,
   "themes": {
   "responsive": false
   }
  }
  }).bind('loaded.jstree', loadedfunction);
 });

//以指定的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);
 }); 
 }
}

 //初始化组织机构列表
 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);

//初始化角色数据权限集合（组织机构）
 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);//将节点选中 
   });
  });
  }
 }

//保存角色数据权限
 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("您未被授权使用该功能，请联系管理员进行处理。");
  });
 }