使用layui xtree插件最基础样式

最新推荐文章于 2023-07-12 12:21:07 发布

全职计算机毕业设计

最新推荐文章于 2023-07-12 12:21:07 发布

阅读量2k

点赞数

分类专栏：前端文章标签： xtree

本文链接：https://blog.csdn.net/qq_31293575/article/details/98037769

版权

前端专栏收录该内容

22 篇文章 1 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="renderer" content="webkit" /><meta name="referrer" content="always" />
    <script type="text/javascript" src="${ctx}/js/jquery-1.12.4.min.js"></script>
    <title>
    </title>
    <link rel="stylesheet" type="text/css"  href="${ctx}/js/layui-v2.5.4/layui/css/layui.css">
    <style type="text/css">

    </style>

    <meta name="description" content="" /></head>
<body>
        <!-- 不要忘记 class=layui-form -->
        <div class="layui-form xtree-main">

            <div id="xtree1" class="xtree_contianer"></div>

        </div>

    <!--先引用layui的js-->
    <script type="text/javascript" src="${ctx}/js/layui-v2.5.4/layui/layui.js"></script>
    <!--引用xtree-->
    <script type="text/javascript" src="${ctx}/js/layui-xtree/layui-xtree.js"></script>
    <script type="text/javascript">
        //这一句不用管....
        $('.header-nav-item:eq(2)').addClass('nav-active');

        //一套json数据下面会使用，同时供你参考
        var json = [
            {
                title: "节点1", value: "jd1", data: [
                    { title: "节点1.1", checked: true, disabled: true, value: "jd1.1", data: [] }
                    , { title: "节点1.2", value: "jd1.2", checked: true, data: [] }
                    , { title: "节点1.3", value: "jd1.3", disabled: true, data: [] }
                    , { title: "节点1.4", value: "jd1.4", data: [] }
                ]
            }
            , {
                title: "节点2", value: "jd2", data: [
                    { title: "节点2.1", value: "jd2.1", data: [] }
                    , { title: "节点2.2", value: "jd2.2", data: [] }
                    , { title: "节点2.3", value: "jd2.3", data: [] }
                    , { title: "节点2.4", value: "jd2.4", data: [] }
                ]
            }
            , { title: "节点3", value: "jd3", data: [] }
            , { title: "节点4", value: "jd4", data: [] }
        ];

        //********************
        //      正式开始
        //********************

        //layui 的 form 模块是必须的
        layui.use(['form'], function () {
            var form = layui.form;

            //1、最基础的用法 - 直接绑定json
            var xtree1 = new layuiXtree({
                elem: 'xtree1'   //(必填) 放置xtree的容器，样式参照 .xtree_contianer
                , form: form     //(必填) layui 的 from
                , data: json     //(必填) json数据
            });


        });
    </script>
</body>
</html>

tree好像必须要使用

<div class="layui-form xtree-main"></div>

包住不然样式出不来，还不报错

完整原文：http://blog.maptoface.com/post/196

全职计算机毕业设计

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录