之前做了一个分类，是一个不限级别的，就用树的方式展示出来的
首先添加引用
<script src="~/Scripts/jquery.ztree.core-3.5.js"></script>
<script src="~/Scripts/jquery.ztree.exedit-3.5.js"></script>
下面就写写他的实现，首先
html
<td style="width: 500px;" valign="top"><ul id="treeDemo" class="ztree"></ul></td>
js代码
首先在页面加载的时候
$(document).ready(function () {
/// <summary>绑定一级分类</summary>
var treeNodes = eval(‘@Html.Raw(ViewData["zTree"])‘);
$.fn.zTree.init($("#treeDemo"), setting, treeNodes);
});
定义zTree
//Tree
var setting = {
edit: {
enable: true,
showRemoveBtn: setRemoveBtn,
removeTitle: "删除",
showRenameBtn: false
},
async: {
enable: true,
url: "/InfoSection/GetChild",
autoParam: ["id"],
otherParam: [],
dataFilter: null
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeClick: null,
onClick: function(event, treeId, treeNode) { //节点的点击事件
var id = treeNode.id;
var tid = treeNode.tId;
$("#Id").val(id);
$("#hidTid").val(tid);
$("#typeName").html("当前分类");
$("#divAdd").show();
$("#divArea").show();
if (id > 0) {
$("#tdInfo").hide();
$("#hidType").val("2"); //修改
var objLoad = $("#tdRefresh");
objLoad.html("<img src=‘/Content/Images/loading4.gif‘ id=‘childclassloadimgimg‘ />");
$.ajax({
url: "GetDetail?id=" + id,
dataType: "json",
cache: false,
data: null, //提交整个表单
type: "POST",
success: function (data) {
$("#childclassloadimgimg").remove();
$("#tdInfo").show();
// console.dir(data);
if (data.Id > 0) {
$("#parent").html("");
$.each(data.pid, function(i, n) {
$("#parent").append("<option value=‘" + n.Value + "‘ >" + n.Text + "</option>");
});
$("#title").val(data.title);
$("#imageUrl").val(data.imageUrl);
$("#introduction").val(data.introduction);
$("#content").val(data.content);
$("#currentType").html(data.title);
$("#hidIsCountry").val(data.IsCountry);
$("#infoSectionId").val(data.infoSectionId);
$("#spanChild").empty();
$("#Section").show();
}
},
error: function() {
alert("网络异常!");
}
});
} else {
$("#currentType").html("一级分类");
$("#title").val("");
$("#imageUrl").val("");
$("#introduction").val("");
$("#content").val("");
}
},
beforeRemove: zTreeBeforeRemove,
onRemove: zTreeOnRemove
}, keep: { parent: true }
};
function zTreeOnRemove(event, treeId, treeNode) {
// alert(treeNode.id + ", " + treeNode.name);
};
//删除树的节点
function zTreeBeforeRemove(treeId, treeNode) {
//Ajax删除数据
$.ajax({
url: "Del?key=" + treeNode.id,
dataType: "json",
cache: false,
data: null,
type: "POST",
success: function(data) {
if (data.Status == 0) {
alert("[提示]" + data.ErrMsg);
return false;
} else {
// window.location.href = "/Geographic/Index";
return true;
}
},
error: function() {
alert("删除失败!");
return false;
}
});
};
function setRemoveBtn(treeId, treeNode) {
//判断为顶级节点则不显示删除按钮
// alert(treeNode.id);
if (treeNode.id == 0)
return false;
else
return true;
}
function setEdit() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.setting.edit.showRemoveBtn = true;
zTree.setting.edit.showRenameBtn = false;
zTree.setting.edit.removeTitle = "删除";
}
var log, className = "dark";
function beforeClick(treeId, treeNode, clickFlag) {
className = (className === "dark" ? "" : "dark");
//showLog("[ " + getTime() + " beforeClick ] " + treeNode.name);
return (treeNode.click != false);
}
function showLog(str) {
if (!log) log = $("#log");
log.append("<li class=‘" + className + "‘>" + str + "</li>");
if (log.children("li").length > 8) {
log.get(0).removeChild(log.children("li")[0]);
}
}
function getTime() {
var now = new Date(),
h = now.getHours(),
m = now.getMinutes(),
s = now.getSeconds();
return (h + ":" + m + ":" + s);
}
function filter(treeId, parentNode, childNodes) {
if (!childNodes) return null;
for (var i = 0, l = childNodes.length; i < l; i++) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, ‘.‘);
}
return childNodes;
}
Controller控制器代码
#region 对树的操作
/// <summary>
/// 转化为树的Simple格式
/// </summary>
/// <param name="model"></param>
/// <returns></returns>
private Hashtable FormtSimpData(InfoSection model)
{
var hashResult = new Hashtable();
hashResult["name"] = model.Title;
hashResult["id"] = model.Id;
hashResult["pId"] = 0;
hashResult["isParent"] = "true";
return hashResult;
}
/// <summary>
/// 得到左边树结构下级分类
/// </summary>
/// <returns></returns>
[AuthorizationCodeAttribute]
[Description("查询分类目录")]
[HttpPost]
public ActionResult GetChild()
{
string strId = Request.Params["id"];
List<Hashtable> hashSectionList = new List<Hashtable>();
int id = 0;
int.TryParse(strId, out id);
if (id > 0)
{
InfoSectionOperator dal = new InfoSectionOperator();
IList<InfoSection> ilList = dal.GetList(string.Format("ParentId={0}", id));
if (ilList.Count > 0)
{
hashSectionList.AddRange(ilList.Select(FormtSimpData));
}
}
return Json(hashSectionList, JsonRequestBehavior.AllowGet);
}
#region 文章栏目的删除
[AuthorizationCodeAttribute]
[Description("删除树的节点")]
public ActionResult Del(int? key)
{
var dal = new InfoSectionOperator();
string ids = GetChildIds(key ?? 0);
dal.Delete(string.Format("Id in ({0})", ids));
return Json(new JsonMsg()
{
Status = 1,
ErrMsg = "删除成功!"
});
}
#endregion
取树的一级节点数据
public ActionResult Add()
{
#region 显示一级节点
IList<InfoSection> list = dal.GetList(string.Format("ParentId=0"));
list.Insert(0, new InfoSection()
{
Id = 0,
Title = "根目录"
});
List<Hashtable> hashInfoSection = list.Select(FormtSimpData).ToList();
string strResult = JsonConvert.SerializeObject(hashInfoSection);
ViewData["zTree"] = strResult;
#endregion
#endregion
return View();
}
#endregion
zTree的运用
时间： 2024-12-06 23:08:03