一步一步asp.net ajax类别Tree生成
程序员文章站
2024-03-06 23:14:26
虽然实现了类别多级的问题这样带来的后果确实无穷无尽的............. 递归查询,和双循环嵌套的执行sql语句没什么区别了...... 这样带来的是严重的性能问题....
虽然实现了类别多级的问题这样带来的后果确实无穷无尽的.............
递归查询,和双循环嵌套的执行sql语句没什么区别了......
这样带来的是严重的性能问题..
现在重新做这些东西,我想到了2个方案,第一个:
针对数据比较少的多级菜单,我们可以通过数据库一次查询出来所有记录,然后通过程序进行递归算法,进行数据的转化.
第二种:
就是数据库设计的时候,设计成多级别的菜单,每次加载通过ajax,一点一点展开(每一次展开都ajax请求下一级的数据),这样避免的递归带来的性能损失,而且实现简单方便,非常适合大数据量的时候,但是,一次只能显示一级,每次都要ajax请求下一级.
由于后台管理,第一次就按照第一种方案来设计:
首先,要设计好数据库,方便以后两种方式扩展,
这样设计,主要是考虑方便前台后台的扩展,fid字段是一个为了方便前台查询而设计的,这样设计的好处就是如果查询比如*菜单下的所有产品,只需要根据模糊查询前缀匹配,就能把所有的产品都查询出来,设计的字段还是有点小,isleaf是为了判断是否是叶子节点,belongsid父级id,
前台代码:
复制代码 代码如下:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>产品类别管理</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="../css/demo.css" rel="stylesheet" type="text/css" />
<script src="../scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="../scripts/miniui/miniui.js" type="text/javascript"></script><link href="../scripts/miniui/themes/default/miniui.css" rel="stylesheet" type="text/css" />
<link href="../scripts/miniui/themes/icons.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="mini-toolbar">
<h1>产品类别管理</h1>
<div class="mini-panel" title="产品类别管理" iconcls="icon-add" style="width:100%;height:500px;"
showtoolbar="true" showcollapsebutton="true" showfooter="true"
>
<!--toolbar-->
<div property="toolbar">
</div>
<!--footer-->
<div property="footer">
</div>
<!--body-->
<ul id="tree1" class="mini-tree" url="data/getproductinfo.ashx?method=getproducttype" style="width:100%;height:100%;padding:5px;"
showtreeicon="true" textfield="text" idfield="id" contextmenu="#treemenu"
>
</ul>
<ul id="treemenu" class="mini-menu" style="display:none;" onbeforeopen="onbeforeopen">
<!-- <li name="move" iconcls="icon-move" onclick="onmovenode">移动节点</li>-->
<li class="separator"></li>
<li name="addnode" onclick="onaddnode" iconcls="icon-add">插入节点</li>
<li name="edit" iconcls="icon-edit" onclick="oneditnode">编辑节点</li>
<li name="remove" iconcls="icon-remove" onclick="onremovenode">删除节点</li>
<li name="cancel" iconcls="icon-cancel" onclick="oncancel">取消</li>
<li class="separator"></li>
</ul>
</div>
<br /><br />
</div>
<script type="text/javascript">
mini.parse();
var addtpye="add";
function oncancel(e){
var tree=mini.get("tree1");
var node=tree.getselectednode();
tree.isexpandednode (node);
}
function onaddbefore(e) {
addtype="before";
additem(e);
}
function onaddafter(e)
{
addtype="after";
additem(e);
}
function additem(e) {
var tree = mini.get("tree1");
var node = tree.getselectednode();
var newnode = {id:0,text:"空",pid:node.id};
mini.prompt("请输入类别内容：", "请输入",
function (action, value) {
if (action == "ok"){
$.ajax({
url:"data/getproductinfo.ashx",
type:"post",
data:"method=addproducttype&text="+value+"&pid="+node.id+"&isleaf="+tree.isleaf(node),
success:function(msg){
if(msg){
alert("添加成功!");
treeload();
// newnode.text=value;
// if(node!=null){
//
// tree.addnode(newnode, addtype, node);
// }
}
else
alert("添加失败!");
}
});
}
else {
newnode.text="空";
}
});
}
//刷新树
function treeload(){
$.ajax({
url:"data/getproductinfo.ashx?method=getproducttype",
type:"json",
success:function(json){
var tree = mini.get("tree1");
// alert(json);
var data= eval("("+json+")");
tree.loaddata(data);
}
});
}
function onaddnode(e) {
addtype="add";
additem(e);
}
function oneditnode(e) {
var tree = mini.get("tree1");
var node = tree.getselectednode();
mini.prompt("请输入类别内容：", "请输入",
function (action, value) {
if (action == "ok") {
$.ajax({
url:"data/getproductinfo.ashx",
type:"post",
data:"method=saveproducttype&id="+node.id+"&text="+value+"&pid="+node.pid+"&isleaf="+tree.isleaf(node),
success:function(msg){
if(msg){
alert("保存成功!");
tree.setnodetext(node,value);
//treeload();
}
else
alert("保存失败!");
}
});
}
});
}
function onremovenode(e) {
var tree = mini.get("tree1");
var node = tree.getselectednode();
if (node) {
if (confirm("确定删除选中节点?")) {
//这里提交到服务器
$.ajax({
url:"data/getproductinfo.ashx",
type:"post",
data:"method=removeproducttype&id="+node.id,
success:function(msg){
if(msg){
tree.removenode(node);
alert("删除成功!");
}
else{
alert("删除失败!");
}
}
});
}
}
}
function onbeforeopen(e) {
var menu = e.sender;
var tree = mini.get("tree1");
var node = tree.getselectednode();
// if (node && node.id == "-1") { //如果根节点(总根目录,那么阻止菜单显示)
// e.cancel = true;
// //阻止浏览器默认右键菜单
// e.htmlevent.preventdefault();
// return;
// }
////////////////////////////////
var edititem = mini.getbyname("edit", menu);
var removeitem = mini.getbyname("remove", menu);
var addnodeitem=mini.getbyname("addnode",menu);
//var moveitem=mini.getbyname("move",menu);
edititem.show();
removeitem.show();
addnodeitem.show();
if (node.id == "-1") {//总根目录
removeitem.hide();
// moveitem.hide();
}
}
</script>
</body>
</html>
这一个难点在于json数据递归生成:
bll中获得tree的json数据
复制代码 代码如下:
/// <summary>
/// 工艺品类别树转化为json格式
/// </summary>
/// <returns></returns>
public string crafttypetreetojson()
{
//传递的json格式
ienumerable<crafttype> crafttypelist = new crafttypedal().listall();
stringbuilder sb = new stringbuilder("[");
foreach (crafttype root in crafttypelist)
{
if (root.belongsid == -1)
{
sb.append("{id:\"" + root.id + "\",text:\"" + root.name + "\"");
sb.append(",pid:\"-1\"");//添加父节点
sb.append(",expanded:\"false\"");
if (root.isleaf == "0")//如果是不是叶子节点,那么,就要递归添加children:[{xxx},内容
{
sb.append(",children:");
getleaftree(ref sb, (int)root.id, crafttypelist);//递归追加叶子
}
sb.append("},");
}
}
sb.remove(sb.length - 1, 1); //去除掉最后一个多余的,
sb.append("]");
return common.formattojson.miniuitojsonfortree(sb.tostring(), "工艺品类别");
}
/// <summary>
/// 递归获得父级id下的所有类别json数据
/// </summary>
/// <param name="sb">json字符串</param>
/// <param name="parentid">父级id</param>
/// <param name="crafttypelist">类别信息集合</param>
public void getleaftree(ref stringbuilder sb,int parentid,ienumerable<crafttype> crafttypelist)
{
sb.append("[");
foreach (crafttype leaf in crafttypelist)
{
if (leaf.belongsid == parentid) //根据双亲节点查找叶子
{
sb.append("{id:\"" + leaf.id + "\",text:\"" + leaf.name + "\"");
sb.append(",pid:\"" + parentid + "\"");//添加父节点
sb.append(",expanded:\"false\"");
if (leaf.isleaf == "0")//如果是不是叶子节点,那么,就要递归添加children:[{xxx},内容
{
sb.append(",children:");
getleaftree(ref sb,(int)leaf.id, crafttypelist);//递归追加叶子
}
sb.append("},");
}
}
sb.remove(sb.length - 1, 1); //去除掉最后一个多余的,
sb.append("]");
}
效果图如下:
虽然是ajax实现,不过这个确实ajax一次性把数据全部加载进去,这样对性能有严重的损失,不过考虑是后台,所以,没做处理,不过最好还是用第二种方法设计,那种方法是最好的解决方法,也适合前台的数据展示.
第二种方法正在实践中………