您的位置: 首页 >日志>前端技术>详细内容

前端技术

政府信息公开-主题分类树结构

来源:本站原创 发布时间:2013-06-28 16:25:43 浏览次数: 【字体:

   在制作政府信息公开网页的过程中,老是遇到主题分类树结构的难题!因此在别人的基础上修改了一个可修改的主题树结构!该主题分类自动获取信息公开的主题分类!无需通过添加节点来实现!

效果如下:

 

 

 

 

 

 

 

 

 

 

 

 

A 标签调用方法如下:{PE.Label id="PE主题分类树" /} 

B  页面样式调用哪个 

C 标签名称及其相关代码如下:

(1)PE主题分类树.config

 

 
   政务公开
  
   txt
  
   static
  
   False
  
   <script type="text/javascript" src="{PE.SiteConfig.SkinPath/}peSkin/js/jquery.jstree.js"></script>
<script type="text/javascript" src="{PE.SiteConfig.SkinPath/}peSkin/js/jquery.cookie.js"></script>
<div id="sideZtfl">
  <div class="hd">
	  <h3><span>主题分类</span></h3>
  </div>
  <div class="bd">
	  <div id="treeViewBox">
		  <div class="tBd">
			  <ul class="filetree">
				  {PE.Label id="PE部门主题公开目录列表" currentId="@RequestInt_ThemeId" /}
			  </ul>
		  </div>
	  </div>
  </div>
</div>
<script type="text/javascript">
  jQuery(function($){
	  $("#treeViewBox .tBd").jstree({
		  "core"			: {"initially_open" : [ "currentPNode" ]},
		  "plugins"		: ["themes","html_data", "crrm", "contextmenu"],
		  "contextmenu"	: {
			  "items"	: {  
				  "create": null,
				  "rename": null,
				  "remove": null,
				  "ccp": null,
				  "展开所有节点" : {
					  "label"				: "展开所有节点",
					  "action"			: function (obj) {
						  this.open_all(-1);
					  },
					  "icon"				: "{PE.SiteConfig.InstallDir/}Skin/DTOP/resource/images/unfoldNodes.gif"
				  },
				  "展开当前节点" : {
					  "label"				: "展开当前节点",
					  "action"			: function (obj) {
						  this.open_node(obj);
					  }
				  },
				  "折叠当前节点" : {
					  "label"				: "折叠当前节点",
					  "action"			: function (obj) {
						  this.close_node(obj);
					  }
				  },
				  "当前窗口打开" : {
					  "label"				: "当前窗口打开",
					  "action"			: function (obj) {
						  location.href = this._get_node(obj).find("a").attr("href");
					  }
				  },
				  "新窗口打开" : {
					  "label"				: "新窗口打开",
					  "action"			: function (obj) {
						  window.open(this._get_node(obj).find("a").attr("href"));
					  }
				  }
			  }
		  }
	  }).bind("loaded.jstree", function (event, data) {
		  var $cNode = $("#currentNode"), $cPNode = $("#currentPNode");
		  if($cNode.length==0 && $cPNode.length==0){
			  $.jstree._reference("#treeViewBox .tBd").open_node("#rootNode");
			  $("#rootNode > a").addClass("jstree-clicked");
		  }else if($cNode.length > 0){
			  $.jstree._reference("#treeViewBox .tBd").open_node($("#currentNode").parent());
		  }
	  });
	  
	  var $tvBtn = $("#showTreeView"), $tvBox = $("#treeViewBox");
	  var unFoldTreeView = function(){
		  $tvBox.animate({
			  marginLeft: '0'
		  }, 400, function(){
			  $tvBtn.addClass("unfolded");
			  $tvBtn.removeClass("folded");
		  });
	  };
	  var foldTreeView = function(){
		  $tvBox.animate({
			  marginLeft: '-=165'
		  }, 400, function(){
			  $tvBtn.addClass("folded");
			  $tvBtn.removeClass("unfolded");
		  });
	  };
  
	  if($.cookie('isTreeViewFolded') == null){
		  $.cookie('isTreeViewFolded', 'false');
	  }
	  if($.cookie('isTreeViewFolded') == 'true'){
		  foldTreeView();
	  }
	  $tvBtn.click(function(){
		  if($tvBox.css('marginLeft') == "0px"){
			  foldTreeView();
			  $.cookie('isTreeViewFolded', 'true');
		  }else{
			  unFoldTreeView();
			  $.cookie('isTreeViewFolded', 'false');
		  }
	  });
  });
  
</script>	  
  

 

(2)PE部门主题公开目录列表.config

 

 
   政务公开
  
   sin
  
   sql_sysquery
  
   False
  
    currentId
   
    0
   
    当前栏目ID
   
   false
  
   false
  
   SELECT   *   FROM  PE_GV_PublicInfoTheme
  
   <?xml version="1.0" encoding="utf-8"?>
<xsl:transform version="1.0" xmlns:xsl="" xmlns:pe="labelproc" exclude-result-prefixes="pe">
  <xsl:output method="html" />
  <xsl:param name="DepartmentId" />
  <xsl:param name="currentId" />
  <xsl:template match="/">
    <xsl:choose>
      <xsl:when test="count(/NewDataSet/Table) = 0">
        <li style="color:red">找不到相关分类</li>
      </xsl:when>
      <xsl:otherwise>
        <xsl:for-each select="/NewDataSet/Table">
          <xsl:variable name="ThemeId"  select="ThemeId" />
          <xsl:variable name="ParentId"  select="ParentId" />        
          <xsl:if  test="$ThemeId=$ParentId">
            <li>
				<xsl:if test="$currentId = ThemeId">
					<xsl:attribute name="id">currentNode</xsl:attribute>
				</xsl:if>
              <span class="folder2">
                <a>
					<xsl:if test="$currentId = ThemeId">
						<xsl:attribute name="class">jstree-clicked</xsl:attribute>
					</xsl:if>
					<xsl:attribute name="href">PublicInfoList.aspx?ThemeId=<xsl:value-of select="ThemeId" /></xsl:attribute> <xsl:value-of select="ThemeTitle"/>
				</a>
              </span>
              <p> <xsl:call-template name="description">
                <xsl:with-param name="ThemeId" select="ThemeId"></xsl:with-param>
              </xsl:call-template></p>
            </li>
          </xsl:if>
        </xsl:for-each>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:template>
  <xsl:template name="description">
    <xsl:param name="ThemeId" />
	<ul>
    <xsl:for-each select="/NewDataSet/Table">
      <xsl:variable name="ParentId"  select="ParentId" />
      <xsl:variable name="tThemeId"  select="ThemeId" />
      <xsl:if test="$ThemeId=$ParentId">
        <xsl:if test="$tThemeId!=$ParentId">
            <li>
				<xsl:if test="$currentId = ThemeId">
					<xsl:attribute name="id">currentNode</xsl:attribute>
				</xsl:if>
				<a>
					<xsl:if test="$currentId = ThemeId">
						<xsl:attribute name="class">jstree-clicked</xsl:attribute>
					</xsl:if>
					<xsl:attribute name="href">PublicInfoList.aspx?ThemeId=<xsl:value-of select="ThemeId" /></xsl:attribute> <xsl:value-of select="ThemeTitle"/>
				</a>
			</li>
        </xsl:if>
      </xsl:if>
    </xsl:for-each>
	</ul>
  </xsl:template>
</xsl:transform>
  

 

附件:主题分类树

×

用户登录