关于使用easyUI、Ztree自己创造的坑

最新推荐文章于 2021-02-04 19:31:26 发布
最新推荐文章于 2021-02-04 19:31:26 发布
阅读量985 收藏 1
点赞数
文章标签： easyui ztree
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Rae_C/article/details/80289648
版权

前情背景：需求使用easyui弹出框里面有tree结构和带复选框的表格
开始了挖坑自己跳之路。

    <div id="device_edit_dlg_div"></div>
    <div id="checkDevice_edit" style="height:25px;top:-10px;display: none">
    <div style="position:inherit;float: left;">已选中<span id="checkNumber_edit" ></span>个</div>
    <a class="easyui-linkbutton" style="position:inherit;float: right" onclick="cancelCheck()">取消</a>
    <a class="easyui-linkbutton" style="position:inherit;float: right" onclick="saveCheck()">确定</a>

</div>     
<script>
           $("#device_edit_dlg_div").dialog({
                title: "修改设备",
                width: 600,
                height: 600,
                cache: false,
                modal: true,
                maximizable: true,
                resizable: true,
                href: ctx + "/vouchers/editDevice?groupId="+groupId,
                buttons:"#checkDevice_edit"
           });
 </script>

/vouchers/editDevice接口代码就不贴了，跳转页面editDevice.jsp

<link rel="stylesheet" type="text/css"  href='${ctx}/resources/easyui/zTreeStyle.css'></link>
<script type="text/javascript"  charset="UTF-8" src='${ctx}/resources/easyui/jquery.ztree.all.min.js' ></script>
<div id="editDevice">
    <div style="width: 99.5%;height: 10%;float: left;border-bottom: 1px solid lightgray;margin-bottom: 2px">
        <input placeholder="型号名称..." id="dialog_device" name="deviceId" style="height: 100%" value=""/>
        <button id="dialog_search_edit" style="margin: 20px 5px;">搜索</button>
    </div>
    <div style="width: 29.5%;height: auto;min-height:82% ;float: left;border-right:1px solid lightgray;margin-right: 2px">
        <ul id="dialog_tree_edit" class="ztree">
        </ul>
    </div>
    <div style="width: 69.5%;height: 82%;float: left;">
        <table id="modelCheck_edit" class="easyui-datagrid">
            <thead>
            <tr>
            </tr>
            </thead>
        </table>
    </div>
</div>

<script type="text/javascript">
   var selectedNew = new Array();
   var selected_edit = new Array();
   var init ="";

       function beforeClick(treeId, treeNode, clickFlag) {
        return (treeNode.click != false);
    }
    function cancelCheck() {
        selectedNew = new Array();
        init.refresh();
        $("#device_edit_dlg_div").dialog("close");
    }
    function saveCheck() {
        var str = '';
        var arr = selected_edit.concat();
        for(var i=0;i<selectedNew.length;i++){
            arr.indexOf(selectedNew[i]) === -1 ? arr.push(selectedNew[i]) : 0;
        }
        selected_edit = arr;
        for(var i = 0 ;i<selected_edit.length;i++){
            str = str + selected_edit[i]+ ',';
        }
        $("#deviceArrayEdit").val(str);
        $("#device_edit_dlg_div").dialog("close");
        if(selected_edit.length > 0){
        $("#deviceNumAll_edit").css("display","none");
        $("#deviceNumD_edit").css("display","block");
        $("#deviceNum_edit").html(selected_edit.length);
        }else{
            $("#deviceNumAll_edit").css("display","block");
            $("#deviceNumD_edit").css("display","none");
        }
    }
    function onClick(event, treeId, treeNode, clickFlag) {
        var groupId=$("#vouGroupId").val();
        var childrenNodes = '';
        if (treeNode.isParent) {
            childrenNodes = treeNode.children;
        }
        if (childrenNodes.length != 0) {
            var zTree = $.fn.zTree.getZTreeObj("dialog_tree_edit");
            zTree.expandNode(treeNode);
        }else{
            $('#modelCheck_edit').datagrid({
                idField: 'id',
                url: "/device/getDeviceByBrandId.json",
                singleSelect: false,
                rownumbers: true,
                fitColumns:true,//宽度自适应
                height:'400',
                columns: [[{
                    field: 'index',
                    checkbox: true,
                    id: 'allCheck'
                },
                    {
                        field: 'path',
                        title: '品类',
                    },
                    {
                        field: 'name',
                        title: '型号',
                    },
                    {
                        field: 'id',
                        title: 'id',
                    }
                ]],
                queryParams: {
                    brandId: treeNode.id,
                    categoryId: treeNode.pId,
                    groupId:groupId
                },
                onLoadSuccess:function () {
                        for(var j = 0 ;j < selected_edit.length;j++){
                                var rows = $("#modelCheck_edit").datagrid("getRows");
                                for(var k = 0 ;k < rows.length;k++){
                                    if(rows[k].id == selected_edit[j]){
                                        $('#modelCheck_edit').datagrid('selectRow',k);
                                    }
                                }
                        }
                },
                onCheckAll :function(data){
                   var length =  selectedNew.length;
                    if (length <= 0) {
                        for (var i = 0; i < data.length; i++) {
                            var id = data[i].id;
                            selectedNew.push(id);
                        }
                    } else {
                        var arr = selectedNew.concat();
                        for(var i=0;i<data.length;i++){
                            arr.indexOf(data[i].id) === -1 ? arr.push(data[i].id) : 0;
                        }
                        selectedNew = arr;
                    }
                    checkNum();
                },
                onUncheckAll:function (data) {
                    var arr = selectedNew.concat();
                    var l = data.length;
                    for(var i=0;i<l;i++){
                        arr.indexOf(data[i].id) === -1 ? 0:arr.splice(arr.indexOf(data[i].id),1);
                    }
                    selectedNew = arr;
                    for (var i = 0; i < selected_edit.length; i++) {
                        for(var j= 0; j < data.length; j++){
                            var id = data[j].id;
                            if(selected_edit[i] == id){
                                selected_edit.splice(i,1);
                            }
                        }
                    }
                    checkNum();
                },
                onSelect:function (index,row) {
                    selectedNew.push(row.id);
                    checkNum();
                },
                onUnselect:function (index,row) {
                    for(var i = 0 ;i < selectedNew.length;i++){
                        if(selectedNew[i] == row.id){
                            selectedNew.splice(i,1);
                        }
                    }
                    for(var i = 0 ;i < selected_edit.length;i++){
                        if(selected_edit[i] == row.id){
                            selected_edit.splice(i,1);
                        }
                    }
                    checkNum();
                }
            });
            $('#modelCheck_edit').datagrid('hideColumn','id');

        }
    }

    var
        setting = {
            view: {
                dblClickExpand: false,
                showIcon: false,
                txtSelectedEnable: true
            },
            data:{
                simpleData: {
                    enable:true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: 0
                }
            },
            callback: {
                beforeClick: beforeClick,
                onClick: onClick,
            }
        };
   $(document).ready(function () {
       onLoadZTree();
       checkNumInit();

   });
    /**
     * 加载树形结构数据
     */
    function onLoadZTree() {
        var treeNodes = [];
        $.ajax({
            async : false,//是否异步
            cache : false,//是否使用缓存
            type : 'POST',//请求方式：post
            dataType : 'json',//数据传输格式：json
            url : ctx + "/device/category",
            error : function() {
                $.messager.alert('错误提示','请求失败','info');
            },
            success : function(data) {
                treeNodes = data;//把后台封装好的简单Json格式赋给treeNodes
            }
        });
        init = $.fn.zTree.init($("#dialog_tree_edit"), setting, treeNodes);
        //初始化加载表头
        $('#modelCheck_edit').datagrid({
            idField: 'id',
            singleSelect: false,
            rownumbers: true,
            fitColumns:true,//宽度自适应
            height:'400',
            columns: [[{
                field: 'index',
                checkbox: true,
                id: 'allCheck'
            },
                {
                    field: 'path',
                    title: '品类',
                },
                {
                    field: 'name',
                    title: '型号',
                },

            ]]
        });
    };
//初始化选择的复选框（数据回显）
    function checkNumInit() {
        var groupId=$("#vouGroupId").val();
        $.ajax({
            async : false,//是否异步
            cache : false,//是否使用缓存
            type : 'POST',//请求方式：post
            dataType : 'json',//数据传输格式：json
            url : ctx + "/vouchers/editDevice4Check?groupId="+groupId,
            error : function() {
                $.messager.alert('错误提示','请求失败','info');
            },
            success : function(data) {

                var deviceInit = data.deviceInit;
                if(deviceInit == 0 || null == deviceInit ){
                    $("#checkNumber_edit").html(0);
                }else if(deviceInit.length > 0 && deviceInit.indexOf(",") > -1){
                var split = deviceInit.split(",");
                for(var i = 0 ;i <split.length;i++ ){
                    selected_edit.push(split[i]);
                }
                    $("#checkNumber_edit").html(selected_edit.length);
                }
            }
        });



    }
    function checkNum() {
        for(var i =0 ;i<selected_edit.length;i++){
            for(var j=0;j<selectedNew.length;j++){
                if(selected_edit[i] == selectedNew[j]){
                    selectedNew.splice(j,1);
                }
            }
        }
            $("#checkNumber_edit").html(selected_edit.length + selectedNew.length);
    }


    $('#dialog_search_edit').click(function(){
        var val = $("#dialog_device").val();
        $('#modelCheck_edit').datagrid({
            idField: 'id',
            url: "/device/getDevice.json",
            singleSelect: false,
            rownumbers: true,
            fitColumns:true,//宽度自适应
            height:'400',
            columns: [[{
                field: 'index',
                checkbox: true,
                id: 'allCheck'
            },
                {
                    field: 'path',
                    title: '品类',
                },
                {
                    field: 'name',
                    title: '型号',
                },
                {
                    field: 'id',
                    title: 'id',
                }
            ]],
            queryParams: {
                deviceName: val
            },
            onLoadSuccess:function (data) {
                if(data.rows.length <= 0){
                    $.messager.alert('提示','没有数据，请重新搜索','warning');
                }
                for(var j = 0 ;j < selected_edit.length;j++){
                    var rows = $("#modelCheck_edit").datagrid("getRows");
                    for(var k = 0 ;k < rows.length;k++){
                        if(rows[k].id == selected_edit[j]){
                            $('#modelCheck_edit').datagrid('selectRow',k);
                        }
                    }
                }
            },
            onCheckAll :function(data){
                var length =  selectedNew.length;
                if (length <= 0) {
                    for (var i = 0; i < data.length; i++) {
                        var id = data[i].id;
                        selectedNew.push(id);
                    }
                } else {
                    var arr = selectedNew.concat();
                    for(var i=0;i<data.length;i++){
                        arr.indexOf(data[i].id) === -1 ? arr.push(data[i].id) : 0;
                    }
                    selectedNew = arr;
                }
                checkNum();
            },
            onUncheckAll:function (data) {
                var arr = selectedNew.concat();
                var l = data.length;
                for(var i=0;i<l;i++){
                    arr.indexOf(data[i].id) === -1 ? 0:arr.splice(arr.indexOf(data[i].id),1);
                }
                selectedNew = arr;
                for (var i = 0; i < selected_edit.length; i++) {
                    for(var j= 0; j < data.length; j++){
                        var id = data[j].id;
                        if(selected_edit[i] == id){
                            selected_edit.splice(i,1);
                        }
                    }
                }
                checkNum();
            },
            onSelect:function (index,row) {
                selectedNew.push(row.id);
                checkNum();
            },
            onUnselect:function (index,row) {
                for(var i = 0 ;i < selectedNew.length;i++){
                    if(selectedNew[i] == row.id){
                        selectedNew.splice(i,1);
                    }
                }
                for(var i = 0 ;i < selected_edit.length;i++){
                    if(selected_edit[i] == row.id){
                        selected_edit.splice(i,1);
                    }
                }
                checkNum();
            }
        });
        $('#modelCheck_edit').datagrid('hideColumn','id');
    });
</script>

–翻页复选调试总是不对去掉了–
自己挖的坑在哪里呢，就是ztree的树结构加载成功之后一直存在，再发起另外的请求会造成冲突，树的加载会加载上次请求生成的树。
两个解决办法:
一，动态生成id
失败原因：弹出框自定义按钮无法加载
二，弹出框请求之前先删除，重新写入

    $("#editDevice").click( function () {
        var groupId=$("#vouGroupId").val();

        $("div[id='device_edit_dlg_div']").remove();
        $("div[id='checkDevice_edit']").remove();
        $(document.body).append("<div id='device_edit_dlg_div'></div>");
        $(document.body).append("<div id='checkDevice_edit' style='height:25px;top:-10px;display: none'>"+
                    "<div style='position:inherit;float: left;'>已选中<span id='checkNumber_edit'></span>个</div>"+
                    "<a class='easyui-linkbutton l-btn l-btn-small' style='position:inherit;float: right' onclick='cancelCheck()'><span class='l-btn-left'><span class='l-btn-text'>取消</span></span></a>"+
            "<a class='easyui-linkbutton l-btn l-btn-small' style='position:inherit;float: right;' onclick='saveCheck()'><span class='l-btn-left'><span class='l-btn-text'>确认</span></span></a>"+
                    "</div>");

           $("#device_edit_dlg_div").dialog({
                title: "修改设备",
                width: 600,
                height: 600,
                cache: false,
                modal: true,
                maximizable: true,
                resizable: true,
                href: ctx + "/vouchers/editDevice?groupId="+groupId,
                buttons:"#checkDevice_edit"
           });
        });
Rae_C
关注
easyui与ztree结合实战实例
从放弃到开始
11-25 1167
jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。但功能相对没extjs强大，但页面也是相当好看的。一些功能也足够开发者使用，相对于extjs更轻量。        ...
easyUI和zTree的结合使用
12-09
JQuery zTree v2.6、jquery-easyui-1.3结合使用，包含easyUI和zTree两个完整的js框架包，希望对大家有所帮助。
ztree使用踩坑日记
weixin_44798280的博客
12-08 145
关于ztree使用的一些踩坑日记 最近公司有个需求要在前台的Modal中显示一棵树，后台使用了List.stream将数据通过父节点分了组，将数据拼接成了符合ztree的JSON字符串。前台通过ajax请求将字符串返回，回显给前台，一直报ztree的substring is undefind错误，本人也通过前台控制台打印了这个字符串书写正常，粘贴在JS中也可正常回显显示树。 #后台代码 Map<String, List<PortletEntity>> map = p
EasyUI树和Ztree树冲突问题
weixin_34376562的博客
01-06 181
1、今天做项目的时候出现了如下的错误。 　　报错：TypeError: $(...).tree is not a function 代码如下： 　　这是EasyUI的页面部分 $(function(){ $('#menu').tree({ onClick: function(node){ if($('#menu').tree("is...
easyUI插件与ztree插件
欢迎来到跃行者技术博客
07-18 3997
Jquery easyui 1.3.2          easyui 主要组件 1、 Form 表单组件 2、 Grid 表格组件 table 3、 Layout 布局组件 4、 Menu and Button 菜单和按钮 5、 Window 窗体 6、 Tree 树形结构   使用easyUI步骤     解压jquery-easyui-1.3.2.zip后将下列文件复制
jQuery EasyUI ztree插件使用
Wang_kang1的博客
06-05 1388
1.下载easyUI的开发包         该包的结构是    2.将easyUI的资源文件引入的页面中：&lt;link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css"&gt; &lt;link rel="stylesh...
jQuery EasyUI结合zTree树形结构制作web页面
12-11
要使用jQuery EasyUI和zTree结合构建树形结构，首先需要引入相关的CSS和JavaScript文件。在HTML文件中，你需要链接到EasyUI的主题文件、jQuery库、EasyUI的核心库以及zTree的全部功能文件（包括核心、隐藏、编辑和...
easyui+ztree后台管理系统模板
04-27
《基于EasyUI与ZTree的后台管理系统模板解析》 在当今的信息化社会，后台管理系统是企业运营不可或缺的一部分，它能够高效地管理数据、提供便捷的操作界面。本文将深入探讨一个基于EasyUI和ZTree的后台管理系统模板...
easyUI1.4与ztree3.5结合+ztree中文帮助文档
05-21
zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE、FireFox、Chrome 等浏览器，easyUI1.4与ztree3.5结合开发，ztree帮助文档对初用者很有帮助......
关于easyui与ztree的初步学习
ugly_birds的博客
08-08 727
自学easyui的一些知识点
把jquery 的dialog和ztree结合实现步骤
01-19
第一步：先准备好juqury-ui、ztree 的js文件和css 文件 第二步：example.jsp文件代码中写 代码如下: ..引入jqueryui、ztree 的js和css文件 <body> <button value=”点击弹出树的dialog对话框” onclick =”getTree()”/> <div id=”ztree” class=”ztree”/> </body> [removed] function getTree(){ var url = “<c value=’xx.html’/>”; var setting={
easyui tree onloadSuccess 事件心得
q258367406的博客
01-05 7424
在onloadSuccess事件中不能apeed节点，否则又会触发noloadsuccess事件，形成死循环。 公司电话：028-87657875           13060063607
Ztree 树的初始化、获取当前节点、刷新节点
weixin_42933886的博客
03-27 4475
1、$.fn.zTree.init(obj,zSetting,zNodes)zTree的初始化方法，创建zTree必须使用此方法 var setting = { view: { selectedMulti: false }, data : { simpleData : { enable : true,// 是否之用简单数据 idKey : 'I...
zTree实现打开页面时异步加载数据及选中项ID提交到后台
ayou_java的博客
01-15 5177
<span class="c-red">*角色名称： <input type="text" class="input-text" value="${role.roleName }" placeholder="" id="roleName" name="roleName" datatype="*4-16" nullmsg="用户账户
jQuery+zTree加载树形结构菜单
hu1991die的专栏
11-07 8217
jQuery+zTree加载树形结构菜单，简单介绍！
zTree 树形结构常用功能点
伍六七的博客
08-01 2198
示例： 数据格式： 一、获取zTree中选中的节点 /** * 获取treeId中选中的节点Id和Name */ function onCheck(treeId){ var treeObj=$.fn.zTree.getZTreeObj(treeId), nodes=treeObj.getCheckedNodes(true), v=&amp;quot;&amp;quot;; pid=...
遇见zTree和chrome的俩坑
weixin_30402085的博客
10-26 124
　　今天后台系统发现一bug,就是前几天用zTree做的树形结构,今下午突然不好使了,然后就查问题.我自己电脑装的是chrome浏览器,后台debug一看传的json数据,没毛病,想当然的断定不是数据的问题,然后就去前台打开debug模式,发现报错,错误内容是:""showMenue is undefiend"" ,查一下这个方法是哪里的吧,哦,尼玛原来是zTtee的js中的方法.想了一下这个js...
ztree中踩的坑
Yetian_2000的博客
02-04 457
ztree中每个节点都是可选择的，但每个节点的选择是相互不影响的，（并且不存在半选状态的情况，这个是重点，难点） 正常情况下： check: { enable:true, //每个节点都是可选择的,节点不要加nocheck就能满足需求 chkStyle: multiple? "checkbox" : "radio",//"checkbox", chkboxType
jQuery EasyUI datagrid 使用指南
在本文中，我们将深入探讨如何使用jQuery EasyUI的datagrid组件。 创建datagrid的第一步是在HTML页面中创建一个容器，通常是div元素，作为datagrid的承载区域。例如： ```html <div id="magazineGrid"></div> ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值