如何使用 bootstrap-table 和 x-editable 在加载时显示数据错误

Question

我正在尝试使用 editable (x-editable) 扩展用多个 editable 字段填充 bootstrap-table .这些字段是从 url 中提取的。在服务器端，我们运行进行一些验证检查并传回包含错误的字段数组。

如何使用 editable 插件在页面加载时显示这些错误？这样一来，页面加载后，用户就可以识别出哪些数据不正确。

HTML

<table id="table">

</table>

Javascript

var data = [
    {
        "name": "bootstrap-table",
        "stargazers_count": "526",
        "forks_count": "122",
        "description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) ",
        "errors": "{'name','stargazers_count','forks_count'}"
    },
    {
        "name": "multiple-select",
        "stargazers_count": "288",
        "forks_count": "150",
        "description": "A jQuery plugin to select multiple elements with checkboxes :)",
        "errors": "{}"
    },
    {
        "name": "bootstrap-show-password",
        "stargazers_count": "32",
        "forks_count": "11",
        "description": "Show/hide password plugin for twitter bootstrap.",
        "errors": "{'forks_count'}"
    },
    {
        "name": "blog",
        "stargazers_count": "13",
        "forks_count": "4",
        "description": "my blog",
        "errors": "{'stargazers_count', 'name'}"
    },
    {
        "name": "scutech-redmine",
        "stargazers_count": "6",
        "forks_count": "3",
        "description": "Redmine notification tools for chrome extension.",
        "errors": "{}"
    }
];

$(function () {
    $('#table').bootstrapTable({
            columns: [
            {
            field: 'name',
          title: 'Name',
          editable: {
            type: 'text'
          }
          },{
          field: 'stargazers_count',
          title: 'Stars',
          editable: {
            type: 'text'
          }
          },{
            field: 'forks_count',
            title: 'Forks',
            editable: {
                type: 'text'
            }
          },{
          field: 'errors',
          title: 'Errors',
          }
        ],
        data: data
    });
});

再举一个我正在尝试做的例子。假设值 'newName' 已保存到我们数据库中的 'name' 字段。当我们使用 bootstrap table 显示所有用户名称的页面时，值为 'newName' 的页面将突出显示为红色，并且错误消息会显示类似 "Error: newName is not valid, please change".

我知道有人会问为什么我们不在保存时验证数据。在这种情况下，允许用户输入通常不会通过验证检查的错误数据（考虑草稿数据），这是从不同的网页完成的。然后在稍后的时间，比如下次登录，他们决定完成草稿数据并准备提交。用户将单击提交按钮，并被带到此页面，要求其查看和更正他们的数据。

Answer 1

bootstrap table 确实提供了格式化程序选项，但它似乎不适用于 editable 扩展（查看 https://github.com/wenzhixin/bootstrap-table/blob/develop/src/extensions/editable/bootstrap-table-editable.js#L65 了解更多详情）。

仍然可以，首先设置列的格式化程序，然后在 post 主体事件上脚本可以更新 table。搜索 'cfa' 以查看代码段中的添加内容。

/* begin cfa */
function errorFormatter(value, row, index) {
  var thisCellValue = value;
  var thisRowData = row;
  var thisRowErrorsString = thisRowData.errors;

  for (var aKey in thisRowData) {
    if (thisRowData[aKey] == thisCellValue) {
      if (thisRowErrorsString.indexOf(aKey) != -1) {
        return value + ' has_errors';
      }
    }
  }

  return thisCellValue;
};
/* end cfa */

var data = [{
  "name": "bootstrap-table",
  "stargazers_count": "526",
  "forks_count": "122",
  "description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) ",
  "errors": "{'name','stargazers_count','forks_count'}"
}, {
  "name": "multiple-select",
  "stargazers_count": "288",
  "forks_count": "150",
  "description": "A jQuery plugin to select multiple elements with checkboxes :)",
  "errors": "{}"
}, {
  "name": "bootstrap-show-password",
  "stargazers_count": "32",
  "forks_count": "11",
  "description": "Show/hide password plugin for twitter bootstrap.",
  "errors": "{'forks_count'}"
}, {
  "name": "blog",
  "stargazers_count": "13",
  "forks_count": "4",
  "description": "my blog",
  "errors": "{'stargazers_count', 'name'}"
}, {
  "name": "scutech-redmine",
  "stargazers_count": "6",
  "forks_count": "3",
  "description": "Redmine notification tools for chrome extension.",
  "errors": "{}"
}];

$(function() {
  $('#table').bootstrapTable({
    /* begin cfa */
    onPostBody: function() {
      $('[data-value!=""]').each(function(each_element) {
        var thisElement = this;
        var thisElementDataValue = $(thisElement).data('value') + " ";

        if (thisElementDataValue != null && thisElementDataValue.indexOf("has_errors") != -1) {
          $(thisElement).data('value', thisElementDataValue.substring(0, thisElementDataValue.indexOf("has_errors")));
          $(thisElement).text(thisElementDataValue.replace('has_errors', 'is invalid'));
          $(thisElement).css("color", "red");
        }
      });
    },
    /* end cfa */
    columns: [{
      field: 'name',
      title: 'Name',
      editable: {
        type: 'text'
      },
      formatter: errorFormatter, /* cfa */
    }, {
      field: 'stargazers_count',
      title: 'Stars',
      editable: {
        type: 'text'
      },
      formatter: errorFormatter, /* cfa */
    }, {
      field: 'forks_count',
      title: 'Forks',
      editable: {
        type: 'text'
      },
      formatter: errorFormatter, /* cfa */
    }, {
      field: 'errors',
      title: 'Errors',
    }],
    data: data
  });

});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet" />
<link href="https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />

<table id="table">

</table>
<hr>
<div>
  If the field name in bootstrapTable is equal to one of the items passed in the error array for that row, then highlight the appropriate cell in that row RED and display message "Error: (print value for that cell) is invalid". When a user clicks on the
  item to edit it, they should still see the original text with a validation error asking them to change it.
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<script src="https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/extensions/editable/bootstrap-table-editable.js"></script>

如何使用 bootstrap-table 和 x-editable 在加载时显示数据错误

How to display data errors on load with bootstrap-table and x-editable

javascript

jquery

twitter-bootstrap

x-editable

bootstrap-table