父级ID可以为空以两个编号为一级 可以添加到第四级

table 字段有ID、 name 、parentNode、 childNode等基本属性  selecet  parentNode  ,len(childNode)/2 as level,...... from table

<table id="tableList">  </table> id列表显示属性HTML省略

html:

<divid="dialog-form"title="新增|修改"style="display: none;"><pclass="validateTips"></p><labelfor="parentNode"style="float: left">父级栏目：</label><selectid="SelectNode"style="height: 22px"><optionvalue="-1">请选择</option></select><selectid="SelectNode2"style="height: 22px"><optionvalue="-1">请选择</option></select><selectid="SelectNode3"style="height: 22px"><optionvalue="-1">请选择</option></select><p></p><p></p><labelfor="nodecode"style="float: left">栏目编号：</label><inputtype="text"name="nodecode1"id="nodecode1"style="width: 72px; background-color: #cacaca;"maxlength="2"readonly="readonly" /><%--一级栏目编号--%><inputtype="text"name="nodecode2"id="nodecode2"style="width: 72px;"maxlength="2"onkeyup="lengthLimit(this)"    /><%--二级栏目编号--%><p></p><labelfor="menuName"style="float: left">栏目名称：</label><inputtype="text"name="menuName"id="menuName"maxlength="20"onkeyup="checkNull(this)"style="width: 200px" /><p></p>   <labelfor="icoUrl"style="float: left">栏目图标：</label><div><divid="J_imageView"style="margin-left: 50px"><imgalt=""id="img_rs_stu"style="width: 32px; height: 32px"src="" /></div><divstyle="margin-left: 70px; margin-top: 5px; border-bottom: 5px"><inputtype="button"id="uploadButton"value="上传"style="height: 50px; width: 110px;float: left;" /></div></div><p></p></div><divclass="ctent"><inputtype="button"id="create-menu"value="新增栏目" /></div>

js:

js<script type="text/javascript">var iType = 0;//新增栏目操作$("#create-menu").button().click(function() {BindChange();IniteDropDown([]);tag= "add";$("#dialog-form").dialog("open");$.post("/ashx/menusHandler.ashx", { fun: 'getMaxNum', type: iType }, function(data, status) {$('#num').attr("disabled", "disabled")$("#num").val(data);});});});//初始化下拉框functionIniteDropDown(c) {//清除$("#SelectNode > option[value!='-1']").remove();$("#SelectNode2 > option[value!='-1']").remove();$("#SelectNode3 > option[value!='-1']").remove();//加载下拉框数据 一级二级三级栏目联动
IniteSelect({ids: ['SelectNode', 'SelectNode2', 'SelectNode3'],swType: ['GetCloumn', 'GetCloumn', 'GetCloumn'], BaseUrl: '/ashx/DropDownControl.ashx?aktype=' +iType,callBack: c});}//栏目下拉选择节点名称值赋给文本框 获取 父节点的栏目名称编号//change 选项注册事件 根据下拉后赋值给控件functionBindChange() {$("#SelectNode").change(function () { //当第一个下拉列表变动内容时第二个下拉列表将会显示var temp = $(this).val();if (temp == '-1') temp = ''; //选项为-1时 文本值为空$("#nodecode1").val(temp)//当第一个下拉列表变动内容时栏目编号显示父级编号
});//二级下拉框事件$("#SelectNode2").change(function() {var temp = $(this).val();if (temp == '-1') temp = $('#SelectNode').val();//显示父节点编号if (temp == '-1') temp = ''; //文本值编号为空$("#nodecode1").val(temp)});//三级下拉框事件$("#SelectNode3").change(function() {var temp = $(this).val();if (temp == '-1') temp = $('#SelectNode2').val();if (temp == '-1') temp = $('#SelectNode').val();if (temp == '-1') temp = '';$("#nodecode1").val(temp)});}//初始化加载数据获取列表信息functionGetData() {InitPager({PageId:"#paging",Url:"/ashx/menusHandler.ashx",Options: { fun:"list", type: iType }, CallBack:function(result) {$('#tbody').html('');$("#menuDemo").tmpl(result.Rows).appendTo("#tbody");returnresult.Total;}});}vartag, strGuid;var aaa = false;var imgurl = "";$(function() {GetData();$("#dialog-form").dialog({autoOpen:false,bgiframe:true,height:400,width:400,modal:true,buttons: {"保 存": function() {var bValid = true;var nodecode1 = $("#nodecode1").val(); //栏目一级编号var nodecode2 = $("#nodecode2").val(); //栏目二级编号var childnode = nodecode1 + nodecode2;  //子节点var menuname = $("#menuName").val();var icoUrl =imgurl;if (nodecode2=='' || nodecode2.length < 2) {bValid= false;updateTips("编号不能为空且长度不能小于两位！");}if (menuname =='') {bValid= false;updateTips("栏目名称必填！");}if(bValid) {$.post('/ashx/menusHandler.ashx', { fun: 'save', nodecode1: nodecode1, menuname: menuname, icoUrl: imgurl, type: iType, tag: tag, guid: strGuid, childnode: childnode },function(status) {if (status == "OK") {ReflashPager();alertmessage("操作提示", "信息保存成功！", null);}else{alertmessage("保存失败！编号不能与已存在编号相同!");}});$(this).dialog("close");}},"取 消": function() {$(this).dialog("close");}},open:function(event, ui) {//文件上传if (!aaa) {var K =KindEditor;var uploadbutton =K.uploadbutton({button: K('#uploadButton')[0],fieldName:'imgFile',url:'/ashx/FileUploadHandler.ashx?filetype=logo',afterUpload:function(data) {if (data.error === 0) {var url = K.formatUrl(data.url, 'absolute');var div = K('#J_imageView');div.html('');div.append('<img src="' + url + '" style="width: 32px; height: 32px;"/>');K('#url1').val(url);imgurl=url;}else{alert(data.message);}},afterError:function(str) {alert('自定义错误信息: ' +str);}});uploadbutton.fileBox.change(function(e) {uploadbutton.submit();});aaa= true;}},close:function() {$("#nodecode1").val('');$("#nodecode2").val('');$("#menuName").val('');$("#img_rs_stu").attr('src', '');$("#nodecode").removeAttr("disabled").css('background', '');RemoveChange();}});</script>

