版权声明：转载请联系博主，一般是同意的 https://blog.csdn.net/weixin_43647224/article/details/84237109
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width,initial-scale=1.0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>系统管理</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css">
</head>
<body>
<div class="panel panel-default" id="main">
<div class="form-group">
<div class="panel-heading">
<a role="button" class="btn btn-primary"><i class="fa fa-plus"></i> 新增</a>
<a role="button" class="btn btn-primary"><i class="fa fa-plus"></i> 修改</a>
<a role="button" class="btn btn-primary"><i class="fa fa-plus"></i> 删除</a>
</div>
</div>
<table id="table"></table>
</div>
<div class="panel panel-default" id="modelFrom" style="">
<div class="panel-heading">
新增
</div>
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-2 control-label">
类型
</div>
<label class="radio-inline"><input type="radio" name="type" value="0" /> 目录 </label>
<label class="radio-inline"><input type="radio" checked="" name="type" value="1" /> 菜单 </label>
<label class="radio-inline"><input type="radio" name="type" value="2" /> 按钮 </label>
</div>
<!-- fsfdsdf -->
<div class="form-group">
<div class="col-sm-2 control-label">
菜单名称
</div>
<div class="col-sm-10">
<input type="text" name="name" placeholder="菜单名称或按钮名称" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-sm-2 control-label">
上级菜单
</div>
<div class="col-sm-10">
<input type="text" name="parent_id" readonly="readonly" placeholder="一级菜单" class="form-control" style="cursor: pointer;" />
</div>
</div>
<div id="radio1">
<div class="form-group">
<div class="col-sm-2 control-label">
菜单URL
</div>
<div class="col-sm-10">
<input type="text" name="url" placeholder="菜单URL" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-sm-2 control-label">
授权标识
</div>
<div class="col-sm-10">
<input type="text" name="perms" placeholder="多个用逗号分隔，如：user:list,user:create" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-sm-2 control-label">
排序号
</div>
<div class="col-sm-10">
<input type="number" name="order_num" placeholder="排序号" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-sm-2 control-label">
图标
</div>
<div class="col-sm-10">
<input type="text" name="icon" placeholder="菜单图标" class="form-control" />
<code style="margin-top: 4px; display: block;">获取图标：http://fontawesome.io/icons/</code>
</div>
</div>
</div>
<div id="radio0">
<div class="form-group">
<div class="col-sm-2 control-label">
排序号
</div>
<div class="col-sm-10">
<input type="number" name="order_num" placeholder="排序号" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-sm-2 control-label">
图标
</div>
<div class="col-sm-10">
<input type="text" name="icon" placeholder="菜单图标" class="form-control" />
<code style="margin-top: 4px; display: block;">获取图标：http://fontawesome.io/icons/</code>
</div>
</div>
</div>
<div id="radio2">
<div class="form-group">
<div class="col-sm-2 control-label">
授权标识
</div>
<div class="col-sm-10">
<input type="text" name="perms" placeholder="多个用逗号分隔，如：user:list,user:create" class="form-control" />
</div>
</div>
</div>
<!-- sadasdasdasd -->
<div class="form-group">
<div class="col-sm-2 control-label"></div>
<input type="button" value="确定" class="btn btn-primary" />
<input type="button" value="返回" class="btn btn-warning" />
</div>
</form>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<!-- <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script> -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<!--<script src="http://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap-table/src/bootstrap-table.js"></script> -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.0/extensions/treegrid/bootstrap-table-treegrid.js"></script>
<script src="https://cdn.bootcss.com/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>
<script type="text/javascript">
var $table = $('#table');
var data = JSON.parse('[{"menu_id":1,"parent_id":0,"name":"系统管理","icon":"icon","type":0,"order_num":1,"url":"modules/sys/user.html","perms":"sys:menu:list,sys:menu:info"},{"menu_id":2,"parent_id":0,"name":"字典管理","icon":"icon","type":1,"order_num":1,"url":"modules/sys/user.html","perms":"sys:menu:list,sys:menu:info"},{"menu_id":20,"parent_id":1,"name":"新增系统","icon":"icon","type":3,"order_num":1,"url":"modules/sys/user.html","perms":"sys:menu:list,sys:menu:info"},{"menu_id":21,"parent_id":1,"name":"编辑系统","icon":"icon","type":3,"order_num":1,"url":"modules/sys/user.html","perms":"sys:menu:list,sys:menu:info"},{"menu_id":22,"parent_id":1,"name":"删除系统","icon":"icon","type":3,"order_num":1,"url":"modules/sys/user.html","perms":"sys:menu:list,sys:menu:info"},{"menu_id":33,"parent_id":2,"name":"系统环境","icon":"icon","type":3,"order_num":1,"url":"modules/sys/user.html","perms":"sys:menu:list,sys:menu:info"}]')
$(function() {
$("#modelFrom").hide();
$("a[role='button']").on('click',function(){
$("#modelFrom").show();
$('#main').hide();
});
$("input[type='button']").on('click',function(){
$("#modelFrom").hide();
$('#main').show();
});
// 增加 修改 事件
var radioValue1=$("input[type='radio']:checked").val();
$('#radio0').hide();
$('#radio1').hide();
$('#radio2').hide();
var id="#radio"+radioValue1;
$(id).show();
//类型选择事件
$("input[type='radio']").on('click',function(value){
$('#radio0').hide();
$('#radio1').hide();
$('#radio2').hide();
var radioValue=value.target.defaultValue;
var id="#radio"+radioValue;
$(id).show();
});
// 增加 修改 事件
$table.bootstrapTable({
data:data,
dataType:'jsonp',
columns: [
{
field: 'check',
checkbox: true,
radio:true
},
{
field:'menu_id',
title:'菜单ID'
},
{
field: 'name',
title: '菜单名称'
},
{
field:'icon',
title:'图标',
formatter:'iconFormatter'
},
{
field:'type',
title:'类型',
formatter:'typeFormatter'
},
{
sortable: true,
field:'order_num',
title:'排序号'
},
{
field:'url',
title:'菜单URL'
},
{
field:'perms',
title:'授权标识'
},
],
idField: 'menu_id',//排序id 如不设默认不显示父子级
treeShowField: 'name',
parentIdField: 'parent_id',
singleSelect:true,//单选
height: $(window).height()/2,//自定义高度
onCheck:function(row){
var datas = $table.bootstrapTable('getData');
console.log(row.menu_id);
},
onResetView: function(data) {
// jquery.treegrid.js
$table.treegrid({
initialState: 'collapsed',//设置开闭
treeColumn: 1,//指明第几列数据改为树形
onChange: function() {
$table.bootstrapTable('resetWidth');
}
});
},
});
});
//格式化类型 0：目录 1：菜单 2：按钮'
function typeFormatter(value,row,index){
if (value===0) {
return '<span class="label label-primary">目录</span>';
}else if(value===1){
return'<span class="label label-success">菜单</span>';
}else{
return'<span class="label label-warning">按钮</span>';
}
}
//格式化图标
function iconFormatter(value,row,index){
return '<i class="glyphicon glyphicon-user"></i>';
}
</script>
</html>
