附件管理插件jQuery模板替换实例

admin · 发表于 2022-11-28 02:30:22

{extend name="apps/common/view/front.tpl" /}
{block name="header_meta"}
<title>我的文件－{:config('common.site_name')}</title>
{/block}
{block name="header"}{include file="apps/common/view/widget/header.tpl" /}{/block}
{block name="main"}
<div class="container pt-2">
<div class="card mb-2">
<div class="card-body d-flex justify-content-between">
<form action="{:DcUrl('attachment/json/index')}" method="get" data-toggle="form" data-callback="daicuo.attachment.result">
<div class="input-group">
<input type="text" class="form-control form-control-sm" name="searchText" id="searchText" maxlength="20" autocomplete="off" data-toggle="attachment-search">
<div class="input-group-append">
<button class="btn btn-sm btn-secondary" type="submit" data-toggle="submit">搜索</button>
</div>
</div>
</form>
<a class="btn btn-sm btn-secondary" data-start="0" data-toggle="attachment-start">下一页</a>
</div>
</div>
<div class="table-responsive">
<table class="table table-bordered text-center">
<thead>
<tr>
<th width="80">ID</th>
<th class="text-left">文件名</th>
<th width="80">后缀</th>
<th width="120">操作</th>
</tr>
</thead>
<tbody id="tbody">
<tr data-id="{{info_id}}">
<td>{{info_id}}</td>
<td class="text-left">{{info_title}}</td>
<td>{{info_type}}</td>
<td><a href="javascript:;" data-toggle="attachment-previw">预览</a> <a href="javascript:;" data-toggle="attachment-edit">修改</a> <a href="javascript:;" data-toggle="attachment-delete">删除</a></td>
</tr>
</tbody>
</table>
</div>
</div>
{/block}
{block name="js"}
<script>
daicuo.attachment = {
tpl: '',
element: '#tbody',
url: function(){
return $('[data-toggle="form"]').attr('action')+'?searchText='+$('[data-toggle="attachment-search"]').val()+'&pageStart='+$('[data-toggle="attachment-start"]').data('start');
},
init: function(obj){
this.element = obj.element;
this.tpl = $(obj.element).html();
//初始请求
daicuo.ajax.get(obj.url, function(json,status,xhr){
daicuo.attachment.result(json,status,xhr);
},function(xhr,status,json){
daicuo.bootstrap.dialog(status);
});
//监听下一页
daicuo.attachment.next();
//监听删除
daicuo.attachment.delete();
//监听搜索表单
daicuo.form.init();
},
//下一页按钮
next: function(){
$(document).on("click",'[data-toggle="attachment-start"]',function(){
daicuo.ajax.get(daicuo.attachment.url(),function(json,status,xhr){
daicuo.attachment.result(json,status,xhr);
},function(xhr,status,json){
daicuo.bootstrap.dialog(status);
});
});
},
//删除按钮
delete: function(){
$(document).on("click",'[data-toggle="attachment-delete"]',function(){
alert($(this).parents('tr').data('id'));
});
},
//替换模板
result: function(json,status,xhr){
if(json){
var tbody = [];
$.each(json.data,function(index,value){
tbody.push(daicuo.attachment.tpl.replaceAll('{{info_id}}',value.info_id).replaceAll('{{info_title}}',value.info_title).replaceAll('{{info_type}}',value.info_type));
});
$(daicuo.attachment.element).html(tbody.join(','));
//下一页
if(json.has_more){
$('[data-toggle="attachment-start"]').data('start',json.next_item[0].info_id);
}else{
$('[data-toggle="attachment-start"]').addClass('disabled');
}
}else{
daicuo.bootstrap.dialog('no');
}
}
};
$(function(){
daicuo.attachment.init({
element: "#tbody",
url: $('[data-toggle="form"]').attr('action')
});
});
</script>
{/block}
{block name="footer"}{include file="apps/common/view/widget/footer.tpl" /}{/block}

复制代码

		自动登录	找回密码
密码			免费注册

[开发笔记] 附件管理插件jQuery模板替换实例