devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

layui treeTable

作者：笔触狂放9 | 2024-04-06 00:16:56

赞

踩

layui treetable

layui table结构不能很直观的展示层级信息，所以参考"https://fly.layui.com/extend/treeTable/"组件（layui版本为v2.5.6），修改为树形展示，修改了treeTable.js，保留了一些原table定义；

修改如下：支持reload,post方式拉取数据,参考table配置（操作列支持toolbar,cols结构,checkStatus）,check_mode(0上下级联勾选默认，1单选，2多选[不级联])，open_all(默认展开全部)，level_key（层级字段）,level_start(实际层级最小值，默认为0，第一级展示的时候保证没有左边距)

id,elem必须一致，不过elem加了"#"

缺点：一次拉取所有数据，数据量大的时候不能动态刷新子节点（待改进）

departList.cshtml

  1. @model Web.Admin.Models.DepartListViewModel
  2. @{ 
  3.     Layout = null;
  4. }
  5. <!DOCTYPE html>
  6. <html>
  7. <head>
  8.     <title>部门管理</title>
  9.     <meta name="referrer" content="no-referrer" />
  10.     <link href="/components/layui/css/layui.css" rel="stylesheet" type="text/css" />
  11. </head>
  12. <body>
  13.     <div class="layui-row" id="pic-search">
  14.         <div class="layui-col-md12">
  15.             <div class="layui-card">
  16.                 <div class="layui-card-body">
  17.                     <form class="layui-form" lay-filter="searchForm">
  18.                         <div class="layui-input-inline layui-col-md6">
  19.                             @Html.TextBoxFor(x => x.keyword, new { placeholder = "关键字", @class = "layui-input" })
  20.                         </div>
  21.                         <div class="layui-input-inline layui-col-md3">
  22.                             <button type="button" id="btnSearch" class="layui-btn">查询</button>
  23.                             @if (Model.edit)
  24.                             {
  25.                                 <button type="button" id="btnAdd" class="layui-btn">新增</button>
  26.                             }
  27.                         </div>
  28.                     </form>
  29.                 </div>
  30.             </div>
  31.         </div>
  32.     </div>
  33.     <div id="data-list" style="margin:10px 10px 0px;">
  34.         <table class="layui-table layui-form" id="departTable" lay-filter="table"></table>
  35.     </div>
  36.     <div id="dlg-edit" style="display:none;padding:20px 30px 0 0;">
  37.         <form class="layui-form" lay-filter="editForm">
  38.             <div class="layui-form-item">
  39.                 <label class="layui-form-label">名称</label>
  40.                 <div class="layui-input-block">
  41.                     <input type="text" name="dpname" lay-verify="required" autocomplete="off" placeholder="机构名称不能为空" class="layui-input">
  42.                 </div>
  43.             </div>
  44.             <div class="layui-form-item">
  45.                 <label class="layui-form-label">院校</label>
  46.                 <div class="layui-input-block">
  47.                     <select name="parentid"></select>
  48.                 </div>
  49.             </div>
  50.             <div class="layui-form-item">
  51.                 <label class="layui-form-label">排序</label>
  52.                 <div class="layui-input-block">
  53.                     <input type="number" value="0" min="0" name="displayorder" autocomplete="off" lay-verify="required|number" class="layui-input">
  54.                 </div>
  55.             </div>
  56.             <div class="layui-form-item">
  57.                 <label class="layui-form-label">备注</label>
  58.                 <div class="layui-input-block">
  59.                     <textarea name="remark" placeholder="请输入内容" class="layui-textarea"></textarea>
  60.                 </div>
  61.             </div>
  62.         </form>
  63.     </div>
  64.     <script type="text/html" id="toobar">
  65.         <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  66.         @if (Model.edit)
  67.         {
  68.         <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
  69.         <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  70.         }
  71.     </script>
  72.     <script src="/scripts/jquery.js"></script>
  73.     <script src="/components/layui/layui.js"></script>
  74.     <script>
  75.         layui.config({
  76.             base: "../../../components/layui/"//基于当前页面，查找treeTable.js文件所在目录
  77.         });
  78.  
  79.         //获取选择的项
  80.         function getChecked() {
  81.             return layui.treeTable.checkStatus("departTable");
  82.         }
  83.  
  84.         function getQueryParas() {
  85.             return layui.form.getValue("searchForm");
  86.         }
  87.  
  88.         function search() {
  89.             var index = layui.layer.load(1);//开启进度条
  90.             layui.treeTable.reload('departTable', {
  91.                 where: getQueryParas(),
  92.                 done: function (res) {
  93.                     layer.close(index);
  94.                 }
  95.             });
  96.         }
  97.  
  98.         function openDetail(data) {
  99.             showEditDlg({
  100.                 title: "查看",
  101.                 btn: ["关闭"],
  102.                 success: function () {
  103.                     layui.form.val("editForm", data);
  104.                 },
  105.                 yes: function (index) {
  106.                     layui.layer.close(index);
  107.                 }
  108.             }, 2);
  109.         }
  110.  
  111.         function showEditDlg(option, m) {
  112.             var index = layui.layer.load(1);
  113.             $.get("/admin/user/GetTopDepartList", function (data) {
  114.                 var dd = $("#dlg-edit select[name='parentid']").empty();
  115.                 if (m == 2) {
  116.                     //查看
  117.                     $("#dlg-edit").addClass("layui-disabled");
  118.                 }
  119.                 else {
  120.                     $("#dlg-edit").removeClass("layui-disabled");
  121.                     if (m == 0) {
  122.                         //重置表单
  123.                         layui.form.val("editForm", $("#dlg-edit").data("default"));
  124.                         //新增
  125.                         dd.prop("disabled", false);
  126.                     }
  127.                     else if (m == 1) {
  128.                         //编辑
  129.                         dd.prop("disabled", true);
  130.                     }
  131.                 }
  132.                 dd.append("<option value=\"0\">顶级单位</option>");
  133.                 if (data && data.length) {
  134.                     $.each(data, function (i, o) {
  135.                         dd.append($("<option>").attr("value", o.dpid).text("　" + o.dpname));
  136.                     });
  137.                     dd.val(data[0].dpid);
  138.                 }
  139.                 layui.form.render("select", "editForm");
  140.                 layui.layer.close(index);
  141.                 var opt = $.extend({
  142.                     type: 1,
  143.                     shadeClose: false,
  144.                     btnAlign: 'c',
  145.                     shade: 0.3,
  146.                     maxmin: false,
  147.                     area: ['600px', '400px'],
  148.                     content: $("#dlg-edit")
  149.                 }, option);
  150.                 layui.layer.open(opt);
  151.             });
  152.         }
  153.         @if(Model.edit)
  154.         {
  155.          <text>
  156.          function addDepart() {
  157.             showEditDlg({
  158.                 title: "新增机构",
  159.                 btn: ["确定", "取消"],
  160.                 yes: function (index) {
  161.                     data = layui.form.getValue("editForm");
  162.                     $.post("/admin/user/saveDepart", data, function (rsp) {
  163.                         if (rsp.success) {
  164.                             layui.layer.close(index);
  165.                             layui.layer.msg("保存成功！", { time: 1500}, function () {
  166.                                 search();
  167.                             });
  168.                         }
  169.                         else {
  170.                             layui.layer.alert(rsp.message);
  171.                         }
  172.                   });
  173.                 }
  174.             },0);
  175.          }
  176.  
  177.         function updateDepart(data) {
  178.             showEditDlg({
  179.             title: "修改机构",
  180.                 btn: ["确定", "取消"],
  181.                 success: function () {
  182.                     layui.form.val("editForm", data);
  183.                 },
  184.                 yes: function (index) {
  185.                     data = $.extend(data, layui.form.getValue("editForm"));
  186.                     $.post("/admin/user/saveDepart", data, function (rsp) {
  187.                         if (rsp.success) {
  188.                             layui.layer.close(index);
  189.                             layui.layer.msg("保存成功！", { time: 1500 }, function () {
  190.                                 search();
  191.                             });
  192.                         }
  193.                         else {
  194.                             layui.layer.alert(rsp.message);
  195.                         }
  196.                     });
  197.                 }
  198.             },1);
  199.         }
  200.  
  201.         function delDepart(dp) {
  202.             layui.layer.confirm("确定要删除" + dp.dpname + "吗？", function (idx) {
  203.                 $.get("/admin/user/DelDepart", { dpid: dp.dpid }, function (rsp) {
  204.                     if (rsp.success) {
  205.                         layui.layer.close(index);
  206.                         layui.layer.msg("操作成功！", { time:1500}, function () {
  207.                             search();
  208.                         });
  209.                     }
  210.                     else {
  211.                         layui.layer.alert(rsp.message);
  212.                     }
  213.                 });
  214.             });
  215.         }</text>
  216.         }
  217.  
  218.         layui.use(["treeTable", "form", "layer", "laytpl", "upload"], function () {
  219.             var layer = layui.layer;
  220.             var index = layer.load(1);//开启进度条
  221.             layui.treeTable.render({
  222.                 elem: '#departTable',//table id
  223.                 url: '/admin/user/SearchDepartList',
  224.                 method: 'POST', //方式
  225.                 cellMinWidth: 120,
  226.                 even: true, //开启隔行背景
  227.                 id: 'departTable',
  228.                 top_value: "0",
  229.                 primary_key: "dpid",
  230.                 parent_key: 'parentid',
  231.                 level_key: 'layer',
  232.                 level_start: 1,
  233.                 height: 'full-200',
  234.                 icon_key: 'dpname',
  235.                 is_checkbox: true,
  236.                 check_mode:@Model.checkMode,
  237.                 checked: {
  238.                     key: 'dpid',
  239.                 },
  240.                 open_all: true,
  241.                 done: function (res, curr, count) {
  242.                     layer.close(index);//关闭
  243.                 },
  244.                 cols: [[
  245.                     {
  246.                         key: 'dpname',
  247.                         title: '名称',
  248.                         width: "200px"
  249.                     },
  250.                     {
  251.                         key: 'addtime',
  252.                         title: '创建时间',
  253.                         align: 'center',
  254.                         width: "150px"
  255.                     },
  256.                     {
  257.                         key: 'remark',
  258.                         title: '备注',
  259.                         width: "200px"
  260.                     },
  261.                     {
  262.                         title: '操作',
  263.                         align: 'center',
  264.                         toolbar: '#toobar',
  265.                         width: "200px"
  266.                     }]]
  267.             });
  268.  
  269.             layui.treeTable.on('tool(table)', function (obj) {
  270.                 var data = obj.data, layEvent = obj.event;
  271.                 if (layEvent === 'detail') {
  272.                     openDetail(data);
  273.                 }
  274.                 @if (Model.edit)
  275.                 {
  276.                     <text>if (layEvent === 'update') {
  277.                     updateDepart(data);
  278.                 }
  279.                 if (layEvent === 'del') {
  280.                     delDepart(data);
  281.                 }</text>
  282.                 }
  283.             });
  284.             $("#dlg-edit").data("default", layui.form.getValue("editForm"));
  285.             search();
  286.         });
  287.  
  288.         $(function () {
  289.             $("#btnSearch").click(search);
  290.             @if (Model.edit)
  291.             { 
  292.             <text>$("#btnAdd").click(addDepart);</text>
  293.             }
  294.         });
  295.     </script>
  296. </body>
  297. </html>

