js

$(function(){
    layui.use(['layer','form','element']),function () {
        var layer = layui.layer;
        var $ = layui.jquery;
        var form = layui.form;
        var element = layui.element;
    }
    var username = "admin";
    get_action(username);
})
function get_action(username) {
    $.ajax({
        url:"test.php",
        data:{
            username:username,
            type:'get_action'
        },
        success:function (res) {
            var data = eval(res);
            addhtml(data);
            console.log(data);
        }
    })
}
function addhtml(data) {
    var num = 5;
    // var arr= new Array(1,2,3,4,5,6,7,8,9,10,11,12);
    console.log(data);
    var Math_ceil = Math.ceil(data.length/num);
    // var Math_ceil = Math.ceil(arr.length/num);
    var index = 0;
    for(var i=1;i<=Math_ceil;i++){
        index = (i-1)*5;
        $('#div').append('<div id="div'+i+'" class="div_1"></div>');
        var s = data.slice(index,index+num);
        // console.log(s);
        for(var j in s){
            $('#div'+i).append(`<div class="img_div" id="div_img${s[j]['aid']}" oncontextmenu="img_divs(${s[j]['aid']})"><div class="img_div2" onclick="${s[j]['fun']}()"><div><img src="${s[j]['actionimg']}"></div><div class="title_text">${s[j]['actionname']}</div><div></div>`);
        }
    }
}
var username = 'admin';
function tianjia(){
    // 弹窗
    layer.open({
        type:1,
        // type为1可以使用选择器必须将内容层写到body外面;type为0只能使用字符安拼接的标签如:
        content:$("#tab"),
        area:["800px","400px"],
        title:'功能管理',
        maxmin:true,
        // time:2000,
        // 按钮btn属性作为弹出层的按钮;从而去触发另一个事件
        // btn:['确定','取消'],
        // 按钮居中用btnalign其值为c(居中),l(居左),r(居右)
        // btnAlign:'c',
        // 为按钮绑定事件
        // 按钮一绑定事件方法如下:
        yes: function(index,layero){
            sub_action();
            },
        // 按扭二的回调
        // 按钮三和按钮二用同样的方法,绑定事件以此类推
           btn2: function(index, layero){
            layer.msg("按钮重置的回调方法")
        }
    })
    // 获取所有功能
    all_action(username);
}
function all_action(username){
    $.ajax({
        url:"test.php",
        data:{
            username:username,
            type:'all_action'
        },
        success:function (res) {
            var data = eval(res);
            // 执行将数据追加到页面
            addaction(data);
        }
    })
}
// 将动作添加到弹窗
function addaction(data) {
    var str = ""
    for (var value of data){
       console.log(value);
       str +=`
          <div style="float: left;margin-top: 10px;margin-left: 50px;text-align: center">
              <img src="${value['actionimg']}" alt="">
              <p>${value['actionname']}</p>
              <input type="checkbox" value="${value['aid']}" >
          </div>  
       `;
    }
    $("#addIcon").html(str);
}
// 提交动作
function sub_action(){
   var aid = document.getElementsByTagName('input');
   var aidArr = [];
   for(var i =0;i<aid.length;i++){
       aidArr.push(aid[i].value);
   }
   var aidStr = aidArr.join(',');
   if(aidStr){
       $.ajax({
           url:'test.php',
           data:{
               type:'sub_action',
               aidStr:aidStr,
               username:username
           },
           success:function (res) {
               console.log(res);
           }
       })
   }
}