新增添加|修改角色页面

article-add.html

@@ -68,7 +68,7 @@
         </div>
         <div class="layui-form-item">
             <div class="layui-input-block">
-                <button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
+                <button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
                 <button type="reset" class="layui-btn layui-btn-primary">重置</button>
             </div>
         </div>
@@ -93,9 +93,9 @@
             birthdayVerify: [/^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))(\s(([01]\d{1})|(2[0123])):([0-5]\d):([0-5]\d))?$/, '日期格式不正确']
         });
 
-        form.on('submit(edit)', function (data) {
+        form.on('submit(add)', function (data) {
             console.log(data.field);
-            layer.msg("编辑成功！", {icon: 6, time: 1000, anim: 4}, function () {
+            layer.msg("添加成功！", {icon: 6, time: 1000, anim: 4}, function () {
                 parent.layer.close(parent.layer.getFrameIndex(window.name));
             });
             return false;

data/tree.json

@@ -0,0 +1,54 @@
+{
+  "code": 0,
+  "msg": "获取成功",
+  "data": {
+    "trees": [
+      {
+        "name": "用户管理",
+        "value": "xsgl",
+        "checked": true
+      },
+      {
+        "name": "用户组管理",
+        "value": "sbgl",
+        "checked": true,
+        "list": [
+          {
+            "name": "角色管理",
+            "value": "sbgl-sbsjlb",
+            "checked": true,
+            "list": [
+              {
+                "name": "添加角色",
+                "value": "sbgl-sbsjlb-dj",
+                "checked": true
+              },
+              {
+                "name": "角色列表",
+                "value": "sbgl-sbsjlb-yl",
+                "checked": false
+              }
+            ]
+          },
+          {
+            "name": "管理员管理",
+            "value": "sbgl-sbsjlb",
+            "checked": true,
+            "list": [
+              {
+                "name": "添加管理员",
+                "value": "sbgl-sbsjlb-dj",
+                "checked": true
+              },
+              {
+                "name": "管理员列表",
+                "value": "sbgl-sbsjlb-yl",
+                "checked": false
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}

lib/layui/lay/modules/authtree/authtree.js

@@ -0,0 +1,122 @@
+// 节点树
+layui.define(['jquery', 'form'], function (exports) {
+    $ = layui.jquery;
+    form = layui.form;
+
+    obj = {
+        // 渲染 + 绑定事件
+        /**
+         * 渲染DOM并绑定事件
+         * @param  {[type]} dst       [目标ID，如：#test1]
+         * @param  {[type]} trees     [数据，格式：{}]
+         * @param  {[type]} inputname [上传表单名]
+         * @param  {[type]} layfilter [lay-filter的值]
+         * @param  {[type]} openall [默认展开全部]
+         * @return {[type]}           [description]
+         */
+        render: function (dst, trees, opt) {
+            var inputname = opt.inputname ? opt.inputname : 'menuids[]';
+            var layfilter = opt.layfilter ? opt.layfilter : 'checkauth';
+            var openall = opt.openall ? opt.openall : false;
+            $(dst).html(obj.renderAuth(trees, 0, {inputname: inputname, layfilter: layfilter, openall: openall}));
+            form.render();
+            // 备注：如果使用form.on('checkbox()')，外部就无法使用form.on()监听同样的元素了（LAYUI不支持重复监听了）。
+            // form.on('checkbox('+layfilter+')', function(data){
+            // 	/*属下所有权限状态跟随，如果选中，往上走全部选中*/
+            // 	var childs = $(data.elem).parent().next().find('input[type="checkbox"]').prop('checked', data.elem.checked);
+            // 	if(data.elem.checked){
+            // 		/*查找child的前边一个元素，并将里边的checkbox选中状态改为true。*/
+            // 		$(data.elem).parents('.auth-child').prev().find('input[type="checkbox"]').prop('checked', true);
+            // 	}
+            // 	/*console.log(childs);*/
+            // 	form.render('checkbox');
+            // });
+            $(dst).find('.auth-single:first').unbind('click').on('click', '.layui-form-checkbox', function () {
+                var elem = $(this).prev();
+                var checked = elem.is(':checked');
+                var childs = elem.parent().next().find('input[type="checkbox"]').prop('checked', checked);
+                if (checked) {
+                    /*查找child的前边一个元素，并将里边的checkbox选中状态改为true。*/
+                    elem.parents('.auth-child').prev().find('input[type="checkbox"]').prop('checked', true);
+                }
+                /*console.log(childs);*/
+                form.render('checkbox');
+            });
+
+            /*动态绑定展开事件*/
+            $(dst).unbind('click').on('click', '.auth-icon', function () {
+                var origin = $(this);
+                var child = origin.parent().parent().find('.auth-child:first');
+                if (origin.is('.active')) {
+                    /*收起*/
+                    origin.removeClass('active').html('');
+                    child.slideUp('fast');
+                } else {
+                    /*展开*/
+                    origin.addClass('active').html('');
+                    child.slideDown('fast');
+                }
+                return false;
+            })
+        },
+        // 递归创建格式
+        renderAuth: function (tree, dept, opt) {
+            var inputname = opt.inputname;
+            var layfilter = opt.layfilter;
+            var openall = opt.openall;
+            var str = '<div class="auth-single">';
+            layui.each(tree, function (index, item) {
+                var hasChild = item.list ? 1 : 0;
+                // 注意：递归调用时，this的环境会改变！
+                var append = hasChild ? obj.renderAuth(item.list, dept + 1, opt) : '';
+
+                // '+new Array(dept * 4).join('&nbsp;')+'
+                str += '<div><div class="auth-status"> ' + (hasChild ? '<i class="layui-icon auth-icon ' + (openall ? 'active' : '') + '" style="cursor:pointer;">' + (openall ? '&#xe625;' : '&#xe623;') + '</i>' : '<i class="layui-icon auth-leaf" style="opacity:0;">&#xe626;</i>') + (dept > 0 ? '<span>├─ </span>' : '') + '<input type="checkbox" name="' + inputname + '" title="' + item.name + '" value="' + item.value + '" lay-skin="primary" lay-filter="' + layfilter + '" ' + (item.checked ? 'checked="checked"' : '') + '> </div> <div class="auth-child" style="' + (openall ? '' : 'display:none;') + 'padding-left:40px;"> ' + append + '</div></div>'
+            });
+            str += '</div>';
+            return str;
+        },
+        // 获取选中叶子结点
+        getLeaf: function (dst) {
+            var leafs = $(dst).find('.auth-leaf').parent().find('input[type="checkbox"]:checked');
+            var data = [];
+            leafs.each(function (index, item) {
+                // console.log(item);
+                data.push(item.value);
+            });
+            // console.log(data);
+            return data;
+        },
+        // 获取所有选中的数据
+        getAll: function (dst) {
+            var inputs = $(dst).find('input[type="checkbox"]');
+            var data = [];
+            inputs.each(function (index, item) {
+                data.push(item.value);
+            });
+            // console.log(data);
+            return data;
+        },
+        // 获取所有选中的数据
+        getChecked: function (dst) {
+            var inputs = $(dst).find('input[type="checkbox"]:checked');
+            var data = [];
+            inputs.each(function (index, item) {
+                data.push(item.value);
+            });
+            // console.log(data);
+            return data;
+        },
+        // 获取未选中数据
+        getNotChecked: function (dst) {
+            var inputs = $(dst).find('input[type="checkbox"]:not(:checked)');
+            var data = [];
+            inputs.each(function (index, item) {
+                data.push(item.value);
+            });
+            // console.log(data);
+            return data;
+        }
+    }
+    exports('authtree', obj);
+});

role-add.html

@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>添加角色</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <link rel="stylesheet" href="lib/layui/css/layui.css">
+    <link rel="stylesheet" href="css/scroll-bar.css">
+    <link rel="stylesheet" href="css/sub-page.css">
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_693759_wytlyqhtdtj1nhfr.css">
+</head>
+<body>
+<div class="ok-body">
+    <!--面包屑导航区域-->
+    <div class="ok-body-breadcrumb">
+            <span class="layui-breadcrumb">
+                <a><cite>首页</cite></a>
+                <a><cite>常用页面</cite></a>
+                <a><cite>用户列表</cite></a>
+				<a><cite>添加角色</cite></a>
+            </span>
+        <a class="layui-btn layui-btn-small" href="javascript:location.replace(location.href);" title="刷新">
+            <i class="layui-icon layui-icon-refresh"></i>
+        </a>
+    </div>
+    <!--form表单-->
+    <form class="layui-form layui-form-pane ok-form">
+        <div class="layui-form-item">
+            <label class="layui-form-label">角色名</label>
+            <div class="layui-input-block">
+                <input type="text" name="name" placeholder="请输入角色名" autocomplete="off" class="layui-input" lay-verify="required">
+            </div>
+        </div>
+        <div class="layui-form-item">
+            <label class="layui-form-label">备注</label>
+            <div class="layui-input-block">
+                <input type="text" name="remarks" placeholder="请输入备注" autocomplete="off" class="layui-input" lay-verify="required">
+            </div>
+        </div>
+        <div class="layui-form-item">
+            <label class="layui-form-label">权限</label>
+            <div class="layui-input-block">
+                <div id="authTree"></div>
+            </div>
+        </div>
+        <div class="layui-form-item">
+            <div class="layui-input-block">
+                <button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
+                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
+            </div>
+        </div>
+    </form>
+</div>
+<!--js逻辑-->
+<script src="lib/layui/layui.js"></script>
+<script>
+    layui.config({
+        base: 'lib/layui/lay/modules/authtree/'
+    }).extend({
+        authtree: 'authtree',
+    });
+
+    layui.use(['element', 'form', 'jquery', 'laydate', 'authtree'], function () {
+        var element = layui.element;
+        var table = layui.table;
+        var form = layui.form;
+        var $ = layui.jquery;
+        var laydate = layui.laydate;
+        var authtree = layui.authtree;
+
+        $.ajax({
+            url: 'data/tree.json',
+            dataType: 'json',
+            success: function (data) {
+                // 渲染时传入渲染目标ID，树形结构数据（具体结构看样例，checked表示默认选中），以及input表单的名字
+                authtree.render('#authTree', data.data.trees, {
+                    inputname: 'authids[]',
+                    layfilter: 'lay-check-auth',
+                    openall: false
+                });
+            }
+        })
+
+        laydate.render({
+            elem: '#birthday',
+            type: "datetime"
+        });
+
+        form.verify({
+            birthdayVerify: [/^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))(\s(([01]\d{1})|(2[0123])):([0-5]\d):([0-5]\d))?$/, '日期格式不正确']
+        });
+
+        // 监听自定义lay-filter选中状态，PS:layui现在不支持多次监听，所以扩展里边只能改变触发逻辑，然后引起了事件冒泡延迟的BUG，要是谁有好的建议可以反馈我
+        form.on('checkbox(lay-check-auth)', function (data) {
+            console.log(data.field);
+            // 获取所有节点
+            var all = authtree.getAll('#authTree');
+            console.log('all', all);
+            // 获取所有已选中节点
+            var checked = authtree.getChecked('#authTree');
+            console.log('checked', checked);
+            // 获取所有未选中节点
+            var notchecked = authtree.getNotChecked('#authTree');
+            console.log('notchecked', notchecked);
+            // 注意这里：需要等待事件冒泡完成，不然获取叶子节点不准确。
+            setTimeout(function () {
+                // 获取选中的叶子节点
+                var leaf = authtree.getLeaf('#authTree');
+                console.log(leaf);
+            }, 100);
+            return false;
+        });
+
+        form.on('submit(add)', function (data) {
+            console.log(data.field);
+            layer.msg("添加成功！", {icon: 6, time: 1000, anim: 4}, function () {
+                parent.layer.close(parent.layer.getFrameIndex(window.name));
+            });
+            return false;
+        });
+    })
+</script>
+</body>
+</html>

role-edit.html

@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>编辑角色</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <link rel="stylesheet" href="lib/layui/css/layui.css">
+    <link rel="stylesheet" href="css/scroll-bar.css">
+    <link rel="stylesheet" href="css/sub-page.css">
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_693759_wytlyqhtdtj1nhfr.css">
+</head>
+<body>
+<div class="ok-body">
+    <!--面包屑导航区域-->
+    <div class="ok-body-breadcrumb">
+            <span class="layui-breadcrumb">
+                <a><cite>首页</cite></a>
+                <a><cite>常用页面</cite></a>
+                <a><cite>用户列表</cite></a>
+				<a><cite>编辑角色</cite></a>
+            </span>
+        <a class="layui-btn layui-btn-small" href="javascript:location.replace(location.href);" title="刷新">
+            <i class="layui-icon layui-icon-refresh"></i>
+        </a>
+    </div>
+    <!--form表单-->
+    <form class="layui-form ok-form">
+        <div class="layui-form-item">
+            <label class="layui-form-label">角色名</label>
+            <div class="layui-input-block">
+                <input type="text" name="name" placeholder="请输入角色名" autocomplete="off" class="layui-input" lay-verify="required">
+            </div>
+        </div>
+        <div class="layui-form-item">
+            <label class="layui-form-label">备注</label>
+            <div class="layui-input-block">
+                <input type="text" name="remarks" placeholder="请输入备注" autocomplete="off" class="layui-input" lay-verify="required">
+            </div>
+        </div>
+        <div class="layui-form-item">
+            <label class="layui-form-label">权限</label>
+            <div class="layui-input-block">
+                <div id="authTree"></div>
+            </div>
+        </div>
+        <div class="layui-form-item">
+            <div class="layui-input-block">
+                <button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
+                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
+            </div>
+        </div>
+    </form>
+</div>
+<!--js逻辑-->
+<script src="lib/layui/layui.js"></script>
+<script>
+    layui.config({
+        base: 'lib/layui/lay/modules/authtree/'
+    }).extend({
+        authtree: 'authtree',
+    });
+
+    layui.use(['element', 'form', 'jquery', 'laydate', 'authtree'], function () {
+        var element = layui.element;
+        var table = layui.table;
+        var form = layui.form;
+        var $ = layui.jquery;
+        var laydate = layui.laydate;
+        var authtree = layui.authtree;
+
+        $.ajax({
+            url: 'data/tree.json',
+            dataType: 'json',
+            success: function (data) {
+                // 渲染时传入渲染目标ID，树形结构数据（具体结构看样例，checked表示默认选中），以及input表单的名字
+                authtree.render('#authTree', data.data.trees, {
+                    inputname: 'authids[]',
+                    layfilter: 'lay-check-auth',
+                    openall: false
+                });
+            }
+        })
+
+        laydate.render({
+            elem: '#birthday',
+            type: "datetime"
+        });
+
+        form.verify({
+            birthdayVerify: [/^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))(\s(([01]\d{1})|(2[0123])):([0-5]\d):([0-5]\d))?$/, '日期格式不正确']
+        });
+
+        // 监听自定义lay-filter选中状态，PS:layui现在不支持多次监听，所以扩展里边只能改变触发逻辑，然后引起了事件冒泡延迟的BUG，要是谁有好的建议可以反馈我
+        form.on('checkbox(lay-check-auth)', function (data) {
+            console.log(data.field);
+            // 获取所有节点
+            var all = authtree.getAll('#authTree');
+            console.log('all', all);
+            // 获取所有已选中节点
+            var checked = authtree.getChecked('#authTree');
+            console.log('checked', checked);
+            // 获取所有未选中节点
+            var notchecked = authtree.getNotChecked('#authTree');
+            console.log('notchecked', notchecked);
+            // 注意这里：需要等待事件冒泡完成，不然获取叶子节点不准确。
+            setTimeout(function () {
+                // 获取选中的叶子节点
+                var leaf = authtree.getLeaf('#authTree');
+                console.log(leaf);
+            }, 100);
+            return false;
+        });
+
+        form.on('submit(edit)', function (data) {
+            console.log(data.field);
+            layer.msg("编辑成功！", {icon: 6, time: 1000, anim: 4}, function () {
+                parent.layer.close(parent.layer.getFrameIndex(window.name));
+            });
+            return false;
+        });
+    })
+</script>
+</body>
+</html>

user-add.html

@@ -99,7 +99,7 @@
         </div>
         <div class="layui-form-item">
             <div class="layui-input-block">
-                <button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
+                <button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
                 <button type="reset" class="layui-btn layui-btn-primary">重置</button>
             </div>
         </div>
@@ -124,9 +124,9 @@
             birthdayVerify: [/^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))(\s(([01]\d{1})|(2[0123])):([0-5]\d):([0-5]\d))?$/, '日期格式不正确']
         });
 
-        form.on('submit(edit)', function (data) {
+        form.on('submit(add)', function (data) {
             console.log(data.field);
-            layer.msg("编辑成功！", {icon: 6, time: 1000, anim: 4}, function () {
+            layer.msg("添加成功！", {icon: 6, time: 1000, anim: 4}, function () {
                 parent.layer.close(parent.layer.getFrameIndex(window.name));
             });
             return false;