layui插件treetable与treeSelect的使用---随笔

treetable简单使用效果图展示

treeSelect使用效果图展示

首先引入插件所需的依赖

#具体地址根据实际情况而定
 <link rel="stylesheet" type="text/css" href="../../static/integration/layui/css/layui.css"
    th:href="@{/integration/layui/css/layui.css}">
<script type="application/javascript" src="../../static/integration/layui/layui.js"
	th:src="@{/integration/layui/layui.js}"></script>
	
	
layui.config({
    base : '/integration/layui/'
}).extend({
    treetable : '/treetable-lay/treetable',
    treeSelect : '/treeSelect/treeSelect'
})

treetable的使用

<table class="layui-hide" id = "treeTable" lay-filter="treeTable"></table>

var selectMenuData;
layui.use(['treetable', 'table', 'layer'], function () {
    var $ = layui.jquery;
    var table = layui.table;
    var layer = layui.layer;
    var treetable = layui.treetable;

    //渲染表格
    var renderTable = function () {
        layer.load(2);  //加载层
        treetable.render({
            height: 'full-160',
            id: 'treeTable',
            treeColIndex: 1,	//树形图标显示在第几列
            treeSpid: '0',		//最上级的父级id
            treeIdName: 'id',	//id字段的名称
            treePidName: 'parentId',	//父级节点字段
            treeDefaultClose: true,	//是否默认折叠
            treeLinkage: false,		//父级展开时是否自动展开所有子级
            elem: '#treeTable',	//表格id
            url: '/menu/list',
            toolbar: '#toolbarDemo',
            page: false,
            cols: [[
                {type: 'radio'},
                {field: 'name', title: '菜单名称'},
                {field: 'url', title: '地址'},
                //, hide : true
                {
                    field: 'icon', title: '图标',
                    templet: function (item) {
                        return item.icon == null ? '' : '<i class="' + item.icon + ' fa-lg"></i>';
                    }
                },
                {
                    field: 'type', title: '类型',
                    templet: function (item) {
                        if (item.type === 'C') {
                            return '<span class="label label-primary">目录</span>';
                        }
                        if (item.type === 'M') {
                            return '<span class="label label-success">菜单</span>';
                        }
                        if (item.type === 'B') {
                            return '<span class="label label-warning">按钮</span>';
                        }
                    }
                },
                {field: 'orderNum', title: '排序'},
                {field: 'authorization', title: '授权标识'}
            ]],
            //数据渲染完的回调
            done: function () {
                //关闭加载
                layer.closeAll('loading');
            }
        })
    };
    renderTable();

    table.on('radio(treeTable)', function (obj) {
        //查看obj结构
        // console.log(obj);
        //是否选中，选中为true
        // console.log(obj.checked);
        //选中行的数据
        selectMenuData = obj.data;
    });
})

treeSelect的使用

<input type="text" class="form-control" style="cursor:pointer;" id="tree-select" lay-filter="tree"/>

//刷新节点
var refreshTreeSelect;
//选中节点
var selectTree;
layui.use(["treeSelect", "form", "tree"], function () {
    var form = layui.form;
    var tree = layui.tree;
    var treeSelect = layui.treeSelect;
    treeSelect.render({
        // 选择器
        elem: '#tree-select',
        // 异步获取下拉树需要显示的数据
        data: '/menu/treeSelect',
        // 异步加载方式：get/post，默认get
        type: 'post',
        // 占位符
        placeholder: '请选择菜单',
        // 是否开启搜索功能：true/false，默认false
        search: true,
        // 一些可定制的样式
        style: {
            folder: {
                enable: true
            },
            line: {
                enable: true
            }
        },
        // 点击节点回调
        click: function(d){
            // console.log(d);
            // console.log(d.treeId); // 得到组件的id
            $("#parentId").val(d.current.id);
            // console.log(d.current); // 得到点击节点的treeObj对象
            // console.log(d.data); // 得到组成树的数
        },
        // 加载完成后的回调函数
        success: function (res) {
            // console.log(res);
            // console.log(res.treeId); // 得到组件的id
            // console.log(res.data); // 得到组成树的数据
            // // 选中节点，根据id筛选，一般修改时会有默认选中状态，可以在这里设置
            // treeSelect.checkNode(res.data[0], 3);
            // console.log($('#tree').val());
            // //获取zTree对象，可以调用zTree方法
            // var treeObj = treeSelect.zTree('tree');
            // console.log(treeObj);
            // //刷新树结构
            treeSelect.refresh('tree');
        }
    });

    refreshTreeSelect = function () {
        treeSelect.refresh('tree');
    }

    selectTree = function (id) {
        treeSelect.checkNode('tree', id);
    }
});

相关工具包

treetable
treeSelect