zgq
2021-05-10 b57ff13d0b238a76a23462c1d68039578444a3a9
WebTM/views/»ù´¡×ÊÁÏ/¹«Óûù´¡×ÊÁÏ/test.html
@@ -16,227 +16,109 @@
<!-- å¼•å…¥ layui.js çš„ <script> æ ‡ç­¾æœ€å¥½æ”¾ç½®åœ¨ html æœ«å°¾ -->
<script src="../../../layuiadmin/layui/zgqlayui.js"></script>
<script>
    layui.config({
        base: '../../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
    }).use(['tree', 'index', 'form', 'table', 'element', 'laypage', 'laydate'],function(){
    var $ = layui.$
        , layer = layui.layer
      ,form = layui.form
      ,laypage = layui.laypage
      ,element = layui.element
       , tree = layui.tree
      ,laydate = layui.laydate
      ,util = layui.util;
    <!-- å¼•å…¥ layui.js çš„ <script> æ ‡ç­¾æœ€å¥½æ”¾ç½®åœ¨ html æœ«å°¾ -->
    <script src="../../../layuiadmin/layui/zgqlayui.js"></script>
    <script src="../../../layuiadmin/zgqCustom/zgqCustom.js"></script>
    <script>
        layui.config({
            base: '../../../layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index', //主入口模块
        }).use(['tree', 'index', 'form', 'table', 'element', 'laypage', 'laydate'], function () {
            var $ = layui.$
                , layer = layui.layer
                , form = layui.form
                , laypage = layui.laypage
                , element = layui.element
                , tree = layui.tree
                , laydate = layui.laydate
                , util = layui.util;
    var layout = [
        {
            title: '脚本对象名称',
            treeNodes: true,
            headerClass: 'value_col',
            colClass: 'value_col',
            style: 'width:60%'
        },
        {
            title: '操作',
            headerClass: 'value_col',
            colClass: 'value_col',
            style: 'width:9%',
            render: function (row) {
                var str = '';
                if (row.parentId != null && row.children.length <= 0) {//有父元素没有子元素;
                    str = '<a class="layui-btn layui-btn-danger layui-btn-xs" onclick=del("' + row.id + '","' + row.parentId + '","' + row.children.length + '")><i class="layui-icon">&#xe640;</i></a>'
                } else {
                    ''
            var sWhere = "";
            $.ajax({
                url: GetWEBURL() + '/Gy_Department/LoadTree',
                type: "GET",
                data: { "sWhere": sWhere },
                success: function (result) {
                    var data = result.data;
                    //生成数据对象集合
                    var treeData = LoadTree(data);
                    console.log(treeData);
                    tree.render({
                        elem: '#test12',
                        data: treeData,
                        id: 'treeId',
                        showCheckbox: false,     //是否显示复选框
                        onlyIconControl: false
                    });
                }
                return '<a class="layui-btn layui-btn-normal layui-btn-xs" onclick=add("' + row.id + '","' + row.level + '")><i class="layui-icon">&#xe654;</i></a>' +
                    '<a class="layui-btn layui-btn-warm layui-btn-xs" onclick=change("' + row.id + '","' + row.title + '")><i class="layui-icon">&#xe642;</i></a>' + //列渲染
                    str;
            }
        }
    ];
            });
    var groupList;
        data1 = [{
            title: '江西'
            , id: 1
            , children: [{
                title: '南昌'
                , id: 1000
                , children: [{
                    title: '青山湖区'
                    , id: 10001
                }, {
                    title: '高新区'
                    , id: 10002
                }]
            }, {
                title: '九江'
                , id: 1001
            }, {
                title: '赣州'
                , id: 1002
            }]
        }, {
            title: '广西'
            , id: 2
            , children: [{
                title: '南宁'
                , id: 2000
            }, {
                title: '桂林'
                , id: 2001
            }]
        }, {
            title: '陕西'
            , id: 3
            , children: [{
                title: '西安'
                , id: 3000
            }, {
                title: '延安'
                , id: 3001
            }]
        }]
        var dateTree;
        var sWhere = "";
        $.ajax({
            //url: "http://61.130.49.162:9090/WMSAPI///Web/GetMAXNum",
            //url: GetWEBURL() + '/Gy_Department/LoadTree',
            url: "http://localhost:12761/Gy_Department/LoadTree",
            type: "GET",
            data: { "sWhere": sWhere },
            success: function (result) {
                dateTree = result.data;
                //基本演示
                tree.render({
                    elem: '#test12'
                    , data: dateTree
                    , showCheckbox: true  //是否显示复选框
                    , id: 'demoId1'
                    , isJump: true //是否允许点击节点时弹出新窗口跳转
                    , click: function (obj) {
                        var data = obj.data;  //获取当前点击的节点数据
                        layer.msg('状态:' + obj.state + '<br>节点数据:' + JSON.stringify(data));
                    }
                });
            }, error: function () {
                layer.close(index);
                layer.alert("接口请求失败!", { icon: 5 });
            }
            //按钮事件
            util.event('lay-demo', {
                getChecked: function (othis) {
                    var checkedData = tree.getChecked('treeId'); //获取选中节点的数据
                    layer.alert(JSON.stringify(checkedData), { shade: 0 });
                    console.log(checkedData);
                }
                , setChecked: function () {
                    tree.setChecked('treeId', [12, 16]); //勾选指定节点
                }
                , reload: function () {
                    //重载实例
                    tree.reload('treeId', {
                    });
                }
            });
            //触发事件
            util.event('test-active', {
                'test-form': function () {
                    layer.open({
                        type: 1
                        , resize: false
                        , shadeClose: true
                        , content: ['<ul class="layui-form" style="margin: 10px;">'
                            , '<li class="layui-form-item">'
                            , '<label class="layui-form-label">输入框</label>'
                            , '<div class="layui-input-block">'
                            , '<input class="layui-input" name="field1">'
                            , '</div>'
                            , '</li>'
                            , '<li class="layui-form-item">'
                            , '<label class="layui-form-label">选择框</label>'
                            , '<div class="layui-input-block">'
                            , '<select name="field2">'
                            , '<option value="A">A</option>'
                            , '<option value="B">B</option>'
                            , '<select>'
                            , '</div>'
                            , '</li>'
                            , '<li class="layui-form-item" style="text-align:center;">'
                            , '<button type="submit" lay-submit lay-filter="*" class="layui-btn">提交</button>'
                            , '</li>'
                            , '</ul>'].join('')
                        , success: function (layero) {
                            layero.find('.layui-layer-content').css('overflow', 'visible');
                            form.render().on('submit(*)', function (data) {
                                layer.msg(JSON.stringify(data.field));
                            });
                        }
                    });
                }
            });
        });
        //按钮事件
        util.event('lay-demo', {
            getChecked: function (othis) {
                var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据
                layer.alert(JSON.stringify(checkedData), { shade: 0 });
                console.log(checkedData);
            }
            , setChecked: function () {
                tree.setChecked('demoId1', [12, 16]); //勾选指定节点
            }
            , reload: function () {
                //重载实例
                tree.reload('demoId1', {
                });
            }
        });
        //groupList = data1;
        //layui.treeGird({
        //    elem: '#test12',
        //    spreadable: true,
        //    nodes: groupList,
        //    layout: layout
        //})
  //欢迎信息
  layer.msg('Hello World');
  //输出版本号
  lay('#version').html(layui.v);
  //日期
  laydate.render({
    elem: '#test2'
    ,value: new Date()
    ,isInitValue: true
  });
  //触发事件
  util.event('test-active', {
    'test-form': function(){
      layer.open({
        type: 1
        ,resize: false
        ,shadeClose: true
        ,content: ['<ul class="layui-form" style="margin: 10px;">'
          ,'<li class="layui-form-item">'
            ,'<label class="layui-form-label">输入框</label>'
            ,'<div class="layui-input-block">'
              ,'<input class="layui-input" name="field1">'
            ,'</div>'
          ,'</li>'
          ,'<li class="layui-form-item">'
            ,'<label class="layui-form-label">选择框</label>'
            ,'<div class="layui-input-block">'
              ,'<select name="field2">'
                ,'<option value="A">A</option>'
                ,'<option value="B">B</option>'
              ,'<select>'
            ,'</div>'
          ,'</li>'
          ,'<li class="layui-form-item" style="text-align:center;">'
            ,'<button type="submit" lay-submit lay-filter="*" class="layui-btn">提交</button>'
          ,'</li>'
        ,'</ul>'].join('')
        ,success: function(layero){
          layero.find('.layui-layer-content').css('overflow', 'visible');
          form.render().on('submit(*)', function(data){
            layer.msg(JSON.stringify(data.field));
          });
        }
      });
    }
  });
});
    function tree(data) {
        let map = {};
        let val = [];
        //生成数据对象集合
        data.forEach(it => {
            map[it.department_id] = it;    //department_id为每个节点的id
        })
        //生成结果集
        data.forEach(it => {
            const parent = map[it.pid_department_id];   //pid_department_id为父节点的id
            if (parent) {
                if (!Array.isArray(parent.children)) parent.children = [];
                parent.children.push(it);
            } else {
                val.push(it)
            }
        })
        return val;
    }
</script>
    </script>
</body>
</html>