本文主要在asp.net下面制作生成,利用到了JQuery中的Tree控件,采用的是asp.net中ICallbackEventHandler接口实现.
本方法比较简单,可以很方便的对一些逻辑要求不高的功能使用.具体生成页面如下:
然后就是本页面所用到的代码:
首先是前台页面
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> < html xmlns="http://www.w3.org/1999/xhtml"> < head runat="server"> < script src="jquery.treeview/lib/jquery.js" type="text/javascript"></ script > < script src="jquery.treeview/common.js" type="text/javascript"></ script > < script src="jquery.treeview/jquery.tree.js" type="text/javascript"></ script > < link href="jquery.treeview/tree.css" rel="stylesheet" type="text/css" /> < title >基于ICallbackEventHandler的轻量级ajax回调方法</ title > < script type="text/javascript"> $(document).ready(function() { raiseEvent(); }); function rServer(arg, context) { var o = { showcheck: true }; //显示按钮 o.data = eval(arg); //处理json数据 $("#showTree").treeview(o); //绑定到树上 } function raiseEvent(arg, context) { <%=ClientScript.GetCallbackEventReference(this,"arg","rServer","context") %>; } </ script > </ head > < body > < form id="form1" runat="server"> < div id="showTree"> </ div > </ form > </ body > </ html > |
需要说明的是raiseEvent方法和rServer方法,首先是raiseEvent方法发起对服务器端的ajax请求,请求的数据内容存在于arg参数中,然后传递到后台,而其中的代码
<%=ClientScript.GetCallbackEventReference(this,"arg","rServer","context") %>;
则是指明了rServer是回调成功后,所调用的方法.
后台代码如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
/*******************************************************
* 基于ICallbackEventHandler的轻量级ajax回调方法
* 使用方式:首先页面需要继承自ICallbackEventHandler接口
* 然后页面必须实现RaiseCallbackEvent和GetCallbackResult
* 方法,其中注意的是,前面一个函数先被调用,用来接收从前台
* 传送来的数据,后面一个函数是将处理过的函数返回到前台
* ****************************************************/
public partial class _Default : System.Web.UI.Page,ICallbackEventHandler
{
protected void Page_Load(object sender, EventArgs e)
{
}
public string jsonStr = string.Empty;
public string GetJson()
{
string json = "[";
IList<Tree> t = DB.returnParentTree();
foreach (Tree model in t)
{
if (model != t[t.Count - 1])
{
json += GetJsonByModel(model) + ",";
}
else
{
json += GetJsonByModel(model);
}
}
json += "]";
json = json.Replace("'", "\"");
return json;
}
public string GetJsonByModel(Tree t)
{
string json = "";
bool flag = DB.isHaveChild(t.ModuleID);
json = "{"
+ "'id':'" + t.ModuleID + "',"
+ "'text':'" + t.ModuleName + "',"
+ "'value':'" + t.ModuleID + "',"
+ "'showcheck':true,"
+ "'checkstate':'0',"
+ "'hasChildren':" + flag.ToString().ToLower() + ","
+ "'isexpand':false,"
+ "'ChildNodes':";
if (!flag)
{
json += "null,";
json += "'complete':false}";
}
else
{
json += "[";
IList<Tree> list = DB.getChild(t.ModuleID);
foreach (Tree tree in list)
{
if (tree != list[list.Count - 1])
{
json += GetJsonByModel(tree) + ",";
}
else
{
json += GetJsonByModel(tree);
}
}
json += "],'complete':true}";
}
return json;
}
public string GetCallbackResult()
{
return jsonStr;
}
public void RaiseCallbackEvent(string eventArgument)
{
jsonStr = GetJson();
}
}
分类:
Javascript 杂谈记录
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!