dtree点击左侧页面右侧页面展示

最新推荐文章于 2023-04-04 17:37:34 发布

jq1223

最新推荐文章于 2023-04-04 17:37:34 发布

阅读量328

点赞数

分类专栏： layui 文章标签： html

本文链接：https://blog.csdn.net/jq1223/article/details/112559799

版权

layui 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

效果图，如下：在这里插入图片描述
前端代码：
1.给页面一个name值

2.lelf页面绑定节点点击

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/resources/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/resources/layui_ext/dtree/dtree.css" media="all">
    <link rel="stylesheet" href="/resources/layui_ext/dtree/font/dtreefont.css" media="all">
</head>
<body>
<script type="text/javascript" src="/resources/layui/layui.js"></script>
<!--  dtree div  -->
   <div >
       <ul id="deptLeftTree" class="dtree" data-id="0">
       </ul>

</div>
</body>

<script>
    layui.extend({
        dtree: '/resources/layui_ext/dtree/dtree'   // {/}的意思即代表采用自有路径，即不跟随 base 路径
    }).use(['dtree','layer','jquery'], function(){
        var dtree = layui.dtree;
        var layer = layui.layer;
        var $ = layui.jquery;

        // 初始化树
        var DemoTree = dtree.render({
            elem: "#deptLeftTree",
            dataStyle:"layuiStyle",
            dataFormat:"list",  //配置data的风格为list
            response:{message:"msg",statusCode:0},  //修改response中返回数据的定义
            url:"/dept/buildLeftTree", // 使用url加载（可与data加载同时存在）
            checkbar:true //开启复选框
        });
        
        // 绑定节点点击
        dtree.on("node('deptLeftTree')" ,function(obj){
            window.parent.right.reloadTable(obj.param.nodeId);
        });
    });
</script>
</html>

3.//right页面提供一个供左边页面调用刷新表格的方法
在这里插入图片描述
4.tableIns为列表全局变量
具体代码如下：{id:id}是将 obj.param.nodeId的值付给id用于条件查询

<script>
 //提供一个工左边页面调用刷新表格的方法
    function reloadTable(id){
        tableIns.reload({
            where : {id:id},
            page: {
                curr: 1 //重新从第 1 页开始
            },
        })
    }
</script>

后台查询代码：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.cc.mapper.DeptMapper">
    <sql id="where">
       <where>
           <if test="vo.id != null">
               and id = #{vo.id} or pid = #{vo.id}
           </if>
        </where>
    </sql>
    <select id="queryDeptList" resultType="com.cc.domain.Dept">
        select * from sys_dept  where available = 1
    </select>

    <select id="querydept" resultType="com.cc.domain.Dept">
        select * from sys_dept l  <include refid="where"></include> order by l.id desc limit #{vo.startIndex},#{vo.limit}
    </select>

    <select id="queryCount" resultType="long">
        select count(*) from sys_dept  <include refid="where"></include>
    </select>
</mapper>

jq1223

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
dtree点击左侧页面右侧页面展示

效果图，如下：前端代码：1.给页面一个name值2.lelf页面绑定节点点击具体代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta name="renderer" content="webkit"> <meta http-equiv="
复制链接

扫一扫