菜鳥编程园地

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1186|回复: 0

layui 实现组织架构方法

[复制链接]

5

主题

7

帖子

24

积分

版主

Rank: 7Rank: 7Rank: 7

积分
24
发表于 2020-8-4 11:09:03 | 显示全部楼层 |阅读模式
html,css,jquery配合Layui treetable开发组织架构
  1.     <button type="button"  class="layui-btn layui-btn-normal "  id="addData"><i class="layui-icon">&#xe654;</i>新增部门</button>
复制代码

  1. //ajax数据提交
  2.        function ajaxSubmi() {            //此处是动态创建 的div,调用方法
  3.            $(".editor").each(function () {
  4.                UE.getEditor($(this).attr("id")).sync();;
  5.            });
  6.            var stuName = $("#date1").val();     //取页面上的id元素值
  7.            var dpn = $("#dpn").val();
  8.            var px = $("#px").val();
  9.            $.ajax({
  10.                type: 'POST',
  11.                url: "/aspx/Organize.aspx?action=add",     //提交需求,加上相关参数到后台c#进行处理
  12.                //data: "dttm =" + stuName , "dpnn=" + dpn,"pxx="+px,
  13.                data: {"dttm":stuName,"dpnn":dpn,"pxx":px},
  14.                dataType: "json",
  15.                success: function (json, textStatus) {             //c#后台,返回处理结果给前端web,再进行判定处理
  16.                    //请求成功处理;
  17.                    if (json[0].flag == "0") {
  18.                        alert("保存成功!");
  19.                          //parent.getTreeLeftMenu();
  20.                          //parent.jsprint("处理成功", "Success");
  21.                    } else if (json[0].flag == "1") {
  22.                        alert ("保存失败");

  23.                    } else if (json[0].flag == "2") {
  24.                        alert("请输入顶级部门名称,再保存!");
  25.                    }

  26.                },
  27.                complete: function (XMLHttpRequest, textStatus) {
  28.                         layer.close(1);
  29.                         $(".show-add-data").addClass("layui-hide");
  30.                         window.location.reload("/aspx/depa.aspx");              //重载当前页面
  31.                }
  32.            });
  33.        }
复制代码
  1. // 渲染表格
  2.         var insTb = treeTable.render({
  3.             elem: '#demoTreeTb',
  4.             url: '/aspx/Organize.aspx?action=select',
  5.             toolbar: true,
  6.             tree: {
  7.                 iconIndex: 2,           // 折叠图标显示在第几列
  8.                 isPidData: true,        // 是否是id、pid形式数据
  9.                 idName: 'Organize_Id',  // id字段名称
  10.                 pidName: 'Organize_ParentId'     // pid字段名称
  11.             },
  12.             cols: [[
  13.                 {type: 'numbers'},
  14.                 { type: 'checkbox', title: '选择' },
  15.                 { field: 'Organize_FullName', title: '名称' },
  16.                
  17.                 {align: 'center', toolbar: '#tbBar', title: '操作', width: 300}
  18.             ]],
  19.             style: 'margin-top:0;'
  20.         });
复制代码



回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|菜鳥编程园地 ( 蜀ICP备20021315号-1 )

GMT+8, 2022-9-27 16:40 , Processed in 0.157435 second(s), 24 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表