基于Jquery tree 的一些技术想法

最新推荐文章于 2024-09-22 11:17:00 发布

花果山小猴

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量1k

点赞数

文章标签： jquery tree javascript function string class

本文链接：https://blog.csdn.net/sunjiongjun/article/details/5644343

版权

Jquery tree 如果用自带的样式做的话会显示+ - ... 这些样式。但是在实际设计中我们可能会自定义样式,通过这些天的研究，我终于做出了基于Jquery tree的自定义树。自定义了收缩事件。

屁话不多说，上代码：

protected void Page_Load(object sender, EventArgs e) { string sqlCmd = "Select * from Special_NewsCatalog where SortID=" + Request.Params["SortID"].ToString() + " and ParentID=0 Order By Location"; DataTable dtThrid = DbHelperSQL.Query(sqlCmd).Tables[0]; StringBuilder sb = new StringBuilder(); sb.Append("["); foreach (DataRow dr in dtThrid.Rows) { sb.Append("{"); sb.Append("text:'<div style="//" mce_style="//"'margin-top:2px;margin-left:20px;padding:5px 0px 5px 0px; //'><img src="/images/sub.gif" mce_src="images/sub.gif" border=0 class=//'firstX//' id=imgX" + dr["CatalogID"].ToString() + " οnclick=//'togglefun(this,1)//' style="//" mce_style="//"'cursor:hand;//'> <a href="javascript:changeSrc(" mce_href="javascript:changeSrc("" + dr["CatalogID"].ToString() + "," + Request.Params["SortID"].ToString() + ",1) class=//'bluelnk1//'><b>" + (dr["CatalogName"].ToString().Length > 12 ? dr["CatalogName"].ToString().Substring(0, 12) + "..." : dr["CatalogName"].ToString()) + "</b></a></div>',"); sb.Append("expanded: true,"); sb.Append("id:'" + dr["CatalogID"].ToString() + "'"); AddChildrenNode(GetChildNodes(dr["CatalogID"].ToString()), sb); sb.Append("}"); } sb.Append("]"); string s = sb.ToString(); s = s.Replace("}{", "},{"); Response.Write(s); } private DataTable GetChildNodes(string parentID) { string sqlCmd = "Select * from Special_NewsCatalog where ParentID=" + parentID + " Order By Location"; DataTable dtChildren = DbHelperSQL.Query(sqlCmd).Tables[0]; return dtChildren; } private void AddChildrenNode(DataTable dt, StringBuilder sb) { if (dt.Rows.Count > 0) { string tag = "0"; sb.Append(",children:["); foreach (DataRow dr in dt.Rows) { string subimg = "<img src="/images/sub.gif" mce_src="images/sub.gif" border=0>"; string addimg = "<img src="/images/sub.gif" mce_src="images/sub.gif" border=0 id=imgX" + dr["CatalogID"].ToString() + ">"; string finImg = ""; DataTable tempData = DbHelperSQL.Query("Select count(*) from Special_NewsCatalog where ParentID=" + dr["CatalogID"].ToString()).Tables[0]; if (tempData.Rows[0][0].ToString() != "0") { finImg = addimg; tag = "1"; } else { finImg = subimg; tag = "0"; } Regex num = new Regex("/"); int count = (num.Matches(dr["Location"].ToString()).Count) * 10 + 5; sb.Append("{"); sb.Append("text:'<div style="//" mce_style="//"'padding:5px 1px 5px " + count + "px;//'><img src="/images/sub.gif" mce_src="images/sub.gif" border=0 class=//'firstX//' id=imgX" + dr["CatalogID"].ToString() + " οnclick=//'togglefun(this,1)//' style="//" mce_style="//"'cursor:hand;//'> <a href="javascript:changeSrc(" mce_href="javascript:changeSrc("" + dr["CatalogID"].ToString() + "," + Request.Params["SortID"].ToString() + "," + tag + ") class=//'graylnk2//'> " + (dr["CatalogName"].ToString().Length > 12 ? dr["CatalogName"].ToString().Substring(0, 10) + "..." : dr["CatalogName"].ToString()) + "</a></div>',"); sb.Append("expanded: true,"); sb.Append("id:'" + dr["CatalogID"].ToString() + "'"); AddChildrenNode(GetChildNodes(dr["CatalogID"].ToString()), sb); sb.Append("}"); } sb.Append("]"); } }

以上是生成一客Json 树。

接下去，我们运用强大的JS 进行处理

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Special_Default" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> <meta name="Keywords" id="keyword" content="研究专题" /> <mce:script src="/js/jquery.js" mce_src="js/jquery.js" type="text/javascript"></mce:script> <mce:script src="/js/jquery.treeview.js" mce_src="js/jquery.treeview.js" type="text/javascript"></mce:script> <mce:script src="/js/jquery.treeview.async.js" mce_src="js/jquery.treeview.async.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"></mce:script> <div id="content_2"> <div id="bjw_main"> <div id="bjw_left"> <div class="intro_title"> <span class="sp3"><asp:Label runat="server" id="lblSecond"></asp:Label></span></div> <div class="innav_list"> <span class="no4 blue_txt" id="sidetreecontrol"><a href="javascript:void(0)" mce_href="javascript:void(0)" οnclick="closetree()" id="tclose">折叠目录</a><a href="javascript:void(0)" mce_href="javascript:void(0)" id="topen" οnclick="opentree(this)"></a></span> <ul id="tree" style="margin-left: 5px;" mce_style="margin-left: 5px;"> </ul> </div> <div class="intro_footer"> </div> </div> <div id="bjw_right"> <iframe id="iframeNewsInfo" width="100%" height="100%" frameborder="0" scrolling="no" οnlοad="SetWinHeight(this)" ></iframe> </div> </div> </div> </asp:Content>

朋友有问题可以和我交流QQ:176620043