若依框架无法点击修改与删除按钮原因分析
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b9db1ece8c676370c2710eaee6415b6d.png)
如上图所示的 修改与删除按钮
标识1位置的按钮无法使用,即使我厦门复选框选择了一个数据,依旧无法点击
标识2位置的按钮始终可以使用
从上面简单可以看出后台应该是没有问题的
分析过程:
1、设置一个强制可以修改的按钮
以下是源代码
<div class="btn-group-sm" id="toolbar" role="group">
<a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="lct:order_tem:add" >
<i class="fa fa-plus"></i> 添加
</a>
<a class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="lct:order_tem:edit" >
<i class="fa fa-edit"></i> 修改
</a>
</div>
调整后
<div class="btn-group-sm" id="toolbar" role="group">
<a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="lct:order_tem:add" >
<i class="fa fa-plus"></i> 添加
</a>
<a class="btn btn-primary " onclick="$.operate.edit()" >
<i class="fa fa-edit"></i> 修改1111
</a>
</div>
2、刷新程序,看到按钮变成了“修改1111”,点击后出现一个错误对话框,关掉后,出现一个提示,提示我们"请至少选择一条记录"
到此可以判断出来是,数据勾选了,但是传递给修改与删除按钮的时候,他们没有读取到
3、查看$.operate.edit()对应的代码,ctrl+单机edit()
edit: function(id) {
table.set();
if($.common.isEmpty(id) && table.options.type == table_type.bootstrapTreeTable) {
var row = $("#" + table.options.id).bootstrapTreeTable('getSelections')[0];
if ($.common.isEmpty(row)) {
$.modal.alertWarning("请至少选择一条记录");
return;
}
var url = table.options.updateUrl.replace("{id}", row[table.options.uniqueId]);
$.modal.open("修改" + table.options.modalName, url);
} else {
$.modal.open("修改" + table.options.modalName, $.operate.editUrl(id));
}
},
从代码var row = $(“#” + table.options.id).bootstrapTreeTable(‘getSelections’)[0];中可以看出:
选择的是行数据的第一个内容
4、查看表格数据的代码
调整前的下面代码,可以看出这边增加了一列序号,从而使得ID变成了第二列,
所以传递数据出问题了
columns: [{
checkbox: true
},
{
title: '序号',
field: '',
align: 'center',
formatter: function (value, row, index) {
var pageSize = $('#bootstrap-table').bootstrapTable('getOptions').pageSize; //通过table的#id 得到每页多少条
var pageNumber = $('#bootstrap-table').bootstrapTable('getOptions').pageNumber; //通过table的#id 得到当前第几页
return pageSize * (pageNumber - 1) + index + 1; // 返回每条的序号: 每页条数 *(当前页 - 1 )+ 序号
}
},
{
field: 'id',
title: 'ID',
visible: false
},
{
field: 'gName',
title: '商品名称'
},
{
field: 'gBranch',
title: '品牌'
},
{
title: '操作',
align: 'center',
formatter: function (value, row, index) {
var actions = [];
actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
return actions.join('');
}
}]
调整后
columns: [{
checkbox: true
},
{
field: 'id',
title: 'ID',
visible: false
},
{
title: '序号',
field: '',
align: 'center',
formatter: function (value, row, index) {
var pageSize = $('#bootstrap-table').bootstrapTable('getOptions').pageSize; //通过table的#id 得到每页多少条
var pageNumber = $('#bootstrap-table').bootstrapTable('getOptions').pageNumber; //通过table的#id 得到当前第几页
return pageSize * (pageNumber - 1) + index + 1; // 返回每条的序号: 每页条数 *(当前页 - 1 )+ 序号
}
},
{
field: 'gName',
title: '商品名称'
},
{
field: 'gBranch',
title: '品牌'
},
{
title: '操作',
align: 'center',
formatter: function (value, row, index) {
var actions = [];
actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
return actions.join('');
}
}]
5、刷新程序,问题解决
由此可以知道若依框架,ID需要放在数据列的第一列。