这是/webView/systemMgr\roleMenu.html
菜单列表和功能列表可以增删改。
菜单列表的增改页面。这是/webView/systemMgr/roleMenu_edit.html
功能列表的增改页面。/webView/systemMgr/rolePower_edit.html
先来/webView/systemMgr\roleMenu.html
<body class="easyui-layout" style="display: none">
<div data-options="region:'west',title:'菜单列表',split:true" style="width:500px;" >
<table id="box0"></table>
</div>
<div data-options="region:'center',title:'功能列表'" style="background:#eee;">
<table id="box" ></table>
</div>
<div id="tb0" >
<div>
<!--<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="obj.addMenu(500,500,'systemMgr/roleMenu_edit.html');" id="addMenu">添加</a>-->
<!--<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="obj.editMenu(500,500,'systemMgr/roleMenu_edit.html');" id="editMenu">修改</a>-->
<!--<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="obj.removeMenu()" id="removeMenu">删除</a>-->
</div>
</div>
<div id="tb" >
<div>
<!--<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="obj.addPower(500,500,'systemMgr/rolePower_edit.html');" id="addPower">添加</a>-->
<!--<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="obj.edit(500,500,'systemMgr/rolePower_edit.html');" id="edit">修改</a>-->
<!--<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="obj.remove()" id="remove">删除</a>-->
</div>
</div>
var seletMenuId;
var treeTotalData=[];
var currentParentName=''
$(function () {
setTimeout(function(){
$(".easyui-layout").show();
},10)
//功能
function getColumn(){
var mydata={
powerId:"功能Id",
powerName:"功能名称",
icon:"图标",
powerUrl:"功能路径",
menuId:"菜单Id",
remark:"备注",
createTime:"创建时间",
disableText:"是否禁用",
sort:"排序"
}
var mydata2={
id:'M1',
powerId:"功能Id",
powerName:"功能名称",
powerUrl:"功能路径",
menuId:"菜单Id",
remark:"备注",
createTime:"创建时间",
disableText:"是否禁用"
// icon:"图标",
}
var i=0
var columnObj=[];
var option={};
var myobj
$.each(mydata,function(key,value){
myobj={"field":key,"title":value}
if(key=="icon"){
myobj.formatter=function(value, row, index){
return '<span class="l-btn-icon '+value+'" style="position: static!important;margin:0 0 0 0!important; " ></span>'
}
}
if(key=='remark'){
myobj.formatter=remarkFormater;
}
columnObj.push(myobj);
i++;
})
// option=initGrid("/power/search",'#tb')
option.checkbox=true;
option.columns=new Array(columnObj);
// option.title='菜单管理';
option.data=[mydata2];
return option;
}
//菜单
function getColumnTree(){
var mydata={
menuId:"菜单Id",
menuName:"菜单名称",
sort:"排序",
menuUrl:"菜单路径",
// parentId:"父级节点",
// leaf:"是否叶子节点",
remark:"备注",
createTime:"创建时间",
disableText:"是否禁用",
icon:"图标"
}
var mydata2={
id:'M1',
menuId:"菜单Id",
menuName:"菜单名称",
menuUrl:"菜单路径",
parentId:"父级节点",
leaf:"0",
remark:"备注",
createTime:"创建时间",
disable:"是否禁用状态",
disableText:"是否禁用文字",
icon:"图标",
children:[{
id:'M2',
menuId:"菜单Id1",
menuName:"菜单名称",
menuUrl:"菜单路径",
parentId:"M1",
leaf:1,
remark:"备注",
createTime:"创建时间",
disable:"是否禁用状态",
disableText:"是否禁用文字",
icon:"图标"
},{
id:'M3',
menuId:"菜单Id2",
menuName:"菜单名称",
menuUrl:"菜单路径",
parentId:"M1",
leaf:1,
remark:"备注",
createTime:"创建时间",
disable:"是否禁用状态",
disableText:"是否禁用文字",
icon:"图标"
}
]
}
// treeTotalData=mydata2
var i=0
var columnObj=[];
var option;
var myobj={}
$.each(mydata,function(key,value){
myobj={"field":key,"title":value}
if(key=="menuId"){
myobj.width=150;
}
if(key=='remark'){
myobj.formatter=remarkFormater;
}
columnObj.push(myobj);
i++;
})
option=initGrid("/menu/search",'#tb0')
option.columns=new Array(columnObj);
// option.title='菜单管理';
option.idField='id';
option.treeField="menuId";
option.animate=true;
option.data=[mydata2];
option.onClickRow=function(row){
if(!row)return;
seletMenuId=row.menuId;
if(row.leaf==1){
// alert("dddd")
/**
* 菜单点击叶子节点时。功能列表显示菜单的功能。
*/
var node = $('#box0').treegrid('getParent',seletMenuId);
currentParentName=node.menuName;
console.log("node",node)
$('#box').datagrid({
queryParams:{menuId:seletMenuId}
});
}else{
currentParentName=''
$('#box').datagrid('loadData', { total: 0, rows: [] });
}
}
option.onLoadSuccess=function(row, data){
if(data){
treeTotalData=data;
}
// treeTotalData=mydata2
}
option.onLoadError=function(data){
// alert("onLoadError")
treeTotalData=data.rows;
// treeTotalData=mydata2
}
return option;
}
var obj=new getObj();
obj.htmlName="/power"
obj.options=getColumn();
boxDatagrid(obj.options);
// $("#box").datagrid(getColumn())
$("#box0").treegrid(getColumnTree())
obj.addPower=function(w,h,url,title){
var rows = $('#box0').datagrid('getSelections');
if (rows.length == 1&&rows[0].leaf==1) {
obj.isAdd=true;
showEditWindow(w,h,url,title);
}else{
$.messager.alert('警告', '必须先选择菜单列表的叶子节点!', 'warning');
}
}
obj.removeMenu=function(){
var rows = $('#box0').treegrid('getSelections');
if (rows.length > 0) {
$.messager.confirm('确定操作', '您正在要删除所选的记录吗?', function (flag) {
if (flag) {
var ids ="menuId="+rows[0].menuId;
myAjaxTree("/menu/delById",'GET',ids,"box0")
}
});
} else {
$.messager.alert('提示', '请选择要删除的记录!', 'info');
}
}
obj.addMenu=function(w,h,url,title){
obj.isAdd=true;
showEditWindow(w,h,url,title);
},
obj.removeMenu=function(){
var rows = $('#box0').treegrid('getSelections');
if (rows.length > 0) {
$.messager.confirm('确定操作', '您正在要删除所选的记录吗?', function (flag) {
if (flag) {
var ids ="menuId="+rows[0].menuId;
myAjaxTree("/menu/delById",'GET',ids,"box0")
}
});
} else {
$.messager.alert('提示', '请选择要删除的记录!', 'info');
}
}
obj.editMenu=function(w,h,url,title){
var rows = $('#box0').treegrid('getSelections');
if (rows.length == 1) {
obj.selectItemData=rows[0];
obj.isAdd=false;
showEditWindow(w,h,url,title);
} else {
$.messager.alert('警告', '修改必须或只能选择一行!', 'warning');
}
}
});
然后/webView/systemMgr/rolePower_edit.html
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div class="page-header">
<h2>菜单管理编辑</h2>
</div>
<form id="defaultForm" class="form-horizontal">
<div class="mylist">
<div class="form-group list">
<label class="col-sm-3 control-label">Username</label>
<div class="col-sm-7">
<input type="text" class="form-control" name="username" />
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="toshow4" style="display:none" >
<div type="text" class="form-control" name="parentId" ></div>
<div id="treeview" style="display:none;"/>
</div>
<select class="form-control toshow3" style="display:none" name="leaf" >
<option value="0">否</option>
<option value="1">是</option>
</select>
<textarea rows="4" class="form-control toshow2" name="remark" style="display:none" ></textarea>
<select class="form-control toshow1" style="display:none" name="disable" >
<option value="0">否</option>
<option value="1">是</option>
</select>
<div class="dropdown toshow0 " name="icon" >
<button class="btn btn-default dropdown-toggle " type="button" id="dropdownMenu1" data-toggle="dropdown" >
<a ><span class="iconSpan2"></span></a>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" onclick="getIcon('null');" ><a role="menuitem" class="iconClss "><span class="iconSpan"> null</span></a></li>
<li role="presentation" onclick="getIcon('icon-add');" ><a role="menuitem" class="icon-add iconClss" ><span class="iconSpan">icon-add</span></a></li>
<li role="presentation" onclick="getIcon('icon-search');" ><a role="menuitem" class="icon-search iconClss"><span class="iconSpan">icon-search</span></a></li>
<li role="presentation" onclick="getIcon('icon-edit');" ><a role="menuitem" class="icon-edit iconClss"><span class="iconSpan">icon-edit</span></a></li>
<li role="presentation" onclick="getIcon('icon-remove');" ><a role="menuitem" class="icon-remove iconClss"><span class="iconSpan">icon-remove</span></a></li>
<li role="presentation" onclick="getIcon('icon-reload');" ><a role="menuitem" class="icon-reload iconClss"><span class="iconSpan">icon-reload</span></a></li>
</ul>
</div>
function getIcon(str){
if(str=='null'){
$("#dropdownMenu1").find("a").removeClass()
.end()
.find(".iconSpan2").text(str)
}else{
$("#dropdownMenu1").find("a").removeClass().addClass(str+" iconClss")
.end()
.find(".iconSpan2").text(str)
}
$("#icon").val(str)
}
$(function(){
//var formObj=getFormObj();
var formObj=getFormObjNotEmpty();
var fields={};
var data={
menuId:"菜单Id",
menuName:"菜单名称",
menuUrl:"菜单路径",
parentId:"父级节点",
// leaf:"是否叶子节点",
createTime:"创建时间",
disableText:"是否禁用文字",
icon:"图标",
sort:"排序",
disable:"是否禁用",
remark:"备注"
}
var valueData
if(isAdd){
valueData=data//W.obj.selectItemData//data//window.parent.obj.selectItemData;
}else{
valueData=W.obj.selectItemData//data//window.parent.obj.selectItemData;
}
var myFiledTitle=data//expentObj(data,titleArr);
showHtml();
changeDom("icon",$('.toshow0'),valueData);
changeDom("disable",$('.toshow1'),valueData);
changeDom("remark",$('.toshow2'),valueData)
// changeDom("leaf",$('.toshow3'),valueData)
getIcon(valueData["icon"])
initDomTree()
function initDomTree(){
var nodes= W.treeTotalData
if (!nodes||nodes==undefined||nodes.length==0) {
$("#parentId").parents(".list").hide();
return;
}
changeDomTree("parentId",$('.toshow4'),valueData)
function changeDomTree(box,toshow,mydata){
$('#'+box).after(toshow)
$('#'+box).detach();
toshow.show();
toshow.find("[name=parentId]").attr("id",box)
if(!isAdd){
$('#'+box).text(W.currentParentName);
$('#'+box).attr(box,mydata[box]);
// $('#'+box).html(mydata[box]);
}
}
var defaultData = [
{
text: 'parent1',
href: '#parent1',
tags: ['4'],
nodes: [
{
text: 'Child 1',
href: '#child1',
tags: ['2'],
nodes: [
{
text: 'Grandchild 1',
href: '#grandchild1',
tags: ['0']
},
{
text: 'Grandchild 2',
href: '#grandchild2',
tags: ['0']
}
]
},
{
text: 'Child 2',
href: '#child2',
tags: ['0']
}
]
}
];
function buildDomTree() {
var data = [];
function walk(nodes, data) {
if (!nodes||nodes==undefined||nodes.length==0) { return; }
var childLen=0
$.each(nodes, function (id, node) {//"key ,value"
var obj = {
id: node.id,
text:node.menuName,
menuId:node.menuId
// tags: [node.children.length > 0 ? node.children.length + ' child elements' : '']
};
if(node.children!=undefined){
childLen=node.children.length
if(childLen > 0){
obj.tag=childLen
obj.nodes = [];
walk(node.children, obj.nodes);
}
}
else{
obj.tag=0;
}
data.push(obj);
});
}
walk(W.treeTotalData, data);
return data;
}
var options = {
bootstrap2: false,
showTags: true,
levels: 5,
// showCheckbox:true,
checkedIcon:"glyphicon glyphicon-check",
data: buildDomTree(),
onNodeSelected:function(event, data){
$("#parentId").val(data.text);
$("#parentId").text(data.text);
$("#parentId").attr("parentId",data.menuId);
$("#treeview").hide();
}
};
$('#treeview').treeview(options);
$("#treeview").mouseleave(function(){
$("#treeview").hide();
});
$("#parentId").click(function(){
$("#treeview").show();
});
}
myFormValidation();
function showHtml(){
var ss
var i=0;
$.each(myFiledTitle,function(key,value){
ss=$('.mylist .list:first').clone();
$(".list:eq("+i+") .control-label").html(value+":");
$(".list:eq("+i+") .form-control").attr({"id":key,"name":key})
if(!isAdd){
$(".list:eq("+i+") .form-control").val(valueData[key])
if(key=="menuId"){
$("#"+key).attr("disabled","disabled")
}else{
$("#"+key).removeAttr("disabled");
}
}else{
if(key=="menuId"){
$(".list:eq("+i+")").hide();
}else{
$(".list:eq("+i+")").show();
// $("#"+key).removeAttr("disabled");
}
}
$('.mylist').append(ss);
fields[key]=formObj.sameAs(true)
i++;
})
$('.mylist .list:last').detach();
}
function myFormValidation(){
fields.menuName=formObj.sameAs(false)
fields.sort=formObj.sameAs(false)
// fields.remark=formObj.sameAs(true)
// fields.parentId=formObj.sameAs(true)
// fields.icon=formObj.sameAs(true)
// changeImgDom('codeImg',0);
//
$('#defaultForm').formValidation({
message: '此值无效',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
locale: 'zh_CN',
fields:fields,
onSuccess:function(){
var index=layer.load(2)
var url="/menu/update"
if(isAdd){
url="/menu/add"
}
var mydata=getFromData(data);
mydata.parentId=$("#parentId").attr("parentId")
/**
* box0是菜单列表树的网格容器。
*/
doTreeSubmit(url,mydata,"box0")
}
})
}
})
其实功能编辑和菜单编辑差不多,我就不写了。
其他公共类和easyUi的系列教程里面有。就不写了。