前言
虽然工作了5年多了，但是这还是第一次发表文章，有点惭愧，作为一个程序猿，感觉有点不合格，哈哈哈。前端js框架用的angularJS，后台C#简单的查询，返回的主要是json字符串。有问题大家留言有时间一起研究研究吧。
具体实现
样式图片：
代码
angularJS：
//目录树参数配置 用两个setting是因为搜索节点的时候用的是非异步的，
var Modelsetting = {//非异步
data: {
simpleData: {
enable: true,//表示使用简单数据模式
idKey: "id",//设置之后id为在简单数据模式中的父子节点关联的桥梁
pidKey: "pId",//设置之后pid为在简单数据模式中的父子节点关联的桥梁和id互相对应
rootId: "null"//pid为null的表示根节点
}
},
view: {
expandSpeed: ""
}
}
var ModelsettingAsync = {//异步setting
async: {
autoParam: ["parentId"],
enable: true,
type: "post",
url: "/api/Home/GetNodes",
dataFilter: filter,
},
data: {
simpleData: {
enable: true
}
},
view: {
expandSpeed: ""
},
callback: {
onAsyncSuccess: zTreeOnAsyncSuccess
}
}
function filter(treeId, parentNode, childNodes) {
if (!childNodes) return null;
return childNodes;
}
function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
if (!msg || msg.length == 0) {
return;
}
var url = "/api/Home/GetNodes?&parentId=";
if (treeNode == undefined) {
return;
}
else {
url += treeNode.id;
}
$.ajax({
type: "post",
url: url,
data: "",
dataType: "json",
async: true,
success: function (jsonData) {
if (jsonData) {
var d = parseData(jsonData);
if (d.success == true) {
var data = parseData(d.list);
var treeObj = $.fn.zTree.getZTreeObj("treeHomeDemo");
if (data != null && data.length != 0) {
if (treeNode == undefined) {
treeObj.addNodes(null, data, true);// 如果是根节点，那么就在null后面加载数据
}
else {
treeObj.addNodes(treeNode, data, true);//如果是加载子节点，那么就是父节点下面加载
}
}
treeObj.expandNode(treeNode, true, false, false);// 将新获取的子节点展开
}
}
},
error: function () {
alert("请求错误！");
}
});
};
//程序加载的时候执行这个方法
$this.getTreeListAsync = function () {
try {
var url = "/api/Home/GetNodes?parentId=0";//默认加载第一个层级
//也可以用$.ajax()
$http({
method: "post",
async: true,
cache: false,
url: url
}).success(function (data) {
if (data) {
var d = parseData(data);
if (d.success == true) {
var result = parseData(d.list);
if (result.length > 0) {
$.fn.zTree.init($("#treeHomeDemo"), ModelsettingAsync, result);
//默认展开根节点
var treeObj = $.fn.zTree.getZTreeObj("treeHomeDemo");
if (null != treeObj) {
var nodes = treeObj.getNodes();
if (nodes.length > 0) {
for (var i = 0; i < nodes.length; i++) {
treeObj.expandNode(nodes[i], true, false, false);
}
}
}
}
}
}
}).error(function (data) {
console.log(data);
})
} catch (e) {
}
}
$this.allSorts = [];
$this.getTreeListBySearch = function (treeid) {
if ($this.allSorts.length == 0) {
$.ajax({
type: "get",
async: false,
url: "/api/Home/GetAllNodes",
success: function (data) {
if (data) {
var d = parseData(data);
if (d.success == true) {
$this.allSorts = parseData(d.list);
}
}
},
error: function (data) {
console.log(data);
}
});
}
$.fn.zTree.init($("#" + treeid), Modelsetting, $this.allSorts);
}
//treeNodeId = ul的id
$this.searchNode = function (treeNodeId) {
var value = $.trim($("#searchValue").val());
if (value == "") {
$this.getTreeListAsync();
return;
}
//搜索具体的目录的时候用的是非异步的方式，因为root.search_ztree需要所有的节点，所以需要先把所有的节点都给加载出来
$this.getTreeListBySearch(treeNodeId);
root.search_ztree(treeNodeId, "searchValue")
}
var inputArea = $("input[name='searchArea']");
inputArea.keyup(function (treeId, treeNode, e) {
var e = event || window.event;
var val = inputArea.val();
if (e.keyCode == 13 || val == "") {
$this.searchNode("treeHomeDemo");
$(".clearBtn").css("visibility","hidden");
}
if (val) {
$(".clearBtn").css("visibility", "visible");
}
});
$this.clearValue = function () {
inputArea.val('');
$(".clearBtn").css("visibility", "hidden");
$this.searchNode("treeHomeDemo");
}
var root = {
search_ztree: function(treeId, searchConditionId) {
searchByFlag_ztree(treeId, searchConditionId, "");
}
}
//下面几个方法是从别的地方copy过来的，具体地址我也没引用了，抱歉
/**
* 搜索树，高亮显示并展示【模糊匹配搜索条件的节点s】
* @param treeId
* @param searchConditionId 搜索条件Id
* @param flag 需要高亮显示的节点标识
*/
function searchByFlag_ztree(treeId, searchConditionId, flag) {
//<1>.搜索条件
var searchCondition = $.trim($('#' + searchConditionId).val());
//<2>.得到模糊匹配搜索条件的节点数组集合
var highlightNodes = new Array();
if (searchCondition != "") {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
highlightNodes = treeObj.getNodesByParamFuzzy("name", searchCondition, null);
}
//<3>.高亮显示并展示【指定节点s】
highlightAndExpand_ztree(treeId, highlightNodes, flag);
}
/**
* 高亮显示并展示【指定节点s】
* @param treeId
* @param highlightNodes 需要高亮显示的节点数组
* @param flag 需要高亮显示的节点标识
*/
function highlightAndExpand_ztree(treeId, highlightNodes, flag) {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
//<1>. 先把全部节点更新为普通样式
var treeNodes = treeObj.transformToArray(treeObj.getNodes());
for (var i = 0; i < treeNodes.length; i++) {
treeNodes[i].highlight = false;
treeObj.updateNode(treeNodes[i]);
}
//<2>.收起树, 只展开根节点下的一级节点
close_ztree(treeId);
//<3>.把指定节点的样式更新为高亮显示，并展开
if (highlightNodes != null) {
for (var i = 0; i < highlightNodes.length; i++) {
if (flag != null && flag != "") {
if (highlightNodes[i].flag == flag) {
//高亮显示节点，并展开
highlightNodes[i].highlight = true;
treeObj.updateNode(highlightNodes[i]);
//高亮显示节点的父节点的父节点....直到根节点，并展示
var parentNode = highlightNodes[i].getParentNode();
var parentNodes = getParentNodes_ztree(treeId, parentNode);
treeObj.expandNode(parentNodes, true, false, true);
treeObj.expandNode(parentNode, true, false, true);
}
} else {
//高亮显示节点，并展开
highlightNodes[i].highlight = true;
treeObj.updateNode(highlightNodes[i]);
//高亮显示节点的父节点的父节点....直到根节点，并展示
var parentNode = highlightNodes[i].getParentNode();
var parentNodes = getParentNodes_ztree(treeId, parentNode);
treeObj.expandNode(parentNodes, true, false, true);
treeObj.expandNode(parentNode, true, false, true);
}
}
}
}
/**
* 递归得到指定节点的父节点的父节点....直到根节点
*/
function getParentNodes_ztree(treeId, node) {
if (node != null) {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
var parentNode = node.getParentNode();
return getParentNodes_ztree(treeId, parentNode);
} else {
return node;
}
}
/**
* 设置树节点字体样式
*/
function setFontCss_ztree(treeId, treeNode) {
if (treeNode.id == 0) {
//根节点
return { color: "#333", "font-weight": "bold" };
} else if (treeNode.isParent == false) {
//叶子节点
return (!!treeNode.highlight) ? { color: "#ff0000", "font-weight": "bold" } : { color: "#660099", "font-weight": "normal" };
} else {
//父节点
return (!!treeNode.highlight) ? { color: "#ff0000", "font-weight": "bold" } : { color: "#333", "font-weight": "normal" };
}
}
页面布局：
<div class="be_content scroll-cont-auto">
<div class="be_item_group searchGroup">
<div class="btn-group pull-left">
<input type="text" class="btn-group searchText" placeholder="" name="searchArea" id="searchValue" autocomplete="off"/>
<i class="clearBtn glyphicon glyphicon-remove" ng-click="clearValue()" style="visibility: hidden;"></i><!--删除的×号默认是隐藏的，输入文字后显示-->
<i class="searchAreaBtn glyphicon glyphicon-search" ng-click="searchNode('treeHomeDemo')"></i>
</div>
</div>
<div class="be_line be_pd10 dark">
<ul id="treeHomeDemo" class="ztree"></ul>
</div>
</div>
C#后台：（我觉的java后台什么的都行，只要返回对应格式的数据给前端就行了）
[HttpPost("GetNodes")]
public string GetNodes(int? parentId)
{
if(parentId == null)
{
return "";
}
string sql = "SELECT CategoryID,ParentCode,IsEnd,LevelName,CodeName FROM nodes where usable = 0 and parentcode = " + parentId + " order by levelname ";
DataTable dt = DB.GetTable(sql);
List<sys_device> dsList = new List<sys_device>();
if (parentId == 0)
{
dsList.Add(new sys_device()
{
id = 0,
pId = 0,
name = "目录总层级",
isParent = true
});
}
for (int i = 0; i < dt.Rows.Count; i++)
{
dsList.Add(new sys_device()
{
id = Convert.ToInt32(dt.Rows[i]["CategoryID"]),
pId = Convert.ToInt32(dt.Rows[i]["ParentCode"]),
isEnd = Convert.ToInt32(dt.Rows[i]["IsEnd"]),
name = dt.Rows[i]["LevelName"].ToString(),
codename = dt.Rows[i]["CodeName"].ToString(),
isParent = Convert.ToInt32(dt.Rows[i]["IsEnd"]) == 0//似乎必须要
});
}
res.list = JsonHelper.Instance.Serialize(dsList);
res.success = true;
res.msg = "查询成功";
return JsonOperate.ObjToJson<ResponseEntity>(res);
}
[HttpGet("GetAllNodes")]
public string GetAllNodes()
{
string sql = "SELECT CategoryID,ParentCode,IsEnd,LevelName,CodeName FROM node where usable = 0 order by levelname ";
DataTable dt = DB.GetTable(sql);
List<sys_device> dsList = new List<sys_device>();
dsList.Add(new sys_device()
{
id = 0,
pId = 0,
name = "目录总层级",
isParent = true
});
for (int i = 0; i < dt.Rows.Count; i++)
{
dsList.Add(new sys_device()
{
id = Convert.ToInt32(dt.Rows[i]["CategoryID"]),
pId = Convert.ToInt32(dt.Rows[i]["ParentCode"]),
isEnd = Convert.ToInt32(dt.Rows[i]["IsEnd"]),
name = dt.Rows[i]["LevelName"].ToString(),
codename = dt.Rows[i]["CodeName"].ToString(),
isParent = Convert.ToInt32(dt.Rows[i]["IsEnd"]) == 0
});
}
res.list = JsonHelper.Instance.Serialize(dsList);
res.success = true;
res.msg = "查询成功";
return JsonOperate.ObjToJson<ResponseEntity>(res);
}
public class sys_device
{
public int id { get; set; }
public int mocode { get; set; }
public int categoryId { get; set; }
public int pId { get; set; }
public int isEnd { get; set; }
public string name { get; set; }
public string codename { get; set; }
public bool isParent { get; set; }
}
public class ResponseEntity
{
public bool success = false;
public string msg;
public string list;
public int row;
public int index;
public int total;
}
2359
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
