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">（顯示的表格）