\n\n
\n
\n\t

主题分类

\n
\n
\n\t
\n\t\t
\n\t\t\t
    \n\t\t\t\t {PE.Label id=\"PE部门主题公开目录列表\" currentId=\"@RequestInt_ThemeId\" /}\n\t\t\t
\n\t\t
\n\t
\n
\n
\n\t \n \n\n \n \n(2)PE部门主题公开目录列表.config \n\n \n\n \n \n \n 政务公开\n \n \n \n \n \n \n \n sin\n \n \n \n sql_sysquery\n \n \n \n False\n \n\t\n \n\t\t\n \n currentId\n \n\t\t\n \n 0\n \n\t\t\n \n 当前栏目ID\n \n\t\n \n \n \n \n \n false\n \n \n \n false\n \n \n \n SELECT * FROM PE_GV_PublicInfoTheme\n \n \n \n \n\n \n \n \n \n \n \n
  • 找不到相关分类
  • \n
    \n \n \n \n \n \n
  • \n\t\t\t\t\n\t\t\t\t\tcurrentNode\n\t\t\t\t\n \n \n\t\t\t\t\t\n\t\t\t\t\t\tjstree-clicked\n\t\t\t\t\t\n\t\t\t\t\tPublicInfoList.aspx?ThemeId= \n\t\t\t\t\n \n

    \n \n

    \n
  • \n
    \n
    \n
    \n
    \n
    \n \n \n\t\n \n
    \n \n\n \n \n附件:主题分类树", "copyrightHolder": "本站原创" }
    您的位置: 首页 >日志>前端技术>详细内容

    前端技术

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

    来源:本站原创 发布时间: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>
      

     

    附件:主题分类树