DropDownControl.ashx 代码：

 /// <summary>///获取栏目下拉/// </summary>/// <param name="form"></param>public voidGetCloumn(NameValueCollection form){//此处查询节点var pcode = form["guid"];var aktype = HttpContext.Current.Request.QueryString["aktype"];ak_menus bll= newak_menus();var tb = bll.GetMenus(pcode, aktype); //根据传递参数 获取数据信息操作了
SerializeResponse(tb,"name");}}public static void SerializeResponse(DataTable tb, stringname){List<DropDown> list = new List<DropDown>();foreach (DataRow row intb.Rows){DropDown at= newDropDown();at.Value= row["guid"].ToString();if (string.IsNullOrEmpty(name)){at.Text=row[name].ToString();}else{}list.Add(at);}AshxHelper.Write(list);}

FileUploadHandler.ashx 代码：

public override voidProcessRequest(HttpContext context){context.Response.ContentType= "text/plain";if(ValidateUser()){try{//文件所在文件夹路径:每次相关的文章或者广告名，附加路径var filedir = context.Request.QueryString["filedir"];//上传类别，根据类别获取配置文件var filetype = context.Request.QueryString["filetype"];string configUrl =XiuxiuUploadHelper.GetConfigURl(filetype);if (context.Request.Files.Count > 0){HttpPostedFile UploadFile= context.Request.Files["imgFile"];UploadFile= (UploadFile == null) ? context.Request.Files["mediaFile"] : UploadFile;if (UploadFile != null){//定义允许上传的文件扩展名ArrayList exts = new ArrayList() { "image", "flash", "media", "file"};//上传图片:上传文件后返回上传结果string dirName = context.Request.QueryString["dir"];if (string.IsNullOrEmpty(dirName)){dirName= "image";}if (!exts.Contains(dirName)){//不允许的上传类型showError(context, "不允许的上传的文件类型.");}//执行文件上传构造函数Ak_UploadHelper FupdHelper = new Ak_UploadHelper(context.Request.Files[0], configUrl, filedir);//执行文件上传string FileURLOfServer =FupdHelper.UploadFileFromHtpostfile();if (!string.IsNullOrEmpty(FileURLOfServer) &&FileURLOfServer.Equals(Ak_UploadHelper.UpLoadResult.SUCCESS.ToString())){Hashtable hash= newHashtable();hash["error"] = 0;hash["url"] =FupdHelper.CustomUploadPath;context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");AshxHelper.Write(hash);}else{showError(context, FileURLOfServer);}}}else{//保存秀秀上传图片 主要是头像var result =XiuxiuUploadHelper.SaveXiuxiuPhoto(context, configUrl, filedir);AshxHelper.Write(result);}}catch(Exception e){throw new Exception("上传文件失败！" +e);}}else{throw new Exception("当前用户无操作权限！");}}private void showError(HttpContext context, stringmessage){Hashtable hash= newHashtable();hash["error"] = 1;string UploadRsZh_CN =Ak_UploadHelper.GetUploadRsOfZh_CN(message);hash["message"] =UploadRsZh_CN;context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");AshxHelper.Write(hash);}}

menusHandler.ashx 代码：

public override voidProcessRequest(HttpContext context){context.Response.ContentType= "text/plain";if(ValidateUser()){StringBuilder strBuilder= newSystem.Text.StringBuilder();string strFun = context.Request.Form["fun"];switch(strFun){case "save":string strNodeCode = context.Request.Form["nodecode1"];string strMenuName = context.Request.Form["menuname"];string strUrl = context.Request.Form["menuurl"];string strType = context.Request.Form["type"];string strIco = context.Request.Form["icoUrl"];string tag = context.Request.Form["tag"];string strChildNode = context.Request.Form["childnode"];//子节点if (string.IsNullOrWhiteSpace(strMenuName) && strChildNode == null || strChildNode.Length < 2){AshxHelper.Write(false);break;}var result = false;if (tag == "add") //添加{   //判断名称是否为空
result=addMenu(strNodeCode, strMenuName, strUrl, strType, strIco, num, strChildNode, ispopular);}else{//修改string strguid = context.Request.Form["guid"];result=editMenu(strNodeCode, strMenuName, strUrl, strType, strIco, num, ispopular, strguid, strChildNode);}AshxHelper.Write(result);break;case "set":  //列表框信息设置string strGuid = context.Request.Form["guid"];string strState = context.Request.Form["akState"];if(setState(strGuid, strState))strBuilder.Append("success");elsestrBuilder.Append("error");context.Response.Write(strBuilder);break;case "model"://编辑修改操作获取信息string guid = context.Request.Form["guid"];context.Response.Write(getModel(guid));break;case "list"://获取列表信息初始加载数据
GetList(context.Request.Form);break;case "getMaxNum"://根据类型获取最大序列号值
getMaxNum(context.Request.Form);break;}}else{throw new Exception("当前用户无操作权限！");}}/// <summary>///根据类型获取最大序列号值/// </summary>/// <param name="form"></param>voidgetMaxNum(NameValueCollection form){int type = Convert.ToInt32(form["type"].ToString());int num = bll.getMaxNum(type);  //数据操作查询方法
AshxHelper.Write(num);}/// <summary>///获取数据列表信息/// </summary>/// <param name="form"></param>voidGetList(NameValueCollection form){var type = form["type"];var pageIndex = form["pageIndex"];var pageSize = form["pageSize"];var table = base.GetPagination("guid,lcon,name,url,akState,num,Lev","v_menus", "nodecode", out DoCount, string.Format("AND aktype = '{0}'", AnkeEdu.Tools.SqlEncodeHelper.EncodeSqlParam(type)));AshxHelper.Write(new { Total = DoCount, Rows =table });}/// <summary>///添加栏目/// </summary>/// <param name="strNode"></param>/// <param name="strName"></param>/// <param name="strUrl"></param>/// <returns></returns>private bool addMenu(string strNode, string strName, string strType, string strIco,  string strChildNode)//添加子节点strChildNode
{//检测是否重复if (!bll.IsRepeat(newGuid(), strChildNode)){AnkeEdu.Model.ak_menus model= newAnkeEdu.Model.ak_menus();model.guid=AnkeEdu.Tools.NewId.NewUpGuid();model.akState= 1;model.aktype=Convert.ToInt32(strType);model.name=strName;model.lcon=strIco;model.addTime=DateTime.Now;model.NodeCode= strChildNode;//赋值子节点model.ParentNode =strNode;return bll.Add(model); //添加操作数据信息
}return false;}/// <summary>///编辑修改/// </summary>/// <param name="strNode"></param>/// <param name="strName"></param>/// <param name="strIco"></param>/// <param name="guid"></param>/// <returns></returns>private bool editMenu(string strNode, string strName,  string strType, string strIco,  string guid,stringstrChildNode){var g = newGuid(guid);if (!bll.IsRepeat(g, strChildNode)) //检测是否重复
{Model.ak_menus model= newModel.ak_menus();model= bll.GetModel(g);//根据ID获得实体信息model.aktype =Convert.ToInt32(strType);model.name=strName;model.lcon=strIco;model.ParentNode=strNode;model.NodeCode=strChildNode;return bll.Update(model); //数据更新操作
}return false;}/// <summary>///根据ID获取信息/// </summary>/// <param name="guid"></param>/// <returns></returns>private string getModel(stringguid){return JsonConvert.SerializeObject(bll.GetModel(new Guid(guid))); //数据操作构造函数}

效果图：

列表信息显示效果图