后台管理两级类别

<div class="content_warp">
    <div style="padding:20px;">
        <a href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="add_btn()">新增</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="collapseAll_btn()">全部收起</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="expandAll_btn()">全部展开</a>

    </div>
    <table id="order_list" class="easyui-treegrid" style="100%;height:758px;"
           data-options="
                animate:true,
                method: 'get',
                idField: 'CategoryID',
                treeField: 'CategoryName'
            ">
        <thead>
            <tr>

                <th data-options="field:'CategoryName'" width="80%">类名</th>
                <th data-options="field:'CreateDate'" width="10%" align="center">时间</th>
                @*<th data-options="field:'ParentID'" width="100" align="center">上级节点ID</th>
                    <th data-options="field:'TypeID'" width="100" align="center">所属分类</th>*@
                <th data-options="field:'CategoryID',200,align:'center',formatter: rowformater" width="10%">操作</th>
            </tr>
        </thead>
    </table>
</div>
<div id="win" class="easyui-dialog" modal="true" title="增加货物类别" style=" 400px; padding: 10px 20px; height: 300px;"
     closed="true" buttons="#dlg-buttons">

    <form id="fm" method="post" action="" style="margin-top: 20px; margin-left: 20px;">
        <div class="fitem">
            <label>一级类别:</label>
            <select id="categoryOne" class="easyui-combobox" name="dept" style="300px;"></select>
            
        </div>
        <div class="fitem yinc">
            <label>二级类别:</label>
            <input id="categoryTwo" class="easyui-textbox" style="300px;"/>
        </div>

        <!--直接写提交取消的事件不需要在js中绑定-->
        <div id="dlg-buttons" style="display: block">
            <a id="confirm" href="javascript:void(0)" class="easyui-linkbutton c6" iconcls="icon-ok" onclick="submitModel_btn()" style=" 90px">提交</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="close_btn()" style=" 90px">取消</a>
        </div>
    </form>
