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

Question

我正在尝试使用可编辑（x-editable）扩展名填充具有多个可编辑字段的引导表。这些字段是从 url 中提取的。在服务器端，我们运行一些验证检查并传回包含错误字段的数组。

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

See example: JSFiddle

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' 字段中。当我们进入显示所有用户名的引导表的页面时，值为“newName”的那个会以红色突出显示，并且错误消息会显示类似“错误：newName 无效，请更改”之类的内容。

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

Answer 1

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

仍然可以，首先设置列的格式化程序，然后在发布正文事件时，脚本可以更新表格。搜索“cfa”以查看 sn-p 中的添加内容。

/* 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>