正文

bootstrap-table 中取主键字段的问题，主键名不叫id

IP云
IP云V管理员/8 阅读
08/02
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

问题 ：取不到数据行的主键

要绑定的数据字段 RoleId rolename adddate RoleId 为主键是唯一的

bootstraptable的配置

  • uniqueId: "RoleId", //每一行的唯一标识，一般为主键列

  • columns: [

    {

    field: 'RoleId',

    checkbox: true,

    align: 'center',
    valign: 'middle' },{
    width: "100px",
    field: 'operate',
    title: '操作',
    events: operateEvents,
    formatter: function(value, row, index) {
    return '<a href="javascript:void(0);" >修改</a> &nbsp;' + '<a href="javascript:void(0);" class="remove" >删除</a> &nbsp;'; }
    }

  • window.operateEvents =

    {'click .remove': function (e, value, row, index) {
    alert('You click like action, row: ' + parseInt(row.RoleId));
    }
    };

配置说明

1 operate是冗余的属性，如果设置为roleid会导致页面的table变形

问题现象

当点击删除按钮的时候，row.RoleId的值取不到。 虽然RoleId是唯一的，也确实有值。

解决

  • uniqueId: "Id", //设置为Id比较可靠，别的名字容易出问题
  • idField: "RoleId", 可以通过种方式设置主键

function responseHandler(res) { var resultStr = $.parseJSON(res);
if (resultStr.TotalItems >0) {
$("#tr_NoRS").parent().remove();
} $.each(resultStr.Items, function (i, row) {
row.operate = "";
row.Id = row.RoleId;
}); return {
"rows": resultStr.Items,
"total": resultStr.TotalItems
};
}

  • 通过这种方式对返回的数据（要绑定到table的数据）进行处理，添加不存在的Id属性和operate属性

最后测试下效果


window.operateEvents = { 'click .remove': function (e, value, row, index) {
alert('You click like action, row: ' + parseInt(row.Id));
} };

正确弹出了RoleId 的值。 曲线救国啊。