controller

  1. namespace Web.Admin.Controllers
  2. {
  3.     /// <summary>
  4.     /// 后台用户控制器类
  5.     /// </summary>
  6.     public partial class UserController : BaseAdminController
  7.     {
  8.         /// <summary>
  9.         /// 部门管理
  10.         /// </summary>
  11.         /// <returns></returns>
  12.         public ActionResult DepartList(string keyword,bool edit = true,int mode = 0)
  13.         {
  14.             DepartListViewModel model = new DepartListViewModel();
  15.             model.keyword = keyword;
  16.             model.edit = edit;
  17.             model.checkMode = mode;
  18.             return View(model);
  19.         }
  20.  
  21.         /// <summary>
  22.         /// 查询单位，属性结构显示
  23.         /// </summary>
  24.         /// <param name="keyword"></param>
  25.         /// <returns></returns>
  26.         public JsonResult SearchDepartList(string keyword)
  27.         {
  28.             return ToJson(Users.SearchDepartment(keyword), JsonRequestBehavior.AllowGet);
  29.         }
  30.  
  31.         /// <summary>
  32.         /// 获取顶级单位信息
  33.         /// </summary>
  34.         /// <returns></returns>
  35.         public JsonResult GetTopDepartList()
  36.         {
  37.             return ToJson(Users.SearchDepartment(null,0), JsonRequestBehavior.AllowGet);
  38.         }
  39.  
  40.         public JsonResult SaveDepart(SmartPig_Depart depart)
  41.         {
  42.             depart.addtime = DateTime.Now;
  43.             depart.adduid = WorkContext.Uid;
  44.             int result = Users.SaveDepart(depart);
  45.             if (result == -1)
  46.             {
  47.                 return Json(JsonResponse.Fail("父级不存在，请重新选择！"));
  48.             }
  49.             else if (result == -2)
  50.             {
  51.                 return Json(JsonResponse.Fail("机构名称已存在！"));
  52.             }
  53.             else
  54.             {
  55.                 return Json(JsonResponse.OK(null));
  56.             }
  57.         }
  58.  
  59.         public JsonResult DelDepart(int dpid)
  60.         {
  61.             int result = Users.DeleteDepart(dpid);
  62.             if (result == -1)
  63.             {
  64.                 return Json(JsonResponse.Fail("部门中有成员，不能执行删除操作！"), JsonRequestBehavior.AllowGet);
  65.             }
  66.             else if (result == -2)
  67.             {
  68.                 return Json(JsonResponse.Fail("部门仓库不为空！"), JsonRequestBehavior.AllowGet);
  69.             }
  70.             else
  71.             {
  72.                 return Json(JsonResponse.OK(null), JsonRequestBehavior.AllowGet);
  73.             }
  74.         }
  75.  
  76.         /// <summary>
  77.         /// 输出Json格式
  78.         /// </summary>
  79.         /// <param name="data"></param>
  80.         /// <param name="jsonRequestBehavior"></param>
  81.         /// <returns></returns>
  82.         protected JsonResult ToJson(object data,JsonRequestBehavior jsonRequestBehavior)
  83.         {
  84.             return new JsonNetResult(data, jsonRequestBehavior, CommonHelper._jsonSettings);
  85.         }
  86.     }
  87. }