</div>
<div id="audits_importDialog"></div>
<input type="hidden" id="curtypeID" />
<input type="hidden" id="curparentID" />
<input type="hidden" id="curcategoryID" />
<input type="hidden" id="curcontainerLength" value="0"/>

    var parents = [];//存获取的所有父类id
    var addnew = 0;//判断是否新增
    $(function () {
        //$.messager.defaults = { ok: "确定", cancel: "取消" };//修改$.messager.confirm按钮显示文字
        CategoryList_getlist(1,-1);
    })

    //获取列表
    function CategoryList_getlist(tid, pid) {
        if (typeof tid == 'undefined') {
            tid = 1
        }
        if (typeof pid == 'undefined') {
            pid = -1
        }
        $.ajax({
            type: 'get',
            dataType: "json",
            url: "/Goods_TruckAttribute/GetList",
            data: {
                typeID: tid,//1，货物类别   2，车辆类别   3，货箱长度
                parentID: pid,//-1时根据该条件查，否则不使用该条件
            },
            cache: false,
            async: false,
            success: function (msg) {
                if (msg.status.code == 1) {
                    var len = msg.row_data.record;
                    
                    $('#order_list').treegrid('loadData', { total: 0, rows: [] });
                    $("#order_list").treegrid({ data: len });
                    parents = [];
                    for (var i = 0; i < len.length; i++) {
                        parents.push(len[i].CategoryID);//将所有的父类id存入
                    }
                } else {
                    $.messager.alert("提示", msg.status.msg);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
            }
        });
    }
    //获取一级类
    function CategoryList(tid, pid) {
        if (typeof tid == 'undefined') {
            tid = 1
        }
        if (typeof pid == 'undefined') {
            pid = -1
        }
        $.ajax({
            type: 'get',
            dataType: "json",
            url: "/Goods_TruckAttribute/GetList",
            data: {
                typeID: tid,//1，货物类别   2，车辆类别   3，货箱长度
                parentID: pid,//-1时根据该条件查，否则不使用该条件
            },
            cache: false,
            async: false,
            success: function (msg) {
                if (msg.status.code == 1) {
                    var len = msg.row_data.record;
                    //console.log(len)
                    //len[0].selected = true;//给当前项加默认选中，等添加多个类别后再来改这个问题
                    $("#categoryOne").combobox({
                        valueField: 'CategoryID',
                        textField: 'CategoryName',
                        //editable: true,
                        //required: true,
                        mode: 'local',
                        data: len,
                        onLoadSuccess: function () {
                            $('#categoryOne').combobox('setValue', '');
                        }

                    });
                } else {
                    $.messager.alert("提示", msg.status.msg);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
            }
        });
    }
    //增加按钮
    function rowformater(row) {
        return '<button onclick="edit_btn(' + row + ')">编辑</button>&nbsp;&nbsp;&nbsp;&nbsp;<button onclick="delete_btn(' + row + ')">删除</button>';
    }
    //编辑
    function edit_btn(id) {
        addnew = 0;
        $('#win').dialog({
            title: '编辑货物类别',
            modal: true
        });
        $('#win').dialog('open');
        var curId = id;
        $.ajax({
            type: 'get',
            dataType: "json",
            url: "/Goods_TruckAttribute/GetModel",
            data: {
                ID: curId
            },
            cache: false,
            async: false,
            success: function (msg) {
                if (msg.status.code == 1) {
                    //console.log(msg.row_data.record);
                    $("#curparentID").val(msg.row_data.record.ParentID);
                    $("#curcategoryID").val(msg.row_data.record.CategoryID);
                    $("#curtypeID").val(msg.row_data.record.TypeID);
                    //console.log(curparentID, curcategoryID, curtypeID)
                    if (msg.row_data.record.ParentID == 0) {
                        //这是修改一级类别，将二级的值清空并设为不可用
                        $('#categoryOne').combobox({
                            required: true,//必填项
                            editable: true,//开启编辑模式
                            hasDownArrow: false,//隐藏下拉框按钮
                            panelHeight: 1//下拉框高度设置1，彻底看不到下拉框
                        });
                        CategoryList(1, 0);//获取所有一级类
                        //一级类中ParentID存的都是0，所以用id来设置
                        $('#categoryOne').combobox('setValue', id);//先要获取一级类，才能去设置值
                        
                        $('#categoryTwo').textbox({
                            value: '',
                            disabled: true//设置是否可用
                            //cls:'hidden_textbox'//这个只能隐藏input
                        });
                        $(".yinc").css({display:'none'})//隐藏二级
                    } else {
                        //这是修改二级类别
                        $('#categoryOne').combobox({
                            required: true,//必填项
                            editable: false,
                            hasDownArrow: true,
                            panelHeight: 200
                        });
                        CategoryList(1, 0);//获取一级类
                        //二级类中ParentID存的才是正确的一级id
                        $('#categoryOne').combobox('setValue', $("#curparentID").val());//先要获取一级类，才能去设置值
                        
                        $('#categoryTwo').textbox({
                            value: msg.row_data.record.CategoryName,
                            disabled: false
                        })
                        $(".yinc").css({ display: 'block' })
                    }
                    
                } else {
                    $.messager.alert("提示", msg.status.msg);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
            }
        });
        
    }
    //提交
    function sendOut(curtypeID, curname, curparentID, curcontainerLength, curID) {
        $.ajax({
            type: 'post',
            dataType: "json",
            url: "/Goods_TruckAttribute/Add_Upd",
            data: {
                typeID: curtypeID,//1，货物类别2，车辆类别3，货箱长度
                name: curname,//显示名称
                parentID: curparentID,//父节点ID
                containerLength: curcontainerLength,//货箱长度，typeID=3时用到
                ID: curID//大于0为修改，传当前修改的这条信息的id
            },
            cache: false,
            async: false,
            success: function (msg) {
                //console.log(msg);
                if (msg.status.code == 1) {
                    
                    $("#curcategoryID").val('');
                    $("#curtypeID").val('');
                    $("#curparentID").val('');
                    $("#curcontainerLength").val(0);
                    $('#win').dialog('close');
                    
                    CategoryList_getlist(1, -1);

                } else {
                    $.messager.alert("提示", msg.status.msg);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
            }
        });
    }
    //提交修改
    function submitModel_btn() {
        var curcontainerLength = Number($("#curcontainerLength").val());
        var curID = Number($("#curcategoryID").val());
        var curtypeID = Number($("#curtypeID").val());
        var flag = false;
        var par = Number($("#categoryOne").combobox('getValue'));//获得我选择的父类id
        //获取到的父类id必须是数字，而且存在，否则都为0
        for (var i = 0; i < parents.length; i++) {
            //遍历数组判断par是否包含其中，包含说明是在原有类上增加二级，否则是新增加一级类
            if (par === parents[i]) {
                flag = true;
            }
        }
        if (par && flag) {//par存在，并且包含在原有类中
            var curparentID = par;
        } else {//新增类，其实为0
            var curparentID = Number($("#curparentID").val());
        }
        if ($('#categoryOne').combobox('getText')=='') {
            $.messager.confirm({
                title: '提示：',
                msg: '一级类别必须选择或填写！',
                 350,
                height: 170,
                modal: true,//开启灰色背景
                fn: function (r) {
                    
                }
            });
            return
        }
        
        

        //先发添加一级的请求，然后再发请求获取到新增一级的id，再发请求提交二级的信息
        if (addnew == 1) {
            //只有新增的时候才会走
            var _parents = parents.slice();//添加之前的数组
            if (curparentID == 0) {
                //当录入一级类别时
                var curname = $('#categoryOne').combobox('getText');
                //console.log(curtypeID, curname, curparentID, curcontainerLength, curID)
                sendOut(curtypeID, curname, curparentID, curcontainerLength, curID);
                var curname2 = $('#categoryTwo').textbox('getValue');
                if (curname2 != '') {//二级有录入的情况下
                    //获取刚刚新增的一级类
                    CategoryList_getlist(1, -1);

                    let minus = $(parents).not(_parents).toArray();//jq的两个数组去差集
                    curparentID = minus[0]//得到新的一级类id

                    //console.log(curtypeID, curname2, curparentID, curcontainerLength, curID, 456)
                    sendOut(curtypeID, curname2, curparentID, curcontainerLength, curID)
                }
            } else {
                //当选择一级，录入二级的情况下
                var curname2 = $('#categoryTwo').textbox('getValue');
                //console.log(curtypeID, curname2, curparentID, curcontainerLength, curID, 456)
                sendOut(curtypeID, curname2, curparentID, curcontainerLength, curID)
            }
            

        } else {
            //修改时
            if (curparentID == 0) {
                //修改一级类别
                var curname = $('#categoryOne').combobox('getText');
                //console.log(curtypeID, curname, curparentID, curcontainerLength, curID, 123)
                sendOut(curtypeID, curname, curparentID, curcontainerLength, curID)
            } else {
                //修改二级类别
                var curname2 = $('#categoryTwo').textbox('getValue');
                //console.log(curtypeID, curname2, curparentID, curcontainerLength, curID, 456)
                sendOut(curtypeID, curname2, curparentID, curcontainerLength, curID)
            }
        }
    }


    function delete_btn(id) {
        //通过传进来的id获取当前要操作的信息
        var cur = $('#order_list').treegrid('find', id).CategoryName;
        var tid = $('#order_list').treegrid('find', id).TypeID;
        var pid = $('#order_list').treegrid('find', id).ParentID;
        //console.log('CategoryName:', cur, 'TypeID:', tid, 'ParentID:', pid, 'id:',id)
        $.messager.confirm({
            title: '提示：',
            msg: '您确定删除 [ ' + cur + ' ] 类别吗?',
             350,
            height: 170,
            modal: true,//开启灰色背景
            fn: function (r) {
                if (r) {
                    $.ajax({
                        type: 'post',
                        dataType: "json",
                        url: "/Goods_TruckAttribute/Del",
                        data: {
                            ID: id,
                            ParentID: pid,
                            TypeID:tid,
                        },
                        cache: false,
                        async: false,
                        success: function (msg) {
                            //console.log(msg)
                            if (msg.status.code == 1) {
                                CategoryList_getlist(1, -1);
                            } else {
                                $.messager.alert("提示", msg.status.msg);
                            }
                        },
                        error: function () {

                        }
                    })
                }
            }
        });
        
    }



    function add_btn() {
        //添加父类时
        addnew = 1;
        $(".yinc").css({ display: 'block' })
        $("#curcategoryID").val(0);
        $("#curparentID").val(0);
        $("#curtypeID").val(1);
        $("#curcontainerLength").val(0);

        $('#win').dialog({
            title: '增加货物类别',
            modal: true
        });
        $('#win').dialog('open');

        CategoryList(1, 0)
        $('#categoryOne').combobox({
            required: true,//必填项
            editable: true,
            hasDownArrow: true,
            panelHeight: 200
        });
        $('#categoryTwo').textbox({
            value: '',
            disabled: false,
            //cls:'hidden_textbox'//这个只能隐藏input
        });
    }
    function close_btn() {
        $('#win').dialog('close');
    }
    //展开收起列表
    function collapseAll_btn() {
        $('#order_list').treegrid('collapseAll');
    }
    function expandAll_btn() {
        $('#order_list').treegrid('expandAll');
    }

    
    
    

这里主要实现的功能是在添加类别的时候，一级二级同时添加，先发送请求上传一级类别，再发送请求获取所有的一级类别，拿新数组和旧数组取差集【$(新数组).not(旧数组).toArray();】，就得到我刚刚新增加的了，（这个不适用多人同时操作），拿到新增的一级类别id，再去发请求做二级类别的增加，程序里也实现了单独增加一级或二级，同时增加的功能只是提供一种快捷方式。