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 ...
随机推荐
- HDU 5907 Find Q（简单字符串）
传送门 Description Byteasar is addicted to the English letter 'q'. Now he comes across a string S consi ...
- Map集合遍历的2种方法
Map是一个集合的接口,是key-value相映射的集合接口,集合遍历的话,需要通过Iterator迭代器来进行. Iterator是什么东西: java.util包下的一个接口: 对 collect ...
- iOS - 全屏滑动
取经地址 1.使用关联 关联是指把两个对象相互关联起来,使得其中的一个对象作为另一个对象的一部分. 使用关联,是基于关键字的,因此,我们可以为任意对象增加任意多的关联,但是关键字是唯一的.关联可以保证 ...
- spring+hibernate ---laobai
biz包: package com.etc.biz; import java.util.List; import org.springframework.orm.hibernate3.support. ...
- 安装Virtual Box增强功能 - Ubuntu
一.开发环境 操作系统:Windows 7Virtual Box 版本: 5.0.10 虚拟机系统: Ubuntu 12.04 LTS 二.问题 进入Ubuntu图形界面后,选择“设备” --> ...
- C#读写文本和连接数据库
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- WinForm------GridControl控件中使用SearchLookUpEdit控件的方法
1.在数据库添加两张表,拥有主外键关系 主键表: 外键表: 2.往工具栏里拖出GridCont控件,并增加相应的列,这里对"省份"进行修改,"FileName" ...
- StringBuilder 拼接sql语句比较快
StringBuilder 拼接sql语句比较快StringBuilder strBuilder = new StringBuilder();strSql += "insert into t ...
- 初识Hadoop一，配置及启动服务
一.Hadoop简介: Hadoop是由Apache基金会所开发的分布式系统基础架构,实现了一个分布式文件系统(Hadoop Distributed File System),简称HDFS:Hadoo ...
- MySQL学习笔记——多表连接和子查询
多表连接查询 # 返回的是两张表的乘积 SELECT * FROM tb_emp,tb_dept SELECT COUNT(*) FROM tb_emp,tb_dept # 标准写法,每个数据库都能这 ...