Question

我正在尝试使用可编辑（x-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
    });
});

再举一个我想要做的例子。让我们说价值＆＃39; newName＆＃39;得到了保存到＆＃39;名称＆＃39;数据库中的字段。当我们使用显示所有用户名称的引导程序表转到我们的页面时，具有值＆＃39; newName＆＃39;将突出显示为红色，并且错误消息会显示类似＆＃34;错误：newName无效，请更改＆＃34;。

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

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>

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

1 个答案: