如何使用引导表和x-editable在加载时显示数据错误

Question

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

如何使用可编辑插件在页面加载时显示这些错误？因此，在页面加载的第二天，用户可以识别哪些数据不正确。

参见示例：JSFiddle

超文本标记语言

<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”的引导表将以红色突出显示，并且错误消息会显示类似“error:newName无效，请更改”。

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

Answer 1

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

仍然可以，首先为列设置格式化程序，然后在post body事件中脚本可以更新表。搜索“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>