JQuery仿淘宝商家后台管理 之 管理添加分类
先看一下效果图：
实现功能：
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;
}
}
}
}
JQuery仿淘宝商家后台管理 之 管理添加分类的更多相关文章
- 使用jQuery仿淘宝商城多格焦点图滚动切换效果
1.效果及功能说明 图片滚动切换特效,高仿2012淘宝商城首页多格子焦点图切换,鼠标滑过焦点图片各个格子区域聚光灯效果展示 2.实现原理 在显示div的下面有一个按钮条在鼠标触及到按钮的时候会改变那妞 ...
- jquery仿淘宝规格颜色选择效果
jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...
- 一款基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- jQuery仿淘宝图片无缝滚动轮播
自己前天,也就是1月8日的时候早上自己写了一个图片滚动轮播(基于jQuery). 其实几个月以前就有朋友问过我怎么做出和淘宝上面一样的滚动轮播,一直到现在也没有真正的写好,这次写得差不多了. 但是还有 ...
- 基于jQuery仿淘宝产品图片放大镜代码
今天给大家分享一款 基于jQuery淘宝产品图片放大镜代码.这是一款基于jquery.imagezoom插件实现的jQuery放大镜.适用浏览器:IE8.360.FireFox.Chrome.Safa ...
- JQuery仿淘宝滚动加载图片
用 JQuery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第 ...
- 基于jQuery仿淘宝产品图片放大镜特效
在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件). 放大镜效果 常用的js组件jquery.imagezoom,jquery.jqzoom,jqu ...
- jQuery制作淘宝商城商品列表多条件查询功能
一.介绍 这几天做网站的时候,突然用到这个功能,找了好久也没有找到.看到"希伟素材网"有这么一个JS,效果很不错,也正是我一直以来想要的结果.附图如下: 二:使用教程 1 ...
- jquery仿淘宝购物车页面商品结算（附源码）
1.效果图如下: 2.源码如下: html部分: <!doctype html> <html lang="en"> <head> <met ...
随机推荐
- linux挂载远程samba目录
yum install cifs-utils #安装cifs协议包 #列出远程目录 smbclient -L 192.100.9.165 -Uadministrator vim /etc/fstab ...
- 浅析初等贪吃蛇AI算法
作为小学期程序设计训练大作业的一部分,也是自己之前思考过的一个问题,终于利用小学期完成了贪吃蛇AI的一次尝试,下作一总结. 背景介绍: 首先,我针对贪吃蛇AI这一关键词在百度和google上尽心了检索 ...
- SLF4J的好处
原来我们使用log4j去打印日志,如果我们要更改日志记录器,比如用comms-Logging,那我们在代码里面还要改每个类的引用包,但是如果用slf4j的话只要在配置的时候改下,代码完全用slf4j的 ...
- gvim e303 无法打开 “[未命名]“的交换文件，恢复将不可能
今天vim出现:“gvim e303 无法打开 “[未命名]“的交换文件,恢复将不可能” 解决办法: 修改你的.vimrc,增加下面的一行: set directory=.,$TEMP "默 ...
- Loadrunner关联取参及设置检查点
Loadrunner关联取参及设置检查点: 获取post的响应值当作参数存储,要在此post请求之上添加 web_reg_save_param("sign", "LB=m ...
- Docker探索系列2之镜像打包与DockerFile
preface docker基本入门以后,可以试试打包docker镜像与dockerfile了 docker镜像 docker hub仓库有2类仓库,用户仓库和顶层仓库,用户仓库由docker用户创建 ...
- 国家电力项目SSH搭建
SSH项目框架搭建总结: 1.建立Web工程 * 导入需要的jar的包 db:连接数据库的驱动包 hibernate:使用hibernate的jar包 jstl:java的标准标签库 junit:测试 ...
- jsp action中附件下载的写法
//一些主要的包和类 import java.io.File;import java.io.FileInputStream;import java.io.IOException;import java ...
- oracle表字段为汉字，依据拼音排序
在order by后面使用NLSSORT函数转化汉字列,如下 select * from student order by NLSSORT(name,'NLS_SORT=SCHINESE_PINYIN ...
- springmvc 表单字段list提交问题
比如用户表user 选课表course 用户表有选课字段list<course> courses=new ArrayList<course>(); <input type ...