ace tree和前台表格 的学习笔记

直接代码：

 

bootstrop ace 框架 的树与前台表格（点击树的节点时显示出表格和分页）

实体类：

import com.pcitc.hrsp.commons.model.BizObject;

import java.util.Date;

import java.util.List;

public class MenuInfo extends BizObject {

private String menuId;

private String menuName;

private String menuNameEn;

private String remark;

private String url;

private String pMenuId;

private Integer orderNo;

private String appId;

private String isLeaf;

private String isAppShare;

private String appTag;

private String iconName;

private String createBy;

private Date createDate;

private String modifyBy;

private Date modifyDate;

private String field01;

private String field02;

 

private String text;

private String type;

private String id;

private List<MenuInfo> children;

 

public String getText() {

return text;

}

 

public void setText(String text) {

this.text = text;

}

 

public String getType() {

return type;

}

 

public void setType(String type) {

this.type = type;

}

 

public String getId() {

return id;

}

 

public void setId(String id) {

this.id = id;

}

 

public List<MenuInfo> getChildren() {

return children;

}

 

public void setChildren(List<MenuInfo> children) {

this.children = children;

}

 

public String getMenuId() {

return menuId;

}

 

public void setMenuId(String menuId) {

this.menuId = menuId;

}

 

public String getMenuName() {

return menuName;

}

 

public void setMenuName(String menuName) {

this.menuName = menuName;

}

 

public String getMenuNameEn() {

return menuNameEn;

}

 

public void setMenuNameEn(String menuNameEn) {

this.menuNameEn = menuNameEn;

}

 

public String getRemark() {

return remark;

}

 

public void setRemark(String remark) {

this.remark = remark;

}

 

public String getUrl() {

return url;

}

 

public void setUrl(String url) {

this.url = url;

}

 

public String getpMenuId() {

return pMenuId;

}

 

public void setpMenuId(String pMenuId) {

this.pMenuId = pMenuId;

}

 

public Integer getOrderNo() {

return orderNo;

}

 

public void setOrderNo(Integer orderNo) {

this.orderNo = orderNo;

}

 

public String getAppId() {

return appId;

}

 

public void setAppId(String appId) {

this.appId = appId;

}

 

public String getIsLeaf() {

return isLeaf;

}

 

public void setIsLeaf(String isLeaf) {

this.isLeaf = isLeaf;

}

 

public String getIconName() {

return iconName;

}

 

public void setIconName(String iconName) {

this.iconName = iconName;

}

 

public String getIsAppShare() {

return isAppShare;

}

 

public void setIsAppShare(String isAppShare) {

this.isAppShare = isAppShare;

}

 

public String getAppTag() {

return appTag;

}

 

public void setAppTag(String appTag) {

this.appTag = appTag;

}

 

public String getCreateBy() {

return createBy;

}

 

public void setCreateBy(String createBy) {

this.createBy = createBy;

}

 

public Date getCreateDate() {

return createDate;

}

 

public void setCreateDate(Date createDate) {

this.createDate = createDate;

}

 

public String getModifyBy() {

return modifyBy;

}

 

public void setModifyBy(String modifyBy) {

this.modifyBy = modifyBy;

}

 

public Date getModifyDate() {

return modifyDate;

}

 

public void setModifyDate(Date modifyDate) {

this.modifyDate = modifyDate;

}

 

public String getField01() {

return field01;

}

 

public void setField01(String field01) {

this.field01 = field01;

}

 

public String getField02() {

return field02;

}

 

public void setField02(String field02) {

this.field02 = field01;

}

}

后台方法：

@RequestMapping("/selectTree")

@ResponseBody

public List<MenuInfo> selectTree(HttpServletRequest request,MenuInfo menuInfo) throws Exception {

//后台查询获取方法

List<MenuInfo> a = menuInfoService.getmenuList(menuInfo);

getChildNodes(a);

return a;

}

 

private void getChildNodes( List<MenuInfo> s )

{

if(s.size()>0){

for (MenuInfo menu: s)

{

//递归子节点

menu.setText( menu.getMenuName() );

menu.setType( "folder" );

getChildItems(menu,menu.getMenuId().toString(),menu.getMenuName());

}

}

 

}

 

private void getChildItems( MenuInfo menu, String parentId,String parentName )

