layui中引入treetable的方法

Love The Way You Lie 2022-04-11 04:13 439阅读 0赞

# layui中引入treetable的方法 #

直接上代码 layui.config(\{ base: '/static/layui/lay/modules/' \}).extend(\{ treetable: 'treetable-lay/treetable' \}); var tablist = \{\}; layui.use(\['form', 'layer', 'laydate', 'table', 'laytpl','treetable'\], function () \{ var form = layui.form, layer = parent.layer === undefined ? layui.layer : top.layer, $ = layui.jquery, treetable = layui.treetable, table = layui.table; )\};

![项目文件静态资源路径][20181204180206930.png]

下面贴上完整的代码

layui.config({
 base: '/Public/static/layui/lay/modules/'
 }).extend({
 treetable: 'treetable-lay/treetable'
 });
 var tablist = {};
 layui.use(['form', 'layer', 'laydate', 'table', 'laytpl','treetable'], function () {
 var form = layui.form,
 layer = parent.layer === undefined ? layui.layer : top.layer,
 $ = layui.jquery,
 treetable = layui.treetable,
 table = layui.table;
 //
 tablist.reload = function(where){
 let load = layer.msg('数据加载中',{icon:16,time:false});
 treetable.render({
 treeColIndex: 2, // 显示在第几列
 treeSpid: 0, // 顶级pid
 treeIdName: 'id', // id
 treePidName: 'pid', // pid
 treeDefaultClose: true, // 不全部展开
 treeLinkage: true, //  父级展开时是否自动展开所有子级
 elem: '#table',
 where: where,
 url: '/admin/auth/rule',
 method: 'get',
 cellMinWidth: 95,
 height: "full - 10",
 id: "table",
 cols: [[
 {type: "checkbox", width: 50},
 {field: 'id', title: 'ID', width: 60, align: "center"},
 {field: 'title', title: '规则名',width:240},
 {field: 'name', title: '规则值'},
 {field: 'type',unresize:true,width:100, title: '支持表达式', align: 'center', templet: "#type"},
 {field: 'is_url', width:80, title: '链接', align: 'center', templet: "#is_url",unresize:true},
 {field: 'status',unresize:true,width:95, title: '状态', align: 'center', templet: "#status"},
 {field: 'condition', title: '表达式'},
 {title: '操作', width: 140, templet: '#tool',align: "center"}
 ]],
 done:function(){
 layer.close(load);
 }
 });
 };
 tablist.reload();
 //检测更改支持表达式
 form.on('switch(type)', function (obj) {
 var _this = $(obj.elem);
 var index = layer.msg('操作中', {'icon': 16, shade: 0.1});
 $.post("/admin/auth/fast_change_rule", {
 id: this.value,
 name: this.name,
 val: obj.elem.checked
 }, function (data) {
 layer.close(index);
 if (data.code === 0) {
 window.parent.toast('操作成功', 0);
 } else {
 !obj.elem.checked ? _this.prop('checked',true) : _this.removeAttr('checked');
 form.render('checkbox');
 window.parent.toast(data.info, data.code);
 //状态回滚
 }
 });
 });
 //检测更改使用状态
 form.on('switch(status)', function (obj) {
 var _this = $(obj.elem);
 var index = layer.msg('操作中', {'icon': 16, shade: 0.1});
 $.post("/admin/auth/fast_change_rule", {
 id: this.value,
 name: this.name,
 val: obj.elem.checked
 }, function (data) {
 layer.close(index);
 if (data.code === 0) {
 window.parent.toast('操作成功', 0);
 } else {
 !obj.elem.checked ? _this.prop('checked',true) : _this.removeAttr('checked');
 form.render('checkbox');
 window.parent.toast(data.info, data.code);
 //状态回滚
 }
 });
 });
 //检测更改是否链接
 form.on('switch(is_url)', function (obj) {
 var _this = $(obj.elem);
 var index = layer.msg('操作中', {'icon': 16, shade: 0.1});
 $.post("/admin/auth/fast_change_rule", {
 id: this.value,
 name: this.name,
 val: obj.elem.checked
 }, function (data) {
 layer.close(index);
 if (data.code === 0) {
 window.parent.toast('操作成功', 0);
 } else {
 !obj.elem.checked ? _this.prop('checked',true) : _this.removeAttr('checked');
 form.render('checkbox');
 window.parent.toast(data.info, data.code);
 //状态回滚
 }
 });
 });
 //搜索
 $(".search_btn").on("click", function () {
 search();
 });
 //搜索+刷新
 function search(){
 tablist.reload({
 keyword:$("input[name=keyword]").val()
 ,type:$('select[name=type]').val()
 ,status:$('select[name=status]').val()
 ,is_url:$('select[name=is_url]').val()
 ,pid:$('select[name=pid]').val()
 });
 }
 
 //添加文章
 function addoredit(url,name) {
 let index = layui.layer.open({
 title: name,
 type: 2,
 content: url,
 maxmin:true,
 area:['60%','98%']
 });
 }
 
 $(".add_btn").on('click',function () {
 addoredit('/admin/auth/add_rule','添加规则');
 });
 
 //展开
 $(".showAll").toggle(function(){
 $(this).html('收起');
 treetable.expandAll('#table');
 },function(){
 $(this).html('展开');
 treetable.foldAll('#table');
 });
 //批量删除
 $(".delAll_btn").on('click',function () {
 var checkStatus = table.checkStatus('table'),
 data = checkStatus.data,
 ids = [];
 if (data.length > 0) {
 for (var i in data) {
 ids.push(data[i].id);
 }
 layer.confirm('确定删除选中的数据？', {icon: 3, title: '提示信息'}, function (index) {
 $.post("/admin/auth/del_rule",{'id':ids},function(data){
 window.parent.toast(data.info,data.code);
 if(data.code === 0)
 tablist.reload();
 });
 layer.close(index);
 })
 } else {
 layer.msg("请选择需要删除的数据");
 }
 });
 
 //列表操作
 table.on('tool(table)', function (obj) {
 var layEvent = obj.event,
 data = obj.data;
 if (layEvent === 'edit') { //编辑
 addoredit('/admin/auth/edit_rule/id/'+data.id,'修改 '+data.title+' ');
 } else if (layEvent === 'del') { //删除
 layer.confirm('确定删除 ' + data.title + ' 规则？', {icon: 3, title: '提示'}, function (index) {
 layer.close(index);
 $.post("/admin/auth/del_rule",{'id':data.id},function(data){
 window.parent.toast(data.info,data.code);
 if(data.code === 0)
 tablist.reload();
 });
 });
 }else if(layEvent === 'add'){
 addoredit('/admin/auth/add_rule/id/'+data.id,'为 '+data.title+' 添加子项');
 }
 });
 if(window.parent.NProgress){
 window.parent.NProgress.done();
 }
 })

treetable下载地址：链接：[https://pan.baidu.com/s/1yIV6\_nY5NY\_fbsVCH7d\_OA][https_pan.baidu.com_s_1yIV6_nY5NY_fbsVCH7d_OA]  
提取码：0e7t

如您在阅读中发现不足，欢迎留言！！！

[20181204180206930.png]: /images/20220411/def674cb59e3479bbda60f0593196a56.png
[https_pan.baidu.com_s_1yIV6_nY5NY_fbsVCH7d_OA]: https://pan.baidu.com/s/1yIV6_nY5NY_fbsVCH7d_OA