javascript - jquery simpleGrid 加载时禁用

Question

我正在使用这样的 simpleGrid:

                     t.p.operatorGrid = $("#codGrid").simpleGrid({
                        dataUrl: t.p.operatorUrl,
                        columns: [
                            {name: "id", hidden: true},
                            {name: "cod", label: "Cod", width: "10%"}
                        ],

                        onSelectedCustom: function () {
                            t._enableButton(t.p.removeButton);
                        }
                    });

当我的网格从服务器加载数据时，如何显示加载框并禁用该对话框，以便用户在网格加载时无法搜索某些内容？

谢谢!

Answer 1

可以使用简单的 gif 来加载图像。数据加载时显示，完成时隐藏。并可以使用

禁用对话框

$(selector).attr('disabled','disabled');

请参阅下面的实际代码，希望它有所帮助:

$(document).ready(function() {
  $("#change").on("click", function() {
    var req = $.ajax({
      type: "POST",
      url: "datapro.php",
      beforeSend: function() {
        $("#wait").css("display", "block");
      },
      complete: function() {
        $("#wait").css("display", "none");
      }
    });

  });
});

#wait {
  text-align: center;
  display: none;
  width: 200px;
  height: 89px;
  border: 0px solid black;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 2px;
  '

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="txt">
  <div id="result">jQuery Ajax Loading Animation</div>
</div>
<p></p>
<button id="change">Change Content</button>
<div id="wait">
  <img src='https://www.drupal.org/files/loading.gif' />
  <br />Please Wait While Loading Data ...</div>