0

HTMLにアコーディオンがあり、ヘッダーonclickが関数initTableを呼び出します。

<script type="text/javascript">
  $(document).ready(function() 
  {
    $('.accordion ul li h1').click(function() 
    {                
      document.getElementById('processing').innerHTML = "Processing...";
      document.body.style.cursor = 'Wait';
      $(this).parent().parent().find('.ac:visible').slideToggle().parent().removeClass('active');

      if ($(this).next().is(':hidden'))
      {
        $(this).next().slideToggle().parent().addClass('active'); 
      }
    });
  } );
  </script>
</head>
<body>
  <div id=processing></div>
  <div class="wrapper">
    <div class="accordion">
      <ul>
        <li>
          <h1 onclick=initTable("Anticoag")>Anticoag</h1>
          <div class="ac">
            <div id="AnticoagTable" width="100%">Loading...</div>
          </div>
        </li>

initTableはサーバーにアクセスしてデータを取得し、DataTableを作成します。これには数秒かかります。

私がやろうとしているのは、initTable呼び出しが発生する前に、div id='processing'を"Processing..."に設定することです。

現在、テーブルデータが返されるのを待っていると、「処理中...」と表示されます。

このコードを使用して、h1をonclick = test1（category）に変更してみました。しかし、何らかの理由で、私のinitTable関数はこれで呼び出されていません。それが構文なのか、それとも完全に間違って使用しているのかわからない。

function test1(category)
{
  test2(category, function()
  {
    initTable(category);
  });
}

function test2(category)
{
  alert("test2");
  document.getElementById('processing').innerHTML = "Processing...";
  document.body.style.cursor = 'Wait';
}

リクエスト関数によるinitTable関数の追加initTable（category）{if（gsCategory === ""）gsCategory = category; else if（gsCategory == category）gbToggle =！gbToggle; それ以外の場合、gbToggle = false;

    gsCategory = category;

    if (gbToggle === false) {
        gsCategory = category;

        var select = document.forms[0].selFacility;
        var facility = select.options[select.selectedIndex].value;

        var patJson = getJson(facility, category);
        document.getElementById('processing').innerHTML = "Done...";
        document.body.style.cursor = 'Default';
        var anOpen = [];
        var sImageUrl = "../images/";
        makeTable(category);

        var oTable = $('#' + category).dataTable({
            "bProcessing": false,
                "bDestroy": true,
                "aaData": patJson,
                "bAutoWidth": false,
                "aoColumns": [{
                "mDataProp": null,
                    "sClass": "control center",
                    "sDefaultContent": '<img src="' + sImageUrl + 'details_open.png' + '">',
                    "sWidth": "5%"
            }, {
                "mDataProp": "S_PAT_NAME",
                    "sWidth": "30%"
            }, {
                "mDataProp": "S_AGE",
                    "sWidth": "15%"
            }, {
                "mDataProp": "S_FIN",
                    "sWidth": "30%"
            }, {
                "mDataProp": "S_ROOM_BED",
                    "sWidth": "20%"
            }]
        });

        $('#' + category + ' td.control').live('click', function () {
            var nTr = this.parentNode;
            var i = $.inArray(nTr, anOpen);

            if (i === -1) {
                $('img', this).attr('src', sImageUrl + "details_close.png");
                var nDetailsRow = oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
                $('div.innerDetails', nDetailsRow).slideDown();
                anOpen.push(nTr);
            } else {
                $('img', this).attr('src', sImageUrl + "details_open.png");
                $('div.innerDetails', $(nTr).next()[0]).slideUp(function () {
                    oTable.fnClose(nTr);
                    anOpen.splice(i, 1);
                });
            }
        });
    } //gbToggle = false
}
4

2 に答える 2

1

onclickjQueryでクリックする関数をすでに割り当てているので、属性は必要ありません。

クリックハンドラー関数内にinitTable呼び出しを配置するだけです。data-somethingクリックされたものを認識するために、属性を使用できます

$(document).ready(function()  {
  $('.accordion ul li h1').click(function()  {  
  var category = $(this).attr('data-category');

  $('#processing')..text("Processing...");
  ...
  initTable( category );



<h1 data-category="Anticoag">Anticoag</h1>

また、次のことを行う必要があります。

  • {javascriptでは、改行を入れるのは正しくないことを知ってください

  • インライン関数を他の関数に渡すとどうなるかを理解してください。

    test2（category、function（）{initTable（category）;}）;

test2また、関数定義で2番目の引数を宣言していません。

于 2013-02-10T19:47:21.457 に答える
0

あなたinitTable(category)は決して呼ばれません。

test2する必要があります：

 function test2(category,cb){
  alert("test2");
  document.getElementById('processing').innerHTML = "Processing...";
  document.body.style.cursor = 'Wait';
  //Calling the call-back
  cb(category);
 }

これが実際のコードです。しかし、あなたは単にあなたの中で行うことができますtest1

function test1(category)
{
  test2(category);

  //asynchronous call to initTable().
  setTimeout(function(){
      initTable(category);
  },0);
}
于 2013-02-10T19:41:57.180 に答える