Создайте аккордеон в JQuery, который берет его содержимое из XML-файла - PullRequest
Новая
       12

Создайте аккордеон в JQuery, который берет его содержимое из XML-файла

0 голосов
/ 07 ноября 2011

Я хочу динамически создавать аккордеон jquery, получая имена узлов из xml.

В xml под product domainmetadata будет только один раз, и на данный момент доступно только 2 услуги CMS и DIS, поэтому доступны 2 типа услуг.

в сервисном типе (domainmetadata_service) domainmetadata_service_optiongroup и domainmetadata_optiongroup может быть много и только 1 domainmetadata_resourceinfo

Так как же я могу получить аккордеон, похожий на структуру ниже 

Health Check
Configuration
    -System
        -environment
    -PRODUCT
        -DOMAINMETADATA
            -domainmetadata_gateways
            -domainmetadata_gridinfo
            -domainmetadata_service
                -CMS
                    -domainmetadata_service_optiongroup
                    -domainmetadata_optiongroup
                    -domainmetadata_resourceinfo
                -DIS
                    -domainmetadata_service_optiongroup
                    -domainmetadata_optiongroup
                    -domainmetadata_resourceinfo

Прямо сейчас я использую Spry framework , что доставляет мне много хлопот, делая аккордеон динамичным. Нажмите здесь, чтобы просмотреть демонстрацию

Мой XML-ответ 

<?xml-stylesheet type="text/xsl" href="csmclientinfa9.xsl"?><csmclient product="lolv9" date="11/4/11 4:36 PM" version="1.0"><system>
<environment>
    <variable name='HOST' value='estilo' />
</environment>
</system>
<product>
  <domainmetadata>
    <domainmetadata_gateways nodename='N_1164898448' host='opera' httpport='18,448' port='18,449' />
    <domainmetadata_gridinfo>Present</domainmetadata_gridinfo>

    <domainmetadata_service type='ContentManagementService' name='CMS' version='' licenseName='license_all'>
      <domainmetadata_serviceprocess node_name='N_1164898448' pre_start_command='null' post_start_command='null' jvm_options='' />
      <domainmetadata_service_optiongroup name='AddressManagerOptions'>
        <domainmetadata_option type='com.abc.isp.metadata.common.OptionType' name='FullPreLoadCountries' value='' />
        <domainmetadata_option type='com.abc.isp.metadata.common.OptionType' name='PartialPreLoadCountries' value='' />
      </domainmetadata_service_optiongroup>
      <domainmetadata_optiongroup name='DataServiceOptions'>
        <domainmetadata_option type='com.abc.isp.metadata.common.OptionType' name='DataServiceName' value='DIS' />
      </domainmetadata_optiongroup>
      <domainmetadata_resourceinfo>
        <domainmetadata_resource type='Connection' name='Database:PWX DB2400' isAvailable='true' />
        <domainmetadata_resource type='Connection' name='Application:SAP_ALE_IDoc_Reader' isAvailable='true' />
      </domainmetadata_resourceinfo>
    </domainmetadata_service>

    <domainmetadata_service type='DataIntegrationService' name='DIS' version='' licenseName='license_all'>
      <domainmetadata_serviceprocess node_name='N_1164898448' pre_start_command='null' post_start_command='null' jvm_options='' />
      <domainmetadata_service_optiongroup name='SQLServiceOptions'>
        <domainmetadata_option type='com.abc.isp.metadata.common.OptionType' name='MaxConcurrentConnections' value='100' />
        <domainmetadata_option type='com.abc.isp.metadata.common.OptionType' name='MaxPlanCacheSize' value='100' />
      </domainmetadata_service_optiongroup>
      <domainmetadata_service_optiongroup name='CoreServiceOptions'>
        <domainmetadata_option type='com.abc.isp.metadata.common.OptionType' name='ServicePort' value='0' />
        <domainmetadata_option type='com.abc.isp.metadata.common.OptionType' name='JMXPort' value='0' />
      </domainmetadata_service_optiongroup>
      <domainmetadata_service_optiongroup name='LoggingOptions'>
        <domainmetadata_option type='com.abc.isp.metadata.common.OptionType' name='LogDirectory' value='./disLogs' />
      </domainmetadata_service_optiongroup>
      <domainmetadata_resourceinfo>
        <domainmetadata_resource type='Connection' name='Database:PWX DB2400' isAvailable='true' />
        <domainmetadata_resource type='Connection' name='Application:SAP_ALE_IDoc_Reader' isAvailable='true' />
      </domainmetadata_resourceinfo>
    </domainmetadata_service>
