后台管理两级类别
<div class="content_warp"> <div style="padding:20px;"> <a href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="add_btn()">新增</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="collapseAll_btn()">全部收起</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="expandAll_btn()">全部展开</a> </div> <table id="order_list" class="easyui-treegrid" style="width: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',width:200,align:'center',formatter: rowformater" width="10%">操作</th> </tr> </thead> </table> </div> <div id="win" class="easyui-dialog" modal="true" title="增加货物类别" style="width: 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="width:300px;"></select> </div> <div class="fitem yinc"> <label>二级类别:</label> <input id="categoryTwo" class="easyui-textbox" style="width: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="width: 90px">提交</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="close_btn()" style="width: 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> <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: '一级类别必须选择或填写！', width: 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 + ' ] 类别吗?', width: 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，再去发请求做二级类别的增加，程序里也实现了单独增加一级或二级，同时增加的功能只是提供一种快捷方式。
