继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

thinkphp 中的volist标签在ajax操作中的特殊性

LEATH
关注TA
已关注
手记 315
粉丝 93
获赞 466

背景

在一个Thinkphp的复杂页面(包含volist)中实现volist标签显示jquery查询结果的返回

知识点

使用ajax的目的是不刷新整个页面的前提下实现部分表格数据的刷新,但是注意Thinkphp框架中的volist标签是运行在服务器端的,所以使用js动态获取的数据是无法使用thinkphp标签的,无法将$this->ajaxReturn($data);的结果直接用$("#div_id").html(data)的方法显示。

目前找到的解决方法(都有缺陷)

1.新建一个页面进行显示

重新打开一个跳转页面,将返回的值采用 $this->assign("volist_name", $data);的方式返回。
**缺陷:相当于对整个页面重新进行了加载,并没有达到部分更新表单的需求。

2.不用thinkphp框架的标签进行显示

不采用volist标签,对ajaxReturn返回的结果进行分析,按照自己的js的template模板进行显示,可以实现局部表单更新

1,template模板<script id="events-template" type="x-tmpl-mustache">
    {{#data}}
        <tr data-event-id="{{id}}">
            <td style="color: {{event_color}}" title="{{type_name}}">{{type_name}}</td>
            <td>{{isp_name}}</td>
            <td title="AS{{asn}}">AS{{asn}}</td>
            <td title="{{update_time}}">{{update_time}}</td>
        </tr>
    {{/data}}</script>2.对html简单处理
var events_obj = $('#table_id');
var events_html = events_obj.find('tbody');
var events_tpl = $('#events-template').html();

3.对返回的数据进行展示(在ajax的success后function中的操作)
var rendered_events = Mustache.render(events_tpl, data);
events_html.html(rendered_events);

3.暴力拼接

在查找解决方案时遇到的一种震惊的方案https://www.bbsmax.com/A/A7zg2MWld4/



作者:analanxingde
链接:https://www.jianshu.com/p/1638fd380dd7

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP