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

前情背景：需求使用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"
           });
        });