{

try {

MenuInfo menuInfo = new MenuInfo();

menuInfo.setpMenuId(parentId);

List<MenuInfo> menuIn = menuInfoService.getmenuList(menuInfo);

if(menuIn.size()>0){

//父节点为“folder”

menu.setText(parentName);

menu.setType("folder" );

MenuInfo menuInfo1 = new MenuInfo();

menuInfo1.setId( parentId );

for ( MenuInfo childPermission : menuIn )

{

getChildItems( childPermission, childPermission.getMenuId( ).toString( ),childPermission.getMenuName( ) );

}

menu.setChildren(menuIn);

 

}else{

//父节点为“item”,获取当前

menu.setText(parentName);

menu.setType("item" );

menu.setId( parentId );

}

} catch (Exception e) {

e.printStackTrace();

}

 

}

前台js：

var sampleData = initiateDemoData();//see below

$(document).ready(function(){

$('#tree2').ace_tree({

dataSource: sampleData['dataSource2'] ,

loadingHTML:'<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>',

'open-icon' : 'ace-icon fa fa-folder-open',

'close-icon' : 'ace-icon fa fa-folder',

'itemSelect' : true,

'folderSelect': true,

'multiSelect': true,

'selected-icon' : 'ace-icon tree-plus',

'unselected-icon' : null,

'folder-open-icon' : 'ace-icon tree-plus',

'folder-close-icon' : 'ace-icon tree-minus'

});

 

//please refer to docs for more info

$('#tree2')

.on('loaded.fu.tree', function(e) {

})

.on('updated.fu.tree', function(e, result) {

})

// 选中节点触发的事件

.on('selected.fu.tree', function(e,data) {

var menuId=data.target.menuId

//前台table的分页方法

layui.use(['laypage','layer'], function(){

var laypage = layui.laypage;

var layer = layui.layer;

//执行一个laypage实例

secend(1,10,menuId);

laypage.render({

elem: 'laypage' //注意，这里的 laypage 是 ID，不用加 # 号

,count: count //数据总数，从服务端得到

,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']

,prev: _gLang.prev_page

,next: _gLang.next_page

,jump: function(obj, first) {

if (!first) {

secend(obj.curr, obj.limit,menuId);

}

}

});

});

})

.on('deselected.fu.tree', function(e) {

})

.on('opened.fu.tree', function(e) {

})

.on('closed.fu.tree', function(e) {

});

 

function secend(pageNo,pageSize,menuId) {

$.ajax({

type: 'post',

async: false,

data: {'menuId': menuId,'pageNo': pageNo,'pageSize': pageSize},

url: ctx + "/menuFunction/selectMenuFuncList",

dataType: "json",

timeout: 5000,

success: function (da) {

if (da.success) {

$("#dataList").empty();

count = da.data.total;

da = da.data.list;

var html = '';

for (var i=0; i<da.length; i++) {

html += '<tr>'+

'<td class="center">' +

' <label class="pos-rel">' +

' <input name="item" type="checkbox" class="ace" value="' + da[i].functionId + '"/><span class="lbl"></span>' +

' </label>' +

'</td>' +

'<td>' + da[i].functionTag + '</td>' +

'<td>' + da[i].functionName + '</td>' +

'<td>' + da[i].remark + '</td>' +

'</tr>';

}

$("#dataList").html(html);

} else {

layer.message(da.msg);

}

}

});

}

 

function initiateDemoData(){

var getTreeJson ;

$.ajax({

type: 'post',

async: false,

data: {'pMenuId': 0},

url: ctx + "/menu/selectTree",

dataType: "json",

timeout: 5000,

success: function (da) {

getTreeJson=da;

}

});

var dataSource2 = function(options, callback){

var $data = null

if(!("text" in options) && !("type" in options)){

$data = getTreeJson;//the root tree

callback({ data: $data });

return;

}

else if("type" in options && options.type == "folder") {

$data = options.children || {};

}

 

if($data != null)//this setTimeout is only for mimicking some random delay

setTimeout(function(){callback({ data: $data });} , parseInt(Math.random() * 500) + 200);

 

}

 

return {'dataSource2' : dataSource2}

}

// 为了出现单选效果

$(".tree-item,.tree-branch").on("click",function(){

 

$(".tree-item,.tree-branch").removeClass("tree-selected");

});

}

html页面：

<div id="laypage" class="pull-right"></div>（分页）

<tbody id="dataList">（显示的表格）