Version 5.1.5

Ajax getHtml事件 返回

应用于局部有数据变化需要ajax重载

可调用字段 参数说明
这是一个简单的getHtml示例

当前时间:2024-03-29 08:55:26
点击试试

<!--这是一个简单的示例-->
<div class="row pd-15">
{openzc:ajax filename="gethtml_demo1"}
	{openzc:php}
		echo "当前时间:".date("Y-m-d H:i:s");
	{/openzc:php}
{/openzc:ajax}
<a class="badge badge-primary mg-l-5 openzc-btn" href="javascript:void(0);" data-action="getHtml" data-reload="gethtml_demo1"><i class="icon ion-refresh"></i> 点击试试</a>
</div>          
filter 产品属性筛选后ajax重加载产品列表

根据属性、价格、品牌筛选当前分类产品列表

There are 6 products.
Order by : Page Limit :

<!--说明:item="brand,price,attr"(可自由指定要调用的过滤项目)-->
<div class="mail-panel">
 	<div class="mail-sidebar pos-relative">
 	<!--定义filter导航区块,选择后重载filter导航-->
 	{openzc:ajax filename="filter_left"}
		{openzc:if $filterStatus}
			<button id="mailComposeBtn" class="btn btn-block btn-outline-secondary text-uppercase">Filtered By</button>
			<nav class="nav nav-classic flex-column mg-t-10 mg-b-10">
			{openzc:filter item="active"}
				{openzc:loopson}
				<a class="nav-link tx-10 openzc-btn" data-action="getHtml" data-url="[field:filter_link/]" data-reload="filter_left,filter_listbar,filter_list"><i class="icon ion-close mr-2"></i> <span>[field:filter_name/]</span></a>
				{/openzc:loopson}
				{openzc:if $field["filter_item"]=="clear"}
            	<a class="nav-link tx-10 openzc-btn" data-action="getHtml" data-url="[field:filter_link/]" data-reload="filter_left,filter_listbar,filter_list"><i class="icon ion-close mr-2"></i> <span>Clear All</span></a>
        		{/openzc:if}
			{/openzc:filter}
			</nav>
		{/openzc:if}

		{openzc:filter item="brand"}
		<button id="mailComposeBtn" class="btn btn-block btn-outline-secondary text-uppercase">[field:filter_item/]</button>
		<nav class="nav nav-classic flex-column mg-t-10 ">
			{openzc:loopson}
			<a class="nav-link {openzc:if $field['status']=='active'}active{/openzc:if} tx-10 openzc-btn" data-url="[field:filter_link/]" data-action="getHtml" data-reload="filter_left,filter_listbar,filter_list">
				<span>[field:filter_name/]</span> <span class="badge">[field:filter_count/]</span>
			</a>
			{/openzc:loopson}
		</nav>
		{/openzc:filter}

		<!--space="10" 价格区间跨度-->
		{openzc:filter item="price" space="10"}
		<button id="mailComposeBtn" class="btn btn-block btn-outline-secondary text-uppercase mg-t-20">[field:filter_item/]</button>
		<nav class="nav nav-classic flex-column mg-t-10 ">
			{openzc:loopson}
			<a class="nav-link {openzc:if $field['status']=='active'}active{/openzc:if} tx-10 openzc-btn" data-url="[field:filter_link/]" data-action="getHtml" data-reload="filter_left,filter_listbar,filter_list"> <span>[field:filter_name/]</span> <span class="badge">[field:filter_count/]</span></a>
			{/openzc:loopson}
		</nav>
		{/openzc:filter}

		<!--options_id="all" all(该分类下的全部属性) 可以指定属性ID options_id="1,2,3"-->
		{openzc:filter item="attr" options_id="all"}
		<button id="mailComposeBtn" class="btn btn-block btn-outline-secondary text-uppercase mg-t-20">[field:filter_item/]</button>
		<nav class="nav nav-classic flex-column mg-t-10 ">
			{openzc:loopson}
			<a class="nav-link {openzc:if $field['status']=='active'}active{/openzc:if} tx-10 openzc-btn" data-url="[field:filter_link/]" data-action="getHtml" data-reload="filter_left,filter_listbar,filter_list"> <span>[field:filter_name/]</span> <span class="badge">[field:filter_count/]</span></a>
			{/openzc:loopson}
		</nav>
		{/openzc:filter}
	{/openzc:ajax}
 	</div>
 	<div id="mailBodyList" class="mail-body {openzc:if IS_MOBILE==false}pos-absolute t-0{/openzc:if}">
 		<div class="mail-body-content ht-auto">
             <div class="mail-navbar" id="{openzc:ajax id='filter_listbar'/}">
              	<!--创建listbar重载区块:filter_listbar-->
               	{openzc:ajax filename="filter_listbar" autodiv="false"}
                <div class="align-items-center">
                  	<!--自定义分页信息内容 详细参见 { openzc:pagelist } 使用教程-->
                  	<h6 class="mail-from">{openzc:pagelist custom="text"/}</h6>
                </div>
                	<!--产品列表排序和产品显示数量 详细参见 { openzc:listbar } 使用教程-->
                <div {openzc:if IS_MOBILE}class="d-none"{/openzc:if}>
					Order by :
					<select class="custom-select wd-200 ml-2 mr-3 openzc-select" data-action="autoLink">
						{openzc:listbar item="orderby" flag="sell,price,view,name"}
							<option value="[field:orderby_link/]" {openzc:if $field['status']=="active"}selected=""{/openzc:if}>[field:orderby_name/]</option>
						{/openzc:listbar}
					</select>
					Page Limit :
					<select class="custom-select wd-200 ml-2 openzc-select" data-action="autoLink">
						{openzc:listbar item="limit"}
							<option value="[field:limit_link/]" {openzc:if $field['status']=="active"}selected=""{/openzc:if}>[field:limit_name/]</option>
						{/openzc:listbar}
					</select>
            	</div>
            	{/openzc:ajax}
             </div>
             <!--创建产品列表重载区块 filter_list-->
             {openzc:ajax filename="filter_list"}
             <div class="mail-msg ps ps--active-y">
             	<div class="row mg-b-20">
				{openzc:if $listCount>0}
				{openzc:list pagesize="12" imgsizer="190,245"}
				<div class="col-6 col-md-3 col-lg-3 tx-center">
					<div><img src="[field:products_image/]" style="max-width:100%"/></div>
					<div><a class="tx-light tx-color-01 mg-b-0" href="[field:products_link/]">[field:products_name/]</a></div>
					<span class="p-2">[field:products_price/]</span>
				</div>
				{/openzc:list}
				</div>
				{/openzc:if}
             	<!--分页调用--详细参考pagelist标签的使用教程-->
         
             	{openzc:if $listCount>0}
             	<nav aria-label="Page navigation example" class="mg-t-20 mg-b-20">
             		<ul class="pagination justify-content-center pagination-circle">
					{openzc:pagelist listitem="prev,list,next" listsize="5"/}
					</ul>
				</nav>
				{else}
				<nav aria-label="Page navigation example">
					<p class="pagination justify-content-center ">
					The current category is empty.
					</p>
				</nav>
				{/openzc:if}
             </div>
             {/openzc:ajax}
        </div>
    </div>
</div>