最近在写一个需求,一个分类目录,起初是想用递归算法的,后来觉得递归比较耗内存,然后分析了数据库表的设计看到了规律可循,故写了一个不用递归来进行分类,作以记录,方便以后回来看看。
表数据大致是这样,id,menucode,menuname,pmenucode,
解释:目录代码,中文名,父级目录代码,例如有如下数据:
1,1,系统设置,0
2,11,代码维护,1
3,12,系统维护,1
4,13,员工管理,1
5,14,客户管理,1
6,1101,国家代码,11
7,1102,地区代码,11
8,1201,菜单管理,12
9,120101,权限分配,1201
10,1301,员工维护,13
11,1401,客户维护,14
假设有这样的目录的数据,先说明数据结构存值是别人设计,我只负责编码(码农)完成功能,从上面不难看出:
1,系统设置是祖先目录,没有父级所以是0
下面4个11,12,13,14是他的子菜单,而1201还有一个孙菜单。
我在从数据库查询的时候就把数据按升序排序好,这里要说明一下,1->11->1101->12而不是1->11->12->13->14->1101
这里的排序是逐字比较排序而不是比较它们值的大小,所以,我得到的list集合中的数据就已经是如下的排列:
1
11
1101
12
1201
120101
13
1301
14
1401
那么到这里就很好办了,我们不难看出一个规律,1是祖先目录,不做操作,字符长度2就打印一个空格,字符长度4就打印两个空格,字符长度6就打印三个空格。。。以此类推,出来的效果如下图:
接下来说一下我的看法,这个方法主要是利用它存值的一个长度的规律,以及从数据库取出来时就将数据排序好,
而它的缺点也很突出,不灵活,长度已经给死了,2就是2,4就是4,如果2级目录不是两位数,是三位数那这就乱套了,但就目前这里的需求还是可以满足的,希望有做到类似需求的小伙伴,看到我的解法后,能激发出你的灵感,呵呵。
既然知道了缺点就可以完善它,如果后续有时间,我会把完善代码补上,即目录长度不做2,4,6这样的限制。
下面先给出我这个版本的代码,供大家参考。
//打开设置菜单弹框
function editRoleMenu() {
var rows = $("#dg1").datagrid('getSelected');
if(rows != null){
$('#RoleMenuDialog').dialog('open');
$('#RoleMenuDialog').dialog({modal:true});
$.ajax({
url:'editRoleMenu',
type:'POST', //GET
contentType:'application/x-www-form-urlencoded; charset=UTF-8',
data:{"chooseRoleId":rows.id},
dataType:'json',
success:function(data){
var arr = data.list;
var htmls = "<form id='rolemenuForm' method='post'><input type='hidden' name='chooseRoleId' value='"+rows.id+"'>";
$.each(arr, function(index, items) {
if(items.menucode.length == 1){
if(items.menuswitch == "1"){
htmls+="<input type='checkbox' id='chs' name='cks' value='"+items.menucode+"' checked='checked' onclick='selectAlls()'>"+items.menuname+"<br>";
}else{
htmls+="<input type='checkbox' id='chs' name='cks' value='"+items.menucode+"' onclick='selectAlls()'>"+items.menuname+"<br>";
}
}
else if(items.menucode.length == 2){
if(items.menuswitch == "1"){
htmls+=" <input type='checkbox' id='ch"+items.menucode+"' name='cks2' value='"+items.menucode+"' checked='checked' onclick='selectAll2("+items.menucode+")'>"+items.menuname+"<br>";
}else{
htmls+=" <input type='checkbox' id='ch"+items.menucode+"' name='cks2' value='"+items.menucode+"' onclick='selectAll2("+items.menucode+")'>"+items.menuname+"<br>";
}
}
else if(items.menucode.length == 4){
if(items.menuswitch == "1"){
htmls+=" <input type='checkbox' id='ch"+items.menucode+"' name='cks4' value='"+items.menucode+"' checked='checked' onclick='selectAll4("+items.menucode+")'>"+items.menuname+"<br>";
}else{
htmls+=" <input type='checkbox' id='ch"+items.menucode+"' name='cks4' value='"+items.menucode+"' onclick='selectAll4("+items.menucode+")'>"+items.menuname+"<br>";
}
}
else if(items.menucode.length == 6){
if(items.menuswitch == "1"){
htmls+=" <input type='checkbox' id='ch"+items.menucode+"' name='cks6' value='"+items.menucode+"' checked='checked' onclick='selectAll6("+items.menucode+")'>"+items.menuname+"<br>";
}else{
htmls+=" <input type='checkbox' id='ch"+items.menucode+"' name='cks6' value='"+items.menucode+"' onclick='selectAll6("+items.menucode+")'>"+items.menuname+"<br>";
}
}
else if(items.menucode.length == 8){
if(items.menuswitch == "1"){
htmls+=" <input type='checkbox' id='ch"+items.menucode+"' name='cks8' value='"+items.menucode+"' checked='checked'
onclick='selectAll8("+items.menucode+")'>"+items.menuname+"<br>";
}else{
htmls+=" <input type='checkbox' id='ch"+items.menucode+"' name='cks8' value='"+items.menucode+"'
onclick='selectAll8("+items.menucode+")'>"+items.menuname+"<br>";
}
}
else {
}
});
htmls+="</form>";
$('#rolemenus').html(htmls);
}
})
}else{
$.messager.alert('操作提示','请选择一个角色进行设置','info');
}
}
//保存菜单按钮
function setup(){
$("#rolemenuForm").form('submit',{
url:'setRoleMenu',
onSubmit:function(){
return $("#rolemenuForm").form('validate');
},
success:function(res){
if(res == '1'){
$.messager.alert('','设置成功','info',function(r){
$('#RoleMenuDialog').dialog('close');
});
}else{
$.messager.alert('操作提示','哎呦,设置失败了','error');
}
}
});
}
//取消菜单按钮
function reblank(){
$('#RoleMenuDialog').dialog('close');
}
//祖先节点全选或不选复选框
function selectAlls() {
if($('#chs').prop('checked') == true){
$("input[name='cks2']").each(function(){
$(this).prop("checked",true);
});
$("input[name='cks4']").each(function(){
$(this).prop("checked",true);
});
$("input[name='cks6']").each(function(){
$(this).prop("checked",true);
});
$("input[name='cks8']").each(function(){
$(this).prop("checked",true);
});
}else{
$("input[name='cks2']").each(function(){
$(this).prop("checked",false);
});
$("input[name='cks4']").each(function(){
$(this).prop("checked",false);
});
$("input[name='cks6']").each(function(){
$(this).prop("checked",false);
});
$("input[name='cks8']").each(function(){
$(this).prop("checked",false);
});
}
}
//爷节点事件,选中时父节点及其子孙节点全部选中,取消时判断其他爷节点均没选中状态则祖节点取消否则祖节点选中并且父节点及其子孙节点全部取消
function selectAll2(menucode) {
var flag2 = true;
var cks2Value = "";
if($('#ch'+menucode).prop('checked') == true){
$('#chs').prop('checked',true);
$("input[name='cks4']").each(function(){
cks2Value = $(this).attr("value").substr(0,menucode.toString().length);
if(cks2Value == menucode){
$(this).prop('checked',true);
}
});
$("input[name='cks6']").each(function(){
cks2Value = $(this).attr("value").substr(0,menucode.toString().length);
if(cks2Value == menucode){
$(this).prop('checked',true);
}
});
$("input[name='cks8']").each(function(){
cks2Value = $(this).attr("value").substr(0,menucode.toString().length);
if(cks2Value == menucode){
$(this).prop('checked',true);
}
});
}else{
$("input[name='cks4']").each(function(){
cks2Value = $(this).attr("value").substr(0,menucode.toString().length);
if(cks2Value == menucode){
$(this).prop('checked',false);
}
});
$("input[name='cks6']").each(function(){
cks2Value = $(this).attr("value").substr(0,menucode.toString().length);
if(cks2Value == menucode){
$(this).prop('checked',false);
}
});
$("input[name='cks8']").each(function(){
cks2Value = $(this).attr("value").substr(0,menucode.toString().length);
if(cks2Value == menucode){
$(this).prop('checked',false);
}
});
$("input[name='cks2']").each(function(){
if($(this).prop('checked') == true){
flag2 = false;
}
});
if(flag2 == true){
$('#chs').prop('checked',false);
}else{
$('#chs').prop('checked',true);
}
}
}
//父节点事件,选中时子及其孙节点全部选中,取消时判断其他父节点均没选中状态则爷节点取消否则爷节点选中并且子节点及其孙节点全部取消
function selectAll4(menucode) {
var flag4 = true;
var flag42 = true;
var cks4Value = "";
var menucode4 = menucode+"";
if($('#ch'+menucode).prop('checked') == true){
$('#chs').prop('checked',true);
$("input[name='cks2']").each(function(){
cks4Value = $(this).attr("value");
if(cks4Value == menucode4.substr(0,2)){
$(this).prop('checked',true);
}
});
$("input[name='cks6']").each(function(){
cks4Value = $(this).attr("value").substr(0,menucode.toString().length);
if(cks4Value == menucode){
$(this).prop('checked',true);
}
});
$("input[name='cks8']").each(function(){
cks4Value = $(this).attr("value").substr(0,menucode.toString().length);
if(cks4Value == menucode){
$(this).prop('checked',true);
}
});
}else{
$("input[name='cks4']").each(function(){
cks4Value = $(this).attr("value").substr(0,2);
if(cks4Value == menucode4.substr(0,2)){
if($(this).prop('checked') == true){
flag42 = false;
}
}
});
$("input[name='cks6']").each(function(){
cks4Value = $(this).attr("value").substr(0,menucode.toString().length);
if(cks4Value == menucode){
$(this).prop('checked',false);
}
});
$("input[name='cks8']").each(function(){
cks4Value = $(this).attr("value").substr(0,menucode.toString().length);
if(cks4Value == menucode){
$(this).prop('checked',false);
}
});
if(flag42 == true){
$("input[name='cks2']").each(function(){
cks4Value = $(this).attr("value");
if(cks4Value == menucode4.substr(0,2)){
$(this).prop('checked',false);
}else{
if($(this).prop('checked') == true){
flag4 = false;
}
}
});
if(flag4 == true){
$('#chs').prop('checked',false);
}else{
$('#chs').prop('checked',true);
}
}
}
}
//子节点事件
function selectAll6(menucode) {
var flag6 = true;
var flag64 = true;
var flag642 = true;
var cks6Value = "";
var menucode6 = menucode+"";
if($('#ch'+menucode).prop('checked') == true){
$('#chs').prop('checked',true);
$("input[name='cks2']").each(function(){
cks6Value = $(this).attr("value");
if(cks6Value == menucode6.substr(0,2)){
$(this).prop('checked',true);
}
});
$("input[name='cks4']").each(function(){
cks6Value = $(this).attr("value");
if(cks6Value == menucode6.substr(0,4)){
$(this).prop('checked',true);
}
});
$("input[name='cks8']").each(function(){
cks6Value = $(this).attr("value").substr(0,menucode.toString().length);
if(cks6Value == menucode){
$(this).prop('checked',true);
}
});
}else{
$("input[name='cks6']").each(function(){
cks6Value = $(this).attr("value").substr(0,4);
if(cks6Value == menucode6.substr(0,4)){
if($(this).prop('checked') == true){
flag6 = false;
}
}
});
$("input[name='cks8']").each(function(){
cks6Value = $(this).attr("value").substr(0,menucode.toString().length);
if(cks6Value == menucode){
$(this).prop('checked',false);
}
});
if(flag6 == true){
$("input[name='cks4']").each(function(){
cks6Value = $(this).attr("value");
if(cks6Value == menucode6.substr(0,4)){
$(this).prop('checked',false);
}else{
if($(this).attr("value").substr(0,2) == menucode6.substr(0,2)){
if($(this).prop('checked') == true){
flag64 = false;
}
}
}
});
if(flag64 == true){
$("input[name='cks2']").each(function(){
cks6Value = $(this).attr("value");
if(cks6Value == menucode6.substr(0,2)){
$(this).prop('checked',false);
}else{
if($(this).prop('checked') == true){
flag642 = false;
}
}
});
if(flag642 == true){
$('#chs').prop('checked',false);
}else{
$('#chs').prop('checked',true);
}
}
}
}
}
//孙节点事件
function selectAll8(menucode) {
var flag8 = true;
var flag86 = true;
var flag864 = true;
var flag8642 = true;
var cks8Value = "";
var menucode8 = menucode+"";
if($('#ch'+menucode).prop('checked') == true){
$('#chs').prop('checked',true);
$("input[name='cks2']").each(function(){
cks8Value = $(this).attr("value");
if(cks8Value == menucode8.substr(0,2)){
$(this).prop('checked',true);
}
});
$("input[name='cks4']").each(function(){
cks8Value = $(this).attr("value");
if(cks8Value == menucode8.substr(0,4)){
$(this).prop('checked',true);
}
});
$("input[name='cks6']").each(function(){
cks8Value = $(this).attr("value");
if(cks8Value == menucode8.substr(0,6)){
$(this).prop('checked',true);
}
});
}else{
$("input[name='cks8']").each(function(){
cks8Value = $(this).attr("value").substr(0,6);
if(cks8Value == menucode8.substr(0,6)){
if($(this).prop('checked') == true){
flag8 = false;
}
}
});
}
if(flag8 == true){
$("input[name='cks6']").each(function(){
cks8Value = $(this).attr("value");
if(cks8Value == menucode8.substr(0,6)){
$(this).prop('checked',false);
}else{
if($(this).attr("value").substr(0,4) == menucode6.substr(0,4)){
if($(this).prop('checked') == true){
flag86 = false;
}
}
}
});
if(flag86 == true){
$("input[name='cks4']").each(function(){
cks8Value = $(this).attr("value");
if(cks8Value == menucode8.substr(0,4)){
$(this).prop('checked',false);
}else{
if($(this).attr("value").substr(0,2) == menucode6.substr(0,2)){
if($(this).prop('checked') == true){
flag864 = false;
}
}
}
});
if(flag864 == true){
$("input[name='cks2']").each(function(){
cks8Value = $(this).attr("value");
if(cks8Value == menucode8.substr(0,2)){
$(this).prop('checked',false);
}else{
if($(this).prop('checked') == true){
flag8642 = false;
}
}
});
if(flag8642 == true){
$('#chs').prop('checked',false);
}else{
$('#chs').prop('checked',true);
}
}
}
}
}