分页时bootstraptable和Vue放在一起使用时出现按钮失效的解决办法
//boostraptable的代码 function select(){var id=$("#id").val();var name=$("#name").val();$('#LogData').bootstrapTable('destroy');$("#LogData").bootstrapTable({url: "${C
//boostraptable的代码
function select(){
var id=$("#id").val();var name=$("#name").val();
$('#LogData').bootstrapTable('destroy');
$("#LogData").bootstrapTable({
url: "${Config.baseURL}/commons-import/component/excel/template/type/page",
method:"get",
toolbar:'#productToolBar',
pagination : true, // 分页
striped: true, //间隔换色
cache: false,
striped: true, //表格显示条纹
silent: true, //刷新事件必须设置
pageSize: 10, //每页显示的记录数
pageNumber:1, //初始化加载第一页
search: false, //是否启用查询
showColumns: false, //显示下拉框勾选要显示的列
showRefresh: false, //显示刷新按钮
clickToSelect: true, //点击行就选中
showToggle: false,
showColumns: false, //显示隐藏列
showRefresh: false, //显示刷新按钮
singleSelect: true, //复选框只能选择一条记录
sidePagination: 'server', //server没有与数据库交互,所以使用客户端分页
dataField :'data', //返回的数据
clickToSelect: true, //是否启用点击选中行
pageList: [3,5,7,11],
/* showExport: true, //是否显示导出
exportDataType: "basic", */
//设置分页自定义参数,服务端返回数据必须要含有total和rows两个,客户端分页返回数据必须要有data节点
queryParams: function(params) {
var param = {
pageIndex: this.pageNumber-1,
pageSize: params.limit,
id: id,
name: name
};
return param;
},
columns: [
{field:"id",align:"center", valign: 'middle',width:"5%",title:"模块类型编号"},
{field:"typeName",align:"center",valign: 'middle',width:"5%",title:"模块类型名称"},
{field:"create_user",align:"center",valign:'middle',width:"5%",title:"创建人姓名"},
{field:"create_time",align:"center",valign:'middle',width:"5%",title:"创建日期"},
{field:"grade",align:"center",valign:'middle',width:"5%",title:"操作",
formatter:function(value,row,index){
return[
'<button οnclick="removeType(\''+row.id+'\')" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-trash"></span> 删除</button>',
'<button οnclick="toedit(\''+row.id+'\')" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-plus-sign"></span> 编辑</button>',
].join('');
}
}
]
});
}
Vue的代码:
var vm = new Vue({
el: 'body',
data:function() {
return {
data:{
id : '',
types:'',
total:'',
typeName:'',
msg: ''
},
}
},
methods: {
removeType:function(id){
alert("aaa");
$.messager.confirm('确认','您确认想要删除记录吗?',function(flag){
if(flag){
$.ajax({
//跳转到ImportTemplateTypeController下的方法
url : basePath + "commons-import/component/excel/template/type/" + id,
type : 'delete',
success : function(data) {
getTypes();
},
error : function(jqXHR, textStatus, errorThrown) {
$.alert("error","删除失败!");
}
});
}
});
},
toedit1: function(id){
alert("aa");
this.$refs.dialogedit.show = true
vm.onshowedit(id);
},
本来我想点击Bootstraptable中的编辑按钮的,但是发现页面没有反应。
于是想到方法调用方法的机制。这里最重要的一点是 vue的方法用vm来圈住,感谢某篇博客解决了困扰了我调用不了的问题。
function toedit(id){
/* document.getElementById("target").click(); */
vm.toedit1(id);
}
更多推荐
所有评论(0)