</domainmetadata>
</product>

Ответы [ 2 ]

0 голосов
/ 11 ноября 2011

Это то, что я придумал 

var infa9Spans='<span class="infa9span"><img src="/csm/view/include/images/foldericon.png"/><a id="infa9PMServer">PowerCenter Server</a><br/></span>';
$(xml).find("csmclient").each(function()
        {
            $(this).find('product').each(function(){ 

                  $(this).find('domainmetadata_service').each(function(){ 
                    var servicename=$(this).attr('name');
                    infa9Spans+='<span class="infa9span"><img src="/csm/view/include/images/foldericon.png"/><a id="infa9Service">'+servicename+'</a><br/></span>';
                    //var servicediv="<div title="+servicename+" class='class'>";
                });
            });
        });
infa9Spans+='<span class="infa9span"><img src="/csm/view/include/images/foldericon.png"/><a id="infa9PWXServer">PowerExchange Server</a><br/></span>'+
'<span class="infa9span"><img src="/csm/view/include/images/foldericon.png"/><a id="infa9Oracle">Oracle</a><br/></span>'+
'<span class="infa9span"><img src="/csm/view/include/images/foldericon.png"/><a id="infa9DB2">DB2</a><br/></span>'+
'<span class="infa9span"><img src="/csm/view/include/images/foldericon.png"/><a id="infa9Sybase">Sybase</a><br/></span>'+
'<span class="infa9span"><img src="/csm/view/include/images/foldericon.png"/><a id="infa9Informix">Informix</a><br/></span>'+
'<span class="infa9span"><img src="/csm/view/include/images/foldericon.png"/><a id="infa9ODBC">ODBC</a><br/></span>'+
'<span class="infa9span"><img src="/csm/view/include/images/foldericon.png"/><a id="infa9Java">Java Version</a><br/></span>'+
'<span class="infa9span"><img src="/csm/view/include/images/foldericon.png"/><a id="infa9TomcatEnvvars">Tomcat Envvars.txt</a><br/></span>'+
'<span class="infa9span"><img src="/csm/view/include/images/foldericon.png"/><a id="infa9AD50">AD50.cfg</a><br/></span>';


var productSpans=infa9Spans;

$('#productAcc').append(productSpans);

customizeProductAccordion("infa9");
0 голосов
/ 09 ноября 2011

Вы пытались использовать набор данных spry для своего XML и затем использовать Spry HTML Regions для размещения данных?

Регион в основном дает разметке доступ к данным в таком количестве слов. Затем повторите данные по мере необходимости. Вы всегда можете добавить пользовательские поля к нему.

Что-то вроде: 

<div class="Accordion" id="mainAccordion" tabindex="0">                
<div class="AccordionPanel">
    <div class="AccordionPanelTab">&nbsp;<a id="healthCheckAccordion" onClick=""><img align="left" src="http://cdn5.iconfinder.com/data/icons/fatcow/16x16/health.png">Health Check</a></div>

</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">&nbsp;<a id="configurationAccordion" onClick="sysAcc.openFirstPanel()"><img align="left" src="http://cdn4.iconfinder.com/data/icons/Xiao/78.png">Configuration</a></div>
    <div class="AccordionPanelContent">

        <div class="Accordion" id="main2ndAccordion" tabindex="1">
            <div class="AccordionPanel" spry:region="myDataset">
                <div class="AccordionPanelTab">&nbsp;&nbsp;&nbsp;&nbsp;<a id="systemAccordion" style="color:#ffffff;background-color: #2F5882;"><img src="http://cdn2.iconfinder.com/data/icons/gnomeicontheme/16x16/devices/gnome-dev-computer.png"/>&nbsp;&nbsp;System</a></div>
                <div class="AccordionPanelContent" spry:repeatchildren="myDataset">
                    <a id="kernelParamsAccordion">{myField}</a><br/>


                </div>
            </div>

            <div class="AccordionPanel"  spry:region="myDataset">
                <div class="AccordionPanelTab">&nbsp;&nbsp;&nbsp;&nbsp;<img src="http://cdn1.iconfinder.com/data/icons/dortmund/dortmund-16x16/product-design.png"/><a id="productName" style="color:#ffffff;background-color: #2F5882;">&nbsp;&nbsp;ABC</a></div>
                <div class="AccordionPanelContent" id="level2Acc">

                </div>
            </div>

        </div>
    </div>    
</div>

Не уверен, что это то, что вы ищете, но надеюсь, что это поможет.

...