Easyui（Tree前端工作）

目录

树型菜单

---

树型菜单

html代码：

<ul id="menuTree"></ul>

jsp实现代码：

<script type="text/javascript">
    $(function() {
        $('#menuTree').tree({
            /* Path任何项目都要拼接绝对路径 */
            //[] 就是一个数组
            //{} 就是一个对象（节点）
            //id 节点的id
            //text 节点的名称（菜单选项名）
            //children 孩子（子节点）
            /* state：节点状态，'open' 或 'closed'，默认：'open'。
            如果为'closed'的时候，将不自动展开该节点。
            attributes: 被添加到节点的自定义属性。 */
            url : Path + '/static/data/tree_data.json',
            //设置节点的点击事件
            onClick : function(node) {//node 代表当前节点对象，根据node拿到指定的属性
                //alert(node.text);  // 在用户点击的时候提示
                addSP(node);
            }
        });
        </script>

新增选项卡功能：

html代码：

    <div data-options="region:'center',title:'主题内容'"
            style="padding: 5px; background: #eee;">
            <!-- 面板panel -->
            <div id="p" class="easyui-panel"
                style="width: 500px; height: 150px; padding: 10px; background: #fafafa; margin: 0px; padding: 0px"
                data-options="fit:true,iconCls:'icon-save',closable:true,collapsible:true,minimizable:true,maximizable:true">
                <!-- 选项卡 -->
                <div id="tt" class="easyui-tabs"style="width: 500px; height: 250px;"></div>
            </div>
​
​
        </div>

实现jsp代码：

<script type="text/javascript">
//点击选项时，新增一个选项卡
        function addSP(node) {
            //判断节点是否是主菜单。是就不生成选项卡
            if (node.children!=null) {
                return;
            }
            /* select：选中     esists：存在 */
            //判断选项卡是否存在
            let flag = $("#tt").tabs("exists", node.text);
            if (flag) {
                $("#tt").tabs("select", node.text);
                return;
            }
            $("#tt").tabs("add", {
                title : node.text,
                content : "<h4>内容区域</h4>",
                closable:true,//选项卡删除按钮
            })
        }
​
    });
    </srcipt>