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

Question

我正在尝试使用可编辑(x-可编辑)扩展用几个可编辑字段填充 Bootstrap 表。这些字段是从 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”已保存到我们数据库中的“名称”字段。当我们转到带有显示所有用户名称的 Bootstrap 表的页面时，值为“newName”的页面将突出显示为红色，并且错误消息会显示类似“错误:newName 无效，请更改”之类的内容。

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

Answer 1

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

这仍然是可能的，首先为列设置格式化程序，然后在发布正文事件时脚本可以更新表格。搜索“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>