JsonNetResult.cs(日期转换)

  1. public class JsonNetResult : JsonResult
  2. {
  3. 	const string JsonType = "application/json";
  4. 	private JsonSerializerSettings _settings = null;
  5.  
  6. 	public JsonNetResult()
  7. 	{
  8. 		this.ContentType = "application/json";
  9. 	}
  10.  
  11. 	public JsonNetResult(object data, 
  12. 		JsonRequestBehavior jsonRequestBehavior = JsonRequestBehavior.AllowGet,
  13. 		JsonSerializerSettings settings = null,
  14. 		Encoding contentEncoding = null, 
  15. 		string contentType = JsonType)
  16. 	{
  17. 		this.Data = data;
  18. 		_settings = settings;
  19. 		this.JsonRequestBehavior = jsonRequestBehavior;
  20. 		if (contentEncoding != null)
  21. 		{
  22. 			this.ContentEncoding = contentEncoding;
  23. 		}
  24. 		this.ContentType = string.IsNullOrWhiteSpace(contentType) ? JsonType : contentType;
  25. 	}
  26.  
  27. 	public override void ExecuteResult(ControllerContext context)
  28. 	{
  29. 		if (context == null)
  30. 			throw new ArgumentNullException("context");
  31.  
  32. 		var response = context.HttpContext.Response;
  33.  
  34. 		response.ContentType = string.IsNullOrEmpty(ContentType) ? ContentType : JsonType;
  35.  
  36. 		if (ContentEncoding != null)
  37. 			response.ContentEncoding = ContentEncoding;
  38.  
  39. 		if (Data == null)
  40. 			return;
  41.  
  42. 		// If you need special handling, you can call another form of SerializeObject below
  43. 		var serializedObject = JsonConvert.SerializeObject(Data, Formatting.None, _settings);
  44. 		response.Write(serializedObject);
  45. 	}
  46. }

CommonHelper.cs

  1. public static JsonSerializerSettings _jsonSettings;
  2.  
  3. public static readonly System.Web.Script.Serialization.JavaScriptSerializer serializer = null;
  4.  
  5. public static readonly DateTime EpochTime = new DateTime(1970,1,1);
  6.  
  7. public static readonly char[] splitor = new char[] { (char)31};
  8.  
  9. public static readonly char[] spaceSplitor = new char[] { ' ' };
  10.  
  11. public const string Success = "SUCCESS";
  12.  
  13. static CommonHelper()
  14. {
  15. 	IsoDateTimeConverter datetimeConverter = new IsoDateTimeConverter();
  16. 	datetimeConverter.DateTimeFormat = "yyyy-MM-dd HH:mm:ss";
  17.  
  18. 	_jsonSettings = new JsonSerializerSettings();
  19. 	_jsonSettings.MissingMemberHandling = MissingMemberHandling.Ignore;
  20. 	_jsonSettings.NullValueHandling = NullValueHandling.Ignore;
  21. 	_jsonSettings.ReferenceLoopHandling = ReferenceLoopHandling.Ignore;
  22. 	_jsonSettings.Converters.Add(datetimeConverter);
  23.  
  24. 	serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
  25. }

treeTable.js

  1. layui.define(['jquery'], function(exports) {
  2. 	var MOD_NAME = 'treeTable',
  3. 		o = layui.jquery,
  4. 		tree = function() {};
  5. 	tree.prototype.config = function() {
  6. 		return {
  7. 			top_value: 0,
  8. 			primary_key: 'id',
  9. 			parent_key: 'pid',
  10. 			level_key: 'level',
  11. 			level_start:0,
  12. 			hide_class: 'layui-hide',
  13. 			icon: {
  14. 				open: 'layui-icon layui-icon-triangle-d',
  15. 				close: 'layui-icon layui-icon-triangle-r',
  16. 				left: 16,
  17. 			},
  18. 			cols: [[]],
  19. 			checked: {},
  20. 			check_mode:0,
  21. 			is_click_icon: false,
  22. 			is_checkbox: false,
  23. 			is_head:true
  24. 		};
  25. 	}
  26.  
  27. 	/**
  28. 	 * 设置列的样式
  29. 	 * @param {object} col
  30. 	 */
  31. 	function _setColStyle(col) {
  32. 		var style = "";
  33. 		col.width && (style += 'width:' + col.width + ';'), col.align && (style += 'text-align:' + col.align + ';'), style && (style = 'style="' + style + '"');
  34. 		col._style = style;
  35. 	}
  36.  
  37. 	tree.prototype.template = function (e) {
  38. 		var t = this, tbody = '',
  39. 			is_table = o('table' + e.elem).length || !(e.is_click_icon = true),
  40. 			checkbox = e.is_checkbox ? '<div class="layui-unselect layui-form-checkbox cbx" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>' : '',
  41. 			checked = checkbox ? checkbox.replace('cbx', 'cbx layui-form-checked') : '',
  42. 			thead = checkbox && '<th style="width:28px;">' + (e.check_mode === 0 ? (o.inArray(e.top_value, e.checked.data) > -1 ? checked : checkbox) : "") + '</th>';
  43. 		//表头
  44. 		e.is_head && o.each(e.cols[0], function (index, obj) {
  45. 			obj._style === undefined && _setColStyle(obj);
  46. 			thead += '<th ' + obj._style + '>' + obj.title + '</th>';
  47. 		});
  48. 		o.each(this.data(e, e.data), function (idx, item) {
  49. 			var tr = '',
  50. 				is_checked = false,
  51. 				hide_class = (item[e.parent_key] == e.top_value) || (item[e.parent_key] == t.cache(e, item[e.parent_key])) ? '' : e.hide_class;
  52. 			// 设置每行数据层级
  53. 			// 设置是否为最后一级
  54. 			item.is_end = !e.childs[item[e.primary_key]];
  55. 			o.each(e.cols[0], function (index, obj) {
  56. 				obj._style === undefined && _setColStyle(obj);
  57. 				// 标记设置行checkbox选中
  58. 				if (e.is_checkbox && e.checked && o.inArray(item[e.checked.key], e.checked.data) > -1) {
  59. 					is_checked = true;
  60. 				}
  61. 				// 指定列加入开启、关闭小图标
  62. 				var icon = (obj.key == e.icon_key && !item.is_end) ? '<i class="' + (t.cache(e, item[e.primary_key]) ? e.icon.open : e.icon.close) + '"></i>' : '<span></span>';
  63. 				// 指定列小图标按照层级向后位移
  64. 				var left = (obj.key == e.icon_key ? (item[e.level_key] - e.level_start) * e.icon.left + 'px' : '');
  65. 				if (left) {
  66. 					icon = icon.replace('>', ' style="margin-left:' + left + ';">');
  67. 				}
  68. 				// 拼接行
  69. 				tr += '<td ' + obj._style + (left ? 'data-down' : '') + '>' + icon + (is_table ? '' : (is_checked ? checked : checkbox)) + (obj.template ? obj.template(item) : (obj.toolbar ? $(obj.toolbar).html() : (item[obj.key] || ""))) + '</td>';
  70. 			});
  71. 			var box = is_table ? o(is_checked ? checked : checkbox).wrap('<td style="width:28px;">').parent().prop('outerHTML') : '';
  72. 			tbody += '<tr class="' + hide_class + '" data-id="' + item[e.primary_key] + '" data-pid="' + item[e.parent_key] + '">' + box + tr + '</tr>';
  73. 		});
  74. 		// 处理表树和树的赋值模板
  75. 		var table = is_table ? '<thead><tr data-id="' + e.top_value + '">' + thead + '</tr></thead><tbody>' + tbody + '</tbody>' : tbody.replace(/<tr/g, '<ul').replace(/tr>/g, 'ul>').replace(/<td/g, '<li').replace(/td>/g, 'li>');
  76. 		// 确认点击图标或点击列触发展开关闭
  77. 		var click_btn = e.is_click_icon ? '[data-down] i:not(.layui-icon-ok)' : '[data-down]';
  78. 		// 模板渲染并处理点击展开收起等功能
  79. 		o(e.elem).html(table).off('click', click_btn).on('click', click_btn, function () {
  80. 			var tr = o(this).parents('[data-id]'),
  81. 				td = tr.find('[data-down]'),
  82. 				id = tr.data('id'),
  83. 				pid = tr.data('pid'),
  84. 				is_open = (td.find('i:not(.layui-icon-ok)').attr('class') == e.icon.close);
  85. 			if (is_open) {
  86. 				// 展开子级（子级出现、更改图标）
  87. 				td.find('i:not(.layui-icon-ok)').attr('class', e.icon.open);
  88. 				td.parents(e.elem).find('[data-pid=' + id + ']').removeClass(e.hide_class);
  89. 				t.cache(e, id, true);
  90. 			} else {
  91. 				// 关闭子级（更改图标、隐藏所有子孙级）
  92. 				td.find('i:not(.layui-icon-ok)').attr('class', e.icon.close);
  93. 				t.childs_hide(e, id);
  94. 			}
  95. 			// 设置监听展开关闭
  96. 			layui.event.call(this, MOD_NAME, 'tree(flex)', {
  97. 				elem: this,
  98. 				data: e.childs[pid][id],
  99. 				table: e.elem,
  100. 				is_open: is_open,
  101. 			})
  102. 		}).off('click', '.cbx').on('click', '.cbx', function () {
  103. 			var is_checked = o(this).toggleClass('layui-form-checked').hasClass('layui-form-checked'),
  104. 				tr = o(this).parents('[data-id]'),
  105. 				id = tr.data('id'),
  106. 				pid = tr.data('pid');
  107. 			if (e.check_mode == 0) {
  108. 				//默认
  109. 				t.childs_checkbox(e, id, is_checked);
  110. 				t.parents_checkbox(e, pid);
  111. 			}
  112. 			else if (e.check_mode == 1 && is_checked) {
  113. 				//单选
  114. 				o(e.elem).find(".cbx.layui-form-checked").removeClass('layui-form-checked');
  115. 				o(this).addClass("layui-form-checked");
  116. 			}
  117. 			// 设置监听checkbox选择
  118. 			layui.event.call(this, MOD_NAME, 'tree(box)', {
  119. 				elem: this,
  120. 				item: pid === undefined ? {} : e.childs[pid][id],
  121. 				table: e.elem,
  122. 				is_checked: is_checked,
  123. 			})
  124. 		}).off('click', '[lay-filter]').on('click', '[lay-filter]', function () {
  125. 			var tr = o(this).parents('[data-id]'),
  126. 				id = tr.data('id'),
  127. 				pid = tr.data('pid'),
  128. 				filter = o(this).attr("lay-filter");
  129. 			return layui.event.call(this, MOD_NAME, 'tree(' + filter + ')', {
  130. 				elem: this,
  131. 				data: e.childs[pid][id],
  132. 			})
  133. 		}).off('click', '[lay-event]').on('click', '[lay-event]', function () {
  134. 			var tr = o(this).parents('[data-id]'),
  135. 				filter = o(e.elem).attr("lay-filter"),
  136. 				id = tr.data('id'),
  137. 				pid = tr.data('pid'),
  138. 				event = o(this).attr("lay-event");
  139. 			return layui.event.call(this, MOD_NAME, 'tool(' + filter + ')', {
  140. 				elem: this,
  141. 				event: event,
  142. 				data: e.childs[pid][id],
  143. 			})
  144. 		});
  145. 		e.done && e.done(e);
  146. 	};
  147.  
  148. 	// 同级全部选中父级选中/同级全部取消取消父级
  149. 	tree.prototype.parents_checkbox = function(e, pid) {
  150. 		var po = o(e.elem).find('[data-pid=' + pid + ']'),
  151. 			co = o(e.elem).find('[data-id=' + pid + ']'),
  152. 			len = o(e.elem).find('[data-pid=' + pid + '] .cbx.layui-form-checked').length;
  153. 		if(po.length == len || len == 0) {
  154. 			var pid = co.data('pid');
  155. 			len ? co.find('.cbx').addClass('layui-form-checked') : co.find('.cbx').removeClass('layui-form-checked');
  156. 			pid === undefined || this.parents_checkbox(e, pid);
  157. 		}
  158. 	};
  159. 	// 子级反选
  160. 	tree.prototype.childs_checkbox = function(e, id, is_checked) {
  161. 		var t = this;
  162. 		o(e.elem).find('[data-pid=' + id + ']').each(function() {
  163. 			var checkbox = o(this).find('.cbx');
  164. 			is_checked ? checkbox.addClass('layui-form-checked') : checkbox.removeClass('layui-form-checked');
  165. 			t.childs_checkbox(e, o(this).data('id'), is_checked);
  166. 		})
  167. 	};
  168. 	// 点击收起循环隐藏子级元素
  169. 	tree.prototype.childs_hide = function(e, id) {
  170. 		var t = this;
  171. 		this.cache(e, id, false);
  172. 		o(e.elem).find('[data-pid=' + id + ']:not(.' + e.hide_class + ')').each(function() {
  173. 			var td = o(this).find('[data-down]'),
  174. 				i = td.find('i:not(.layui-icon-ok)');
  175. 			// 关闭更换小图标
  176. 			i.length && i.attr('class', e.icon.close);
  177. 			// 隐藏子级
  178. 			td.parents(e.elem).find('[data-pid=' + id + ']').addClass(e.hide_class);
  179. 			t.childs_hide(e, o(this).data('id'))
  180. 		});
  181. 	};
  182. 	// 重新组合数据，父子级关系跟随
  183. 	tree.prototype.data = function(e) {
  184. 		var lists = [],
  185. 			childs = [];
  186. 		o.each(e.data, function(idx, item) {
  187. 			lists[item[e.primary_key]] = item;
  188. 			if(!childs[item[e.parent_key]]) {
  189. 				childs[item[e.parent_key]] = [];
  190. 			}
  191. 			childs[item[e.parent_key]][item[e.primary_key]] = item;
  192. 		});
  193. 		e.childs = childs;
  194. 		return this.tree_data(e, lists, e.top_value, []);
  195. 	};
  196. 	tree.prototype.tree_data = function(e, lists, pid, data) {
  197. 		if(lists[pid]) {
  198. 			data.push(lists[pid]);
  199. 			delete lists[pid]
  200. 		}
  201. 		var t = this;
  202. 		o.each(e.data, function(index, item) {
  203. 			if(item[e.parent_key] == pid) {
  204. 				data.concat(t.tree_data(e, lists, item[e.primary_key], data))
  205. 			}
  206. 		});
  207. 		return data;
  208. 	};
  209. 	tree.prototype.render = function(e) {
  210. 		var treeObj = o(e.elem).data("tree"),option = null;
  211. 		if(!treeObj) {
  212. 			treeObj = new tree();
  213. 			option = this.config();
  214. 			o(e.elem).data("tree",treeObj);
  215. 		}
  216. 		else
  217. 		{
  218. 			option = treeObj.option;
  219. 		}
  220. 		e = o.extend(option, e);
  221. 		treeObj.option = e;
  222. 		if(e.url) {
  223. 			if (e.method && e.method.toLowerCase() == "post") {
  224. 				o.post(e.url, e.where, function (res) {
  225. 					e.data = res;
  226. 					treeObj.template(e);
  227. 				})
  228. 			} else {
  229. 				o.get(e.url, e.where, function (res) {
  230. 					e.data = res;
  231. 					treeObj.template(e);
  232. 				})
  233. 			}
  234. 		} else {
  235. 			treeObj.template(e);
  236. 		}
  237. 		return treeObj;
  238. 	};
  239. 	// 获取已选值集合
  240. 	tree.prototype.checked = function(e) {
  241. 		var items = [];
  242. 		o(e.elem).find('.cbx.layui-form-checked').each(function() {
  243. 			var tr = o(this).parents('[data-id]'),
  244. 				id = tr.data('id'),
  245. 				pid = tr.data('pid');
  246. 			items.push(e.childs[pid][id]);
  247. 		});
  248. 		return items;
  249. 	};
  250. 	// 全部展开
  251. 	tree.prototype.openAll = function(e) {
  252. 		var t = this;
  253. 		o.each(e.data, function(idx, item) {
  254. 			item[e.primary_key] && t.cache(e, item[e.primary_key], true);
  255. 		})
  256. 		this.render(e);
  257. 	}
  258. 	// 全部关闭
  259. 	tree.prototype.closeAll = function(e) {
  260. 		localStorage.setItem(e.elem.substr(1), '');
  261. 		this.render(e);
  262. 	}
  263. 	tree.prototype.on = function(events, callback) {
  264. 		return layui.onevent.call(this, MOD_NAME, events, callback)
  265. 	};
  266. 	// 存储折叠状态
  267. 	tree.prototype.cache = function (e, val, option) {
  268. 		if (e.open_all) {
  269. 			return true;
  270. 		}
  271.  
  272. 		var name = e.elem.substr(1),
  273. 			val = val.toString(),
  274. 			cache = localStorage.getItem(name) ? localStorage.getItem(name).split(',') : [],
  275. 			index = o.inArray(val, cache);
  276. 		if (option === undefined) {
  277. 			return index > -1;
  278. 		}
  279.  
  280. 		if ((option && index > -1) || (!option && index === -1)) {
  281. 			return;
  282. 		}
  283.  
  284. 		if(option && index == -1) {
  285. 			cache.push(val)
  286. 		}
  287. 		else if(!option && index > -1) {
  288. 			cache.splice(index, 1)
  289. 		}
  290. 		localStorage.setItem(name, cache.join(','));
  291. 	};
  292. 	tree.prototype.reload = function(id,option) {
  293. 		option = option || {};
  294. 		option.elem = "#"+id;
  295. 		return this.render(option);
  296. 	};
  297. 	tree.prototype.checkStatus = function(id) {
  298. 		var treeObj = o("#" + id).data("tree"),result = {data:[]};
  299. 		if(!treeObj)
  300. 		{
  301. 			return result;
  302. 		}
  303. 		return {
  304. 			data: treeObj.checked(treeObj.option)
  305. 		};
  306. 	};
  307. 	exports(MOD_NAME, new tree())
  308. });

效果：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/368692
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号