JQuery仿淘宝商家后台管理 之 管理添加分类
2024-10-17 00:41:42
先看一下效果图：
实现功能：
1、打开时加载分类信息，折叠所有分类
2、动态添加子类和父类
3、顺序的调整
4、无刷新删除，添加
5、保存到数据库
下面是HTML代码 ：
<title>分类管理</title>
<link href="../CSS/css.css" rel="stylesheet" type="text/css" charset="utf-8" />
<script src="../JS/jquery-1.4.4.js" language="javascript" type="text/javascript" charset="utf-8"></script>
<script language="javascript" type="text/javascript" src="../JS/publicChange.js" charset="utf-8"></script>
<script language="javascript" type="text/javascript" src="../JS/publicAEMethod.js" charset="utf-8"></script>
<script language="javascript" type="text/javascript" charset="utf-8">
$(function () {
var fathorClassHTML = "<tbody><tr class='proClass'><td><input class='chk' type='checkbox' /></td><td><i id='' class='arrow'></i></td><td><input id='Text2' type='text' /></td><td><div class='move-box'><a class='move-top move' href='javascript:void(0)' >置顶</a><a class='move-up move' href='javascript:void(0)' >上移</a><a class='move-down move' href='javascript:void(0)' >下移</a><a class='move-btm move' href='javascript:void(0)' >置底</a></div></td><td>2013-02-24</td><td><a href='javascript:void(0)' class='delClass'>删除</a></td></tr></tbody>";
var childClassHTML = "<tr class='cat-sub'><td><input class='chk' type='checkbox' /></td><td></td><td class='addChildTd'><input id='child1' class='child' type='text' /></td><td><div class='move-box'><a class='move-up move' href='javascript:void(0)' >上移</a><a class='move-down move' href='javascript:void(0)' >下移</a></div></td><td>今天</td><td><a href='javascript:void(0)' class='delClass'>删除</a></td></tr>";
var addChildBtnHTML = "<tr class='cat-sub catbtn'><td></td><td></td><td class='addChildTd'><a class='addChild'><em>添加子类</em></a></td><td></td><td></td><td></td></tr>"; //删除分类 事件
var delClass = function () {
//给 删除 注册事件
$(".delClass").unbind("click").click(function () {
if (window.confirm("确认要删除？如果该分类下有子分类，那么也将一并删除！")) {
//获取当前行TR
var $delObj = $(this).parent().parent();
//判断：如果是父类，则将父类下所有子类连同本身一并删除，如果是子类，只删除本身
var deleteTR; //获取要删除的行<tr>
var DelObj; //获取要删除行的类别 F：父类，C：子类
if ($delObj.hasClass("proClass")) {
deleteTR = $delObj.nextAll().andSelf();
DelObj = "F";
}
else {
deleteTR = $delObj.fadeOut("slow");
DelObj = "C";
} //异步到后台删除分类信息：
var classID = $(this).attr("value");
if (classID == undefined) {
deleteTR.remove();
return;
}
$.post(
"/AdminView/ashx/DeletClass.ashx",
{ "Action": "Delete", "ClassID": classID, "DelObj": DelObj },
function (data) {
if (data == "OK") {
alert("删除成功！");
deleteTR.remove();
} else {
alert("删除失败！");
}
}) }
});
} //展开隐藏 事件
var showOrHide = function () {
//给 展开 注册事件
$("i").unbind("click").click(function () {
//取得当前的父节点tbody
var $currTbody = $(this).parent().parent().parent(); //如果是隐藏，则更换为展开的样式
if ($(this).attr("class") == "arrow") {
$(this).removeClass("arrow").addClass("arrow-down");
//如果没有 添加子类按钮 则添加按钮并注册事件
if (!$currTbody.children(".catbtn").html()) {
$currTbody.append(addChildBtnHTML);
addChildClass();
}
//有 添加的按钮 则显示
$currTbody.children(".cat-sub").each(function () { $(this).show() });
}
else {
//如果有 添加的按钮 则隐藏
if ($currTbody.children(".catbtn").html()) {
$currTbody.children(".cat-sub").each(function () { $(this).hide() });
}
//更改样式为隐藏
$(this).removeClass("arrow-down").addClass("arrow");
};
});
} //添加父类 事件
var addFathorClass = function () {
//给 添加父类 注册事件
$("#add_ptitle").click(function () {
$(".addClassTbl").append(fathorClassHTML);
showOrHide();
delClass();
moveClass();
});
} //添加子类 事件
var addChildClass = function () {
$(".addChild").unbind("click").click(function () {
$(this).parent().parent().before(childClassHTML);
//添加子节点后： 注册删除事件【在此注意思事件的重复绑定】
delClass();
moveClass();
});
} //保存数据 事件
var saveProClass = function () {
//给 保存更改 注册事件：
$("#EditOk").click(function () {
//获取类别的名称 并生成相应的排序ID
var i = 0;
var strClass = strChilds = '';
$(".proClass").each(function () {
i++; //父类的排序ID
strClass += i + '&' + $(this).children().children("input:[type='text']").val() + ',';
var $childs = $(this).parent().children(".cat-sub").not(":last");
var j = 0;
$childs.each(function () {
j++; //子类的排序ID
strChilds += i + '-' + j + '&' + $(this).children().children("input:[type='text']").val() + ',';
});
});
//异步发送到后台，保存并返回消息
$.post("/AdminView/ashx/UpdateClasses.ashx", { "strClass": strClass, "strChilds": strChilds }, function (data) {
if (data == "OK") {
alert("更新成功！");
} else {
alert("更新失败！");
}
});
}); } //移动分类 事件
var moveClass = function () {
$(".move-top").unbind("click").click(function () {
$(this).parents("table").children("thead").after($(this).parents("tbody"));
});
$(".move-btm").unbind("click").click(function () {
$(this).parents("table").children().last().after($(this).parents("tbody"));
});
$(".move-up").unbind("click").click(function () {
var currTr = $(this).parent().parent().parent();
//所在行是父类
if (currTr.attr("class") == "proClass") {
if (currTr.parent().prev().is("thead")) return false; //已经到顶层
currTr.parent().prev().before(currTr.parent());
}
//所在行是子类
else if (currTr.attr("class") == "cat-sub") {
if (currTr.prev().attr("class") == "proClass") return false; //已经到顶层
currTr.prev().before(currTr);
}
});
$(".move-down").unbind("click").click(function () {
var currTr = $(this).parent().parent().parent();
//所在行是父类
if (currTr.attr("class") == "proClass") {
if (!currTr.parent().next()) return false; //已经到底层
currTr.parent().next().after(currTr.parent());
}
//所在行是子类
else if (currTr.attr("class") == "cat-sub") {
if (currTr.next().hasClass("catbtn")) return false; //已经到底层
currTr.next().after(currTr);
} });
} //全选 事件
var checkAll = function () {
$("#chkAllBox").click(function () {
$(".chk").each(function () {
this.checked = document.getElementById("chkAllBox").checked;
});
}); } //加载时，初始化事件
delClass();
showOrHide();
addFathorClass();
addChildClass();
saveProClass();
moveClass();
checkAll();
$("i").click().click(); //隐藏子类
});
</script>
<body>
<form id="form1" runat="server" style="height: auto;">
<div style="width: 100%; height: auto; overflow: hidden;">
<div class="shop_infor">
<div class="admin_title">
<div class="pro_add_title">分类管理>>添加新分类</div>
</div>
<div class="shop_infor_con">
<div class="pro_addbox">
<div class="title_bf">
<div class="add_title">
<div class="checkAll classOpr" ><input class="" id="chkAllBox" type="checkbox" />全选</div>
<div class="delAll classOpr">批量删除</div>
<div class="addClasses classOpr" id="add_ptitle">添加新分类</div>
</div>
<div class="title_box">
<!---------------- 分类表格 BEGIN ----------------->
<table class="addClassTbl" cellspacing="0">
<thead>
<tr><td></td><td></td><td>分类名称</td><td>移动</td><td>创建时间</td><td>操作</td></tr>
</thead>
<% foreach (var classes in classModelList)
{%>
<tbody>
<tr class="proClass">
<td><input class="chk" type="checkbox" /></td>
<td><i id="" class="arrow"></i></td>
<td><input id="Text2" type="text" name="txtName" value="<%:classes.ClassName%>" /></td>
<td>
<div class="move-box">
<a class="move move-top" href="javascript:void(0)" >置顶</a>
<a class="move move-up" href="javascript:void(0)" >上移</a>
<a class="move move-down" href="javascript:void(0)" >下移</a>
<a class="move move-btm" href="javascript:void(0)" >置底</a>
</div>
</td>
<td>2013-02-24</td>
<td><a href="javascript:void(0)" class="delClass" value='<%:classes.ID%>'>删除</a></td>
</tr>
<%foreach (var child in modelClassChild)
{
//根据父类ID拼接相应的子类
if (child.ClassID.Substring(0, child.ClassID.IndexOf('-')) == classes.ClassID)
{%>
<tr class='cat-sub'>
<td><input class='chk' type='checkbox' /></td>
<td></td>
<td class='addChildTd'><input id='child1' class='child' type='text' value="<%:child.ClassChildName%>" /></td>
<td>
<div class='move-box'>
<a class='move-up move' href='javascript:void(0)' >上移</a>
<a class='move-down move' href='javascript:void(0)' >下移</a>
</div>
</td>
<td>今天</td>
<td><a href='javascript:void(0)' class='delClass' value='<%:child.ID %>'>删除</a></td>
</tr>
<%}
}%> <tr class='cat-sub catbtn'><td></td><td></td><td class='addChildTd'><a class='addChild'><em>添加子类</em></a></td><td></td><td></td><td></td></tr>
</tbody>
<%} %>
</table>
<!---------------- 分类表格 END ----------------->
</div> <!---------------- 确认更改 BGEIN---------------->
<div class="float_div">
<div class="add_butt">
<img alt="保存更改" src="../Images/tanchu_add02.gif" id="EditOk"/>
</div>
</div>
<!-- 确认更改 END-->
</div>
</div>
</div>
</div>
</div>
</form>
</body>
后台数据一般处理程序代码：
添加
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web; namespace FM.Web.AdminView.ashx
{
/// <summary>
/// UpdateClasses 的摘要说明
/// </summary>
public class UpdateClasses : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string strClass = context.Request["strClass"].TrimEnd(',');
string strChilds = context.Request["strChilds"].TrimEnd(','); BLL.ClassInfo bll = new BLL.ClassInfo();
BLL.ClassChild bllChild = new BLL.ClassChild(); if (strClass.Length > 0 || strChilds.Length > 0)
{
try
{
string[] classes = strClass.Split(',');
string[] childs = strChilds.Split(',');
//读取父类数据 保存到数据库中
foreach (string item in classes)
{
string[] classInfo = item.Split('&');
string classID = classInfo[0];
string className = classInfo[1];
bll.CheckAndAddClass(classID, className);
} //读取子类数据 保存到数据库中
foreach (string item in childs)
{
string[] childrenInfo = item.Split('&');
string classID = childrenInfo[0];
string childClassName = childrenInfo[1]; bllChild.CheckAndAddClassChild(classID, childClassName);
}
context.Response.Write("OK");
}
catch
{
context.Response.Write("error");
}
}
else
{
context.Response.Write("error");
}
} public bool IsReusable
{
get
{
return false;
}
}
}
}
删除
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web; namespace FM.Web.AdminView.ashx
{
/// <summary>
/// DeletClass 的摘要说明
/// </summary>
public class DeletClass : IHttpHandler
{
BLL.ClassInfo bllClass = new BLL.ClassInfo();
BLL.ClassChild bllChild = new BLL.ClassChild(); public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
if (!string.IsNullOrEmpty(context.Request["Action"]))
{
if (context.Request["Action"] == "Delete")
{
string ID = context.Request["ClassID"] == null ? "-1" : context.Request["ClassID"];
string DelObj = context.Request["DelObj"];
int delID = int.Parse(ID);
if (DelObj == "F")//父类
{
//根据ID查询父类的排序ID，再删除子类和父类
Model.ClassInfo modelClass = bllClass.GetModel(delID);
string classID = modelClass.ClassID;
if (bllChild.DeleteList("ClassID like '" + classID + "-%" + "'"))
{
if (bllClass.Delete(delID))
{
context.Response.Write("OK");
return;
}
}
context.Response.Write("error");
}
else if (DelObj == "C")//子类
{
if (bllChild.Delete(delID))
{
context.Response.Write("OK");
return;
}
context.Response.Write("error");
}
else
{
context.Response.Write("error");
}
}
else
{
context.Response.Write("error");
}
}
else
{
context.Response.Write("error");
}
} public bool IsReusable
{
get
{
return false;
}
}
}
}
最新文章
- AMD and CMD are dead之KMDjs内核之依赖分析
- WinCE项目应用汇总
- Java排序算法——希尔排序
- Asp.net发布的CheckList
- Java 收集的代码 transient
- 【转】oracle connect by用法
- 玩转createjs
- Selenium webdriver 截图 太长截不全的问题
- 进阶：案例三: Upload File using WebDynpro
- MAC apache 2.4 启用目录访问
- Java基础——抽象类和接口
- H5新增标签
- codeforces-5
- centos 查找命令的可用包/命令属于哪个软件包
- jinja模板语法
- c++ string split
- Docker的入门使用（初探总结）
- MySQLdb & pymsql
- iOS 9应用开发教程之使用开关滑块控件以及滚动部署视图
- JS cookie 设置 查看 删除