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

直接代码：

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

实体类：

packagecom.pcitc.hrsp.commons.model.mgnt;

importcom.pcitc.hrsp.commons.model.BizObject;

importjava.util.Date;

importjava.util.List;

public classMenuInfo extendsBizObject {

privateString menuId;

privateString menuName;

privateString menuNameEn;

privateString remark;

privateString url;

privateString pMenuId;

privateInteger orderNo;

privateString appId;

privateString isLeaf;

privateString isAppShare;

privateString appTag;

privateString iconName;

privateString createBy;

privateDate createDate;

privateString modifyBy;

privateDate modifyDate;

privateString field01;

privateString field02;

privateString text;

privateString type;

privateString id;

privateList<MenuInfo> children;

publicString getText() {

returntext;

}

public voidsetText(String text) {

this.text= text;

}

publicString getType() {

returntype;

}

public voidsetType(String type) {

this.type= type;

}

publicString getId() {

returnid;

}

public voidsetId(String id) {

this.id= id;

}

publicList<MenuInfo> getChildren() {

returnchildren;

}

public voidsetChildren(List<MenuInfo> children) {

this.children= children;

}

publicString getMenuId() {

returnmenuId;

}

public voidsetMenuId(String menuId) {

this.menuId= menuId;

}

publicString getMenuName() {

returnmenuName;

}

public voidsetMenuName(String menuName) {

this.menuName= menuName;

}

publicString getMenuNameEn() {

returnmenuNameEn;

}

public voidsetMenuNameEn(String menuNameEn) {

this.menuNameEn= menuNameEn;

}

publicString getRemark() {

returnremark;

}

public voidsetRemark(String remark) {

this.remark= remark;

}

publicString getUrl() {

returnurl;

}

public voidsetUrl(String url) {

this.url= url;

}

publicString getpMenuId() {

returnpMenuId;

}

public voidsetpMenuId(String pMenuId) {

this.pMenuId= pMenuId;

}

publicInteger getOrderNo() {

returnorderNo;

}

public voidsetOrderNo(Integer orderNo) {

this.orderNo= orderNo;

}

publicString getAppId() {

returnappId;

}

public voidsetAppId(String appId) {

this.appId= appId;

}

publicString getIsLeaf() {

returnisLeaf;

}

public voidsetIsLeaf(String isLeaf) {

this.isLeaf= isLeaf;

}

publicString getIconName() {

returniconName;

}

public voidsetIconName(String iconName) {

this.iconName= iconName;

}

publicString getIsAppShare() {

returnisAppShare;

}

public voidsetIsAppShare(String isAppShare) {

this.isAppShare= isAppShare;

}

publicString getAppTag() {

returnappTag;

}

public voidsetAppTag(String appTag) {

this.appTag= appTag;

}

publicString getCreateBy() {

returncreateBy;

}

public voidsetCreateBy(String createBy) {

this.createBy= createBy;

}

publicDate getCreateDate() {

returncreateDate;

}

public voidsetCreateDate(Date createDate) {

this.createDate= createDate;

}

publicString getModifyBy() {

returnmodifyBy;

}

public voidsetModifyBy(String modifyBy) {

this.modifyBy= modifyBy;

}

publicDate getModifyDate() {

returnmodifyDate;

}

public voidsetModifyDate(Date modifyDate) {

this.modifyDate= modifyDate;

}

publicString getField01() {

returnfield01;

}

public voidsetField01(String field01) {

this.field01= field01;

}

publicString getField02() {

returnfield02;

}

public voidsetField02(String field02) {

this.field02= field01;

}

}

后台方法：

@RequestMapping("/selectTree")

@ResponseBody

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

//后台查询获取方法

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

getChildNodes(a);

returna;

}

private voidgetChildNodes( 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 voidgetChildItems( 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：

varsampleData = 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) {

varmenuId=data.target.menuId

//前台table的分页方法

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

varlaypage = layui.laypage;

varlayer = 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) {

});

functionsecend(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;

varhtml ='';

for(vari=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);

}

}

});

}

functioninitiateDemoData(){

vargetTreeJson ;

$.ajax({

type:'post',

async:false,

data: {'pMenuId':0},

url:ctx +"/menu/selectTree",

dataType:"json",

timeout:5000,

success:function (da) {

getTreeJson=da;

}

});

vardataSource2 =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页面：

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

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