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">(显示的表格)

 

 

 

 

很全面的Ace Admin1.3官方文档,包含有最全面的组件及例子,适合急需使用该技术开发的人。 响应式Bootstrap网站后台管理系统模板ace admin,非常不错的轻量级易用的admin后台管理系统,基于Bootstrap3,拥有强大的功能组件以及UI组件,基本能满足后台管理系统的需求,而且能根据不同设备适配显示,而且还有四个主题可以切换。 网页图标全采用FontAwesome,除Bootstrap,jQuery UI使用到的第三方插件有: jQuery 2.0.3 jQuery UI 1.10.3 (Custom Build) Twitter Bootstrap 3.0.0 FontAwesome 3.2.1 Google "Open Sans" Font jQuery Flot Charts 0.8.1 jQuery Sparklines 2.1.2 Easy Pie Chart 1.2.5 jQuery Knob 1.2.0 jQuery Validate 1.11.1 FuelUX 2.3.0 (Spinner & Wizard & Treeview) FullCalendar 1.6.4 jQuery ColorBox 1.4.27 jQuery dataTables 1.9.4 jQuery Chosen 1.0 jQuery Masked Input 1.3.1 jQuery Input Limiter 1.3.1 jQuery AutoSize 1.17.7 Bootstrap Colorpicker Bootstrap Datepicker Bootstrap Timepicker v0.2.3 Bootstrap DateRange Picker 1.2 Bootbox.js 4.0.0 jQuery Gritter 1.7.4 jQuery slimScroll 1.1.1 Spin.js 1.3.0 jQuery UI Touch Punch 0.2.2 Google Code Prettify ExplorerCanvas Mindmup Wysiwyg Editor Toopay Markdown Editor 1.1.4 X-editable 1.4.6 Select2 3.4.2 Bootstrap Tags 2.2.5 jQuery Mobile 1.3.2 (Custom Build) jqGrid 4.5.2 Dropzone.js 3.0 Nestable lists plugin 浏览器兼容: Firefox 5+ Google Chrome 14+ Internet Explorer 8 Internet Explorer 9 Opera 11 Safari 5 Bootstrap兼容: Bootstrap 2.2.x Bootstrap 2.3.x Bootstrap 3.0.x ace admin
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值