README

此小部件最初开发的思路是，有时我们需要在表格中动态添加新行，但在前端开发中这很困难，更简单的方法是后端生成，只需要在前端动态添加内容。

安装

composer require pigochu/yii2-ajax-renderer:"dev-master"

使用方法

视图

<?php
use pigolab/ajaxrenderer/AjaxRenderer;
?>
<table id="tbl">
  <tbody>
    <?php for($i=0; $i<3; $i++): ?>
    <tr>
      <td><?php echo $i; ?> never display in AJAX mode</td>
    </tr>
    <?php endfor; ?>
    <?php AjaxRenderer::begin(); ?>
    <tr>
      <td>display in normal mode and AJAX mode</td>
    </tr>
    <?php AjaxRenderer::end(); ?>
  </tbody>
</table>

如果我们使用常规调用，结果将是

<table id="tbl">
  <tbody>
    <tr>
      <td>0 never display in AJAX mode</td>
      <td>1 never display in AJAX mode</td>
      <td>2 never display in AJAX mode</td>
    </tr>
    <tr>
      <td>display in normal mode and AJAX mode</td>
    </tr>
  </tbody>
</table>

如果使用 AJAX 调用，结果将是

    <tr>
      <td>display in normal mode and AJAX mode</td>
    </tr>

调用 $.renderAjax()

客户端提供的 $.renderAjax() 可以处理 AJAX 内容，它将过滤放入 head 标签中的脚本或 CSS，以防止 DOM 乱序。

此示例将加载 URL，并将内容追加到 $('#tbl tbody')

<?php
    // If your view not use AjaxRenderer::begin() ，you need call AjaxRendererAsset::regiter()
    // use pigolab/ajaxrenderer/AjaxRendererAsset;
    // AjaxRendererAsset::register($this);
?>
<script>
$('#yourButtonId').on('click' , function(){
	$.renderAjax({
	    url : "<?= Url::to('Your Route') ?>",
	    renderMode : 'append',
	    targetElement : $('#tbl tbody')
	});
});
</script>

$.renderAjax 使用方法

基本语法：$.renderAjax(options)。

$.renderAjax() 需要三个选项

$.renderAjax({
    url : "<?= Url::to('Your Route') ?>",
    renderMode : 'append',
    targetElement : $('#tbl tbody')
});

• url : 您想加载的 URL。
• renderMode : 渲染模式可以是 'replace'、'append' 和 'prepend'，默认为 'replace'。
• targetElement : 您想替换/追加/前置内容的目标元素。

您还可以放置 $.ajax 定义的选项。

$.renderAjax({
    url : "<?= Url::to('Your Route') ?>",
    renderMode : 'append',
    targetElement : $('#tbl tbody'),
    method: 'POST',
    error: function( jqXHR, textStatus, errorThrown ) { // .... }
});

$.renderAjax() 定义了两个附加事件：beforeRender 和 afterRender。

$.renderAjax({
    url : "<?= Url::to('Your Route') ?>",
    renderMode : 'append',
    targetElement : $('#tbl tbody'),
    beforeRender : function(data , options , originData) { // if ajax call success，than trigger this event },
    afterRender : function(data , options , originData) { // if ajax call success, and render success , than trigger this event  },
});

beforeRender & afterRender 回调选项

• data : 这是一个数组，renderAjax 解析响应数据并将其转换为 [contents,scripts,links]，您可以在 beforeRender 中修改它或在 afterRender 中初始化一些插件。
• options : 这是传递给回调的 $.renderAjax(options)。
• originData : 原始响应数据