bootstrap-table-treegrid

最新推荐文章于 2021-12-03 20:39:36 发布
最新推荐文章于 2021-12-03 20:39:36 发布
阅读量2.9k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43853787/article/details/87282855
版权
这篇博客介绍了如何利用bootstrap-table-treegrid进行权限管理的前端实现，包括展示树形结构的权限列表，以及添加、修改和删除权限操作的功能。通过JavaScript脚本展示了如何与后台交互，动态加载数据，并提供了相应的事件处理函数。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在这里插入图片描述

前台js脚本

$(function() {
$permissionList = $("#permmanage_copy");

var contextpath = $("#contextpath").val();
$(document).ready(function () {
$(’#permissionList-table’).treegridData ({
id: ‘id’,//变量
parentColumn: ‘pid’,//变量
url: contextpath +"/rest/permission/getpermissionlists",
method: ‘GET’,
contentType: “application/json”,//请求方式（）
ajaxParams: {}, //请求数据的ajax的data属性
expandColumn: null,//在哪一列上面显示展开按钮
striped: true, //是否各行渐变色
sidePagenation:‘server’,
bordered: false, //是否显示边框
expandAll: false, //是否全部展开
columns:
[
{
field: ‘checkBox’,
checkbox: true
},
{
field: ‘id’,
title: ‘序号’,
align: ‘center’
},
{
field: ‘pid’,
title: ‘父菜单id’,
align: ‘center’
},
{
field: ‘name’,
title: ‘菜单名称’,
align: ‘center’
},
/{
field: ‘istype’,
title: ‘权限分类’,
align: ‘center’
},*/
{
field: ‘descpt’,
title: ‘描述’,
align: ‘center’
},
{
field: ‘code’,
title: ‘菜单编号’,
align: ‘center’
},
{
field: ‘page’,
title: ‘路径’,
// formatter: timeFormatter,
align: ‘center’
},
{
field: ‘updateTime’,
title: ‘更新日期’,
formatter: timeFormatter,
align: ‘center’
},

         {
             field:'operate',
             title:'操作',
             formatter: formatterOperate,
             align: 'center'
             
         
         }          
    ]

});
});

function formatterOperate(data, parentNode, parentIndex, tbody){
return ‘<a οnclick="addRow(this)"style=“color: #333;background-color: #dedcdc;padding: 4px 8px;font-size: 14px;text-align: center;vertical-align: middle;border: 1px solid transparent;border-radius: 4px;margin-left:10px”>添加子节点’ +
‘<a οnclick="updRow(this)"style=“color: #333;background-color: #dedcdc;padding: 4px 8px;font-size: 14px;text-align: center;vertical-align: middle;border: 1px solid transparent;border-radius: 4px;margin-left:20px;”>修改’ +
‘<a οnclick="delRow(this)"style=“color: #333;background-color: #dedcdc;padding: 4px 8px;font-size: 14px;text-align: center;vertical-align: middle;border: 1px solid transparent;border-radius: 4px;margin-left:20px;”>删除’;
}

});
//点击增加根节点出现添加节点信息的panel
function addgRow(data){
showContextPanel();
$("#fatherId").hide();
var tdata = $(data).parent();
var treegpid = 0;
$("#name").val("");
/* $("#istype").val("");*/
$("#descpt").val("");
$("#code").val("");
$("#page").val("");
$("#pid").val(treegpid);
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲addpnodeform').….trim(KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲addpnodeform #i….trim(KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲addpnodeform #n….trim(KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲addpnodeform #i….trim(KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲addpnodeform #d….trim(KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲addpnodeform #c….trim(KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲addpnodeform #p….trim($("#addpnodeform #pid").val());

			$.post(contextpath+"/rest/permission/addpermission",{
		//		"id":id,
				"name":addgname,
				/*"istype":addgistype,*/
				"descpt":addgdescpt,
				"code":addgcode,
				"page":addgpage,
				"pid":addgpid
			},function(res){
				if (res.success) {
				    MyConfirm("添加根节点成功！是否返回列表？", function() {
					  $("#permmanage_copy .close").trigger("click");
					  location.reload();
				    });
				  } else {
				    MyAlert(res.message, function() {
				    });
				    return;
				  }
			},"json")
		});

};
//添加
function addRow(data){
var tdata = $(data).parent();
var treegpid = tdata.prev().prev().prev().prev().prev().prev().prev().html().trim();

  showContextPanel();
  $("#fatherId").hide();
//  $("#id").val(treegid);
  $("#name").val("");
  /*$("#istype").val("");*/
  $("#descpt").val("");
  $("#code").val("");
  $("#page").val("");
  $("#pid").val(treegpid);

//提交
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲addpnodeform').….trim(KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲addpnodeform #i….trim(KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲addpnodeform #n….trim(KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲addpnodeform #i….trim(KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲addpnodeform #d….trim(KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲addpnodeform #c….trim(KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲addpnodeform #p….trim($("#addpnodeform #pid").val());
$.post(contextpath+"/rest/permission/addpermission",{
// “id”:id,
“name”:name,
/“istype”:istype,/
“descpt”:descpt,
“code”:code,
“page”:page,
“pid”:pid
},function(res){
if (res.success) {
MyConfirm(“添加成功！是否返回列表？”, function() {
$("#permmanage_copy .close").trigger(“click”);
location.reload();
});
} else {
MyAlert(res.message, function() {
});
return;
}
},“json”)
});
};
//删除
function delRow(data){
var tdata = $(data).parent();
var treegpid = tdata.prev().prev().prev().prev().prev().prev().prev().html().trim();
//判断是否为根节点，根节点不可删
if(treegpid==0){
//alert(“根节点不能删除”);
MyAlert(“根节点不能删除”,function(){return;})
//判断是否为父节点
} else{
MyConfirm(“确定要删除吗？”,function(){
$.post(contextpath + “/rest/permission/delpermission”,
{
“id”:treegpid
},
function(res) {
if (res) {
MyConfirm(“删除成功！是否返回列表？”, function() {
$("#permmanage_copy “).find(”.close").trigger(“click”);
$("#permmanage_copy").find(’#permissionList-table’).bootstrapTable(‘refresh’);
}, function() {
$("#permmanage_copy #title").val("");
$("#permmanage_copy #content").val("");
$("#permmanage_copy .child_list_tr").remove();
attachmentMap = new Map();
$("#permmanage_copy .cover_div").remove();
});
location.reload();
} })
},
function(){
return;
})
}
}
//修改
function updRow(data){

 var tdata = $(data).parent();
 var fatherid = tdata.prev().prev().prev().prev().prev().prev().html().trim();
 var treegpid = tdata.prev().prev().prev().prev().prev().prev().prev().html().trim();
 var name = tdata.prev().prev().prev().prev().prev().html().trim();
/* var istype = tdata.prev().prev().prev().prev().prev().html().trim();*/
 var descpt = tdata.prev().prev().prev().prev().html().trim();
 var code = tdata.prev().prev().prev().html().trim();
 var page = tdata.prev().prev().html().trim();
  showContextPanel();
  if(fatherid==0){
	  $("#fatherId").hide();
  }else{
	  $("#fatherId").show();
  }
  $("#name").val(name);
 /* $("#istype").val(istype); */
  $("#descpt").val(descpt);
  $("#code").val(code);
  $("#page").val(page);
  $('#addpnodeform').formValidationExtend({},function(){
	  
		var addname=$.trim($("#addpnodeform #name").val());
		/*var addistype=$.trim($("#addpnodeform #istype").val());*/
		var adddescpt=$.trim($("#addpnodeform #descpt").val());
		var addcode=$.trim($("#addpnodeform #code").val());
		var addpage=$.trim($("#addpnodeform #page").val());
		var options=$("#fatherid option:selected"); //获取选中的项
		var addpid;
		if(fatherid==0){
			addpid = 0;
		  }else{
			  addpid=$.trim(options.val());
		  }
		debugger;
		$.post(contextpath+"/rest/permission/updpermission",{
			"id":treegpid,
			"pid":addpid,
			"name":addname,
			/*"istype":addistype,*/
			"descpt":adddescpt,
			"code":addcode,
			"page":addpage
		},function(res){
			if(res.success){
				
				MyAlert("修改成功",function(){
				$("#permmanage_copy .close").trigger("click");
				location.reload();
				});
			}else{
				MyAlert(res.message,function(){
				});
				return;
			}
		},"json")
		
	});

}
function showContextPanel(){
$("#permission").show();
$("#permissionpanel").show();
};
$(".close").on(“click”,function(){
hideContextPanel();
});
function hideContextPanel() {
$("#permission").hide();
$("#permissionpanel").hide();
};

  前台jsp页面

权限管理

<div class="fixed-table-toolbar">
	  <div class="bars pull-left">
	    <div id="classifyCode-toolbar" class="btn-group">
		<button id="classifyCode_flash_btn" type="button"
			class="btn btn-default refresh">
			<i class="glyphicon glyphicon-refresh"></i>&nbsp;刷新
		</button>
		<a onclick="addgRow(this)" data-target="#permission" style="color: #333;background-color: #fff;
		border: 1px solid #ccc;border-radius: 4px;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;
		text-align: center;cursor: pointer;">
			<i class="glyphicon glyphicon-plus"></i>&nbsp;添加根节点
		</a>
				
	    </div>
	  </div>
	<div class="pull-right search">
	<input class="form-control" type="text" placeholder="搜索">
	</div>
	</div>
	
<table id="permissionList-table">
	
</table>

<form method="post" id="addpnodeform" class="form-horizontal" 
	onsubmit="javascript:return false;" >
<div class="form-group" id="fatherId">			
			<label for="fatherId" class="col-md-4 control-label input_on ">
				 父级菜单：
			</label>
			<div class="col-md-8">
			<select id="fatherid">
			<option value=1>系统管理</option>
			<option value=5>清单录入管理</option>
			<option value=6>清单统计分析</option>
			<option value=8>清单输出管理</option>
			<option value=15>固定燃烧源</option>
			</select>
   			</div>
    </div>
<div class="form-group">			
			<label for="name" class="col-md-4 control-label input_on ">
				 菜单名称：
			</label>
			<div class="col-md-8">
			<input name="name" id="name" type="text" 
				class="form_input child_input  form-control" required
				data-toggle="tooltip" data-placement="right">
   			</div>
    </div>
    <!-- <div class="form-group">
		<label for="istype" class="col-md-4 control-label input_on ">
			权限分类：
		</label>
		<div class="col-md-8">
		<input name="istype" id="istype" type="text"
			class="form_input child_input  form-control" required
			data-toggle="tooltip"  data-placement="right"placeholder="0">
		</div>
	</div> -->
	
    <div class="form-group">			
			<label for="descpt" class="col-md-4 control-label input_on ">
				 描述：
			</label>
			<div class="col-md-8">
			<input name="descpt" id="descpt" type="text" 
				class="form_input child_input  form-control" required
			data-toggle="tooltip"  data-placement="right">
   			</div>
    </div>
    <div class="form-group">			
			<label for="code" class="col-md-4 control-label input_on ">
				 菜单编号：
			</label>
			<div class="col-md-8">
			<input name="code" id="code" type="text" 
				class="form_input child_input  form-control" required
			data-toggle="tooltip"  data-placement="right">
   			</div>
    </div>
    <div class="form-group">			
			<label for="page" class="col-md-4 control-label input_on ">
				 路径：
			</label>
			<div class="col-md-8">
			<input name="page" id="page" type="text" 
				class="form_input child_input  form-control" required
			data-toggle="tooltip"  data-placement="right">
   			</div>
    </div>
     <div class="form-group" style="display:none;">			
			<label for="pid" class="col-md-4 control-label input_on ">
				 父菜单id：
			</label>
			<div class="col-md-8">
			<input name="pid" id="pid" type="text" 
				class="form_input child_input  form-control" >
   			</div>
    </div> 
<div class="form_buttons" style="margin:70px; padding-left:50px;position: relative;">
				<button id="save" type="submit" class="button ">提交</button>
			</div>

引入的jar包就不说了。

主要的是这个js脚本如下：
jsp引入这个bootstrap-table-treegrid.js脚本，然后引入自己的js脚本事件 就行了

(function ($) {
“use strict”;

$.fn.treegridData = function (options, param) {
    //如果是调用方法
    if (typeof options == 'string') {
        return $.fn.treegridData.methods[options](this, param);
    }
    
    //如果是初始化组件
    options = $.extend({}, $.fn.treegridData.defaults, options || {});
    var target = $(this);
    //得到根节点
    target.getRootNodes = function (data) {
        var result = [];
        $.each(data, function (index, item) {
            if (!item[options.parentColumn]) {
                result.push(item);
            }
        });
        return result;
    };
    var j = 0;
    //递归获取子节点并且设置子节点
    target.getChildNodes = function (data, parentNode, parentIndex, tbody) {
        $.each(data, function (i, item) {
            if (item[options.parentColumn] == parentNode[options.id]) {
                var tr = $('<tr></tr>');
                tr.addClass('treegrid-' + (++j));
                tr.addClass('treegrid-parent-' + parentIndex);
                $.each(options.columns, function (index, column) {
                    var td = $('<td></td>');
                    if (column.formatter != null && column.formatter != undefined) {
                        td.html(column.formatter(item[column.field]));
                    } else {
                        td.html(item[column.field]);
                    }
                    tr.append(td);
                });
                tbody.append(tr);
                target.getChildNodes(data, item, j, tbody)
            }
        });
    };
    target.addClass('table');
    if (options.striped) {
        target.addClass('table-striped');
    }
    if (options.bordered) {
        target.addClass('table-bordered');
    }
    if (options.url) {
        $.ajax({
            type: options.type,
            url: options.url,
            data: options.ajaxParams,
            dataType: "JSON",
            success: function (data, textStatus, jqXHR) {
                //构造表头
                var thr = $('<tr></tr>');
                $.each(options.columns, function (i, item) {
                    var th = $('<th style="padding:10px;text-align:center;"></th>');
                    th.text(item.title);
                    thr.append(th);
                });
                var thead = $('<thead></thead>');
                thead.append(thr);
                target.append(thead);

                //构造表体
                var tbody = $('<tbody></tbody>');
                var rootNode = target.getRootNodes(data);
                $.each(rootNode, function (i, item) {
                    var tr = $('<tr></tr>');
                    tr.addClass('treegrid-' + (++j));
                    $.each(options.columns, function (index, column) {
                        var td = $('<td></td>');
                        if (column.formatter != null && column.formatter != undefined) {
                            td.html(column.formatter(item[column.field]));
                        } else {
                            td.html(item[column.field]);
                        }
                        tr.append(td);
                    });
                    tbody.append(tr);
                    target.getChildNodes(data, item, j, tbody);
                });
                target.append(tbody);
                target.treegrid({
                    expanderExpandedClass: options.expanderExpandedClass,
                    expanderCollapsedClass: options.expanderCollapsedClass
                });
                if (!options.expandAll) {
                    target.treegrid('collapseAll');
                }
            }
        });
    }
    else {
        //也可以通过defaults里面的data属性通过传递一个数据集合进来对组件进行初始化....有兴趣可以自己实现，思路和上述类似
    }
    return target;
};

$.fn.treegridData.methods = {
    getAllNodes: function (target, data) {
        return target.treegrid('getAllNodes');
    },
    //组件的其他方法也可以进行类似封装........
};

$.fn.treegridData.defaults = {
    id: 'id',
    parentColumn: 'pid',
    data: [],    //构造table的数据集合
    type: "GET", //请求数据的ajax类型
    url: null,   //请求数据的ajax的url
    ajaxParams: {}, //请求数据的ajax的data属性
    expandColumn: null,//在哪一列上面显示展开按钮
    expandAll: false,  //是否全部展开
    striped: true,   //是否各行渐变色
    bordered: false,  //是否显示边框
    columns: [],
    expanderExpandedClass: 'glyphicon glyphicon-chevron-down',//展开的按钮的图标
    expanderCollapsedClass: 'glyphicon glyphicon-chevron-right'//缩起的按钮的图标
    
};

})(jQuery);

BootStrap-Table-Treegrid树形表格使用指南
2501_90256529的博客
01-22 1235
null)?=null?limit:10;=null?limit:10;这里持久层查询是用的Spring-Data-Jpa，如果是其他持久层框架，只要查询后返回的JSON数据格式一致就可以了。JSON数据格式如下，parentId为父节点Id，和前面js中设置的一定要对应一样，不然树形结构显示不出来。
bootstrap-table-treegrid.js
01-14
bootstrap-table-treegrid.js
JS组件系列——自己动手扩展BootstrapTable的treegrid功能
weixin_34268753的博客
05-31 570
前言：上篇  JS组件系列——自己动手封装bootstrap-treegrid组件 博主自己动手封装了下treegrid的功能，但毕竟那个组件只是一个单独针对树形表格做的，适用性还比较有限。关注博主的园友应该知道，博主的博客里面写了很多bootstrapTable的扩展，今天打算在直接在bootstrapTable的基础上扩展一个treegrid的功能，很多长期关注博主博客的园友一直在问我怎么在b...
五、bootstrap-Table Treegrid
weixin_30512785的博客
05-26 454
一、bootstrap-Table Treegrid <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ...
bootstraptable treegrid
greenbonus的专栏
08-06 302
<div id="vtable" ></div> 疏忽大意这样写了，应该这样的 <table id="vtable" > </table> 后续加载使用 treegrid extension
bootstrap-table+treegrid实现树形表格
12-10
1、引入 jquery.js、bootstrap-table.js、bootstrap-table-treegrid.js、jquery.treegrid.js 以及相应的 css 文件：bootstrap.css、bootstrap-table.css、jquery.treegrid.css； 2、后台传到前台的 json 必须含有 id...
bootstrap-treegrid实现树形表格.zip
07-24
Bootstrap Treegrid是一款基于Bootstrap框架和JavaScript的插件，用于在网页上展示数据为树形结构的表格。这个插件能够将传统的二维表格扩展为可折叠的树状结构，非常适合处理层次化数据，如组织结构、目录层级或者...
JS组件系列——自己动手封装bootstrap-treegrid组件
weixin_34320159的博客
04-27 249
前言：最近产品需要设计一套相对完整的组织架构的解决方案，由于组织架构涉及到层级关系，在表格里面展示层级关系，自然就要用到所谓的treegrid。可惜的是，一些轻量级的表格组件本身并没有自带树形表格的功能，比如bootstrapTable就没有这个功能，怎么办呢？如果是jqgrid、easyUI的表格，treegrid的效果可以说是轻而易举就能解决，而项目目前用的就是bootstrapTable，不...
bootstrap treegrid
10-21
bootstrap treegrid简单说明以及例子代码 用 visual studio 2010或者以上版本运行 asp.net mvc 3的
JS 组件系列之BootstrapTable的treegrid功能
12-08
上篇给大家介绍了JS 组件系列之 bootstrap treegrid 组件封装过程，下面重点给大家介绍JS 组件系列之BootstrapTable的treegrid功能，需要的的朋友一起学习吧！ 一、效果预览 全部折叠 展开一级 全部展开 二、代码示例 怎么样？效果还行吧。给出js的源码供大家参考。 (function ($) { 'use strict'; var sprintf = function (str) { var args = arguments, flag = true, i = 1; str = str.replace(/%s/g, function
boostrapTable Treegrid树表格
04-29
boostrapTable Treegrid树表格，官网上有,但是资料都不全，亲测可用，一般用于菜单关系和权限设计的Table
bootstrap-treegrid.js
07-23
自己封装的bootstrap-treegrid.js来实现树形菜单
bootstrap-table + treegrid 实现树形表格
qq_21223653的博客
05-27 1056
实现一个树形表格的时候有多种方法：比如把 ztree 的树形直接拼接成表格，或者用强大的 jqgrid 实现，今天介绍一个比较轻量级的实现：使用bootstrap-table + treegrid 。 引入 jquery.js、bootstrap-table.js、bootstrap-table-treegrid.js、jquery.treegrid.js 以及相应的 css 文件：bootstrap.css、bootstrap-table.css、jquery.treegrid.css； 后台传到前台的
BootStrap-Table-Treegrid树形表格使用指南，java序列化的原理
m0_63102527的博客
12-03 7320
其中combotree.js是自己写的一个js文件，用于下拉树显示。下面附有代码。 页面部分代码（页面只需要一个table标签用于存放数据就可以了，可以自定义一些操作表格的按钮，比如增删改）。 新增 修改 删除 JS部分代码，获取数据，渲染表格，其中的字段名需要和实体类中的字段名一样。 var $table = $("#menu_table"); $("#menu_table").bootstrapTable({ url: ‘menu/list’, //表格数据请求地址 toolb
bootstrapTable+treegrid树形表格
qq_40178741的博客
11-20 4457
第一次使用bootstrap-table + treegrid 实现树形表格所遇到的坑 效果入下： data数据： 这里需要有个id和pid,就是下面需要用的idField和treeShowField属性 var data=[{ "name":"状态", "orderBy":1, "description":null, "id":"297ea48b661ed59101661f8eaf150004", "code":"ZT",.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值