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

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

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

HTML

<table id="table">

</table>

让我再举一个例子来说明我在做什么。假设值“newName”已保存到数据库中的“name”字段中。当我们转到显示所有用户名的引导表的页面时，值为“newName”的引导表将以红色突出显示，并且错误消息会显示类似“error:newName无效，请更改”

---

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

引导表确实提供了格式化程序选项，但这似乎不适用于可编辑扩展（查看更多详细信息）

仍然可以，首先为列设置格式化程序，然后在post body事件中脚本可以更新表。搜索“cfa”以查看代码段中的新增内容

/*开始cfa*/
函数errorFormatter（值、行、索引）{
var thisCellValue=值；
var thisRowData=行；
var thisRowErrorsString=thisRowData.errors；
for（此行数据中的var aKey）{
if（thisRowData[aKey]==thisCellValue）{
if（thisRowErrorsString.indexOf（aKey）！=-1）{
返回值+'有_错误'；
}
}
}
返回此单元格值；
};
/*终审法院*/
风险值数据=[{
“名称”：“引导表”，
“观星者计数”：“526”，
“叉子计数”：“122”，
“说明”：“一个扩展的引导表，具有单选、复选框、排序、分页和其他附加功能。（支持twitter引导v2和v3）”，
“错误：“{'name'，'stargazers\u count'，'forks\u count'}”
}, {
“名称”：“多选”，
“观星者计数”：“288”，
“叉子数”：“150”，
“description”：“一个jQuery插件，用于通过复选框选择多个元素：）”，
“错误”：“{}”
}, {
“名称”：“引导显示密码”，
“观星者计数”：“32”，
“分叉计数”：“11”，
“说明”：“显示/隐藏twitter引导的密码插件。”，
“错误”：“{'s forks_count'}”
}, {
“名称”：“博客”，
“观星者计数”：“13”，
“分叉计数”：“4”，
“说明”：“我的博客”，
“错误”：“{'stargazers\u count'，'name'}”
}, {
“名称”：“scutech红矿”，
“观星者计数”：“6”，
“分叉计数”：“3”，
“说明”：“用于chrome扩展的Redmine通知工具”，
“错误”：“{}”
}];
$（函数（）{
$（“#表”）.bootstrapTable({
/*开始cfa*/
onPostBody:function（）{
$（'[数据值！='']）。每个（函数（每个_元素）{
var thisElement=此；
var thiseElementDataValue=$（thiseElement）.data（'value'）+“”；
if（thisElementDataValue！=null&&thisElementDataValue.indexOf（“有错误”）！=-1）{
$（thisElement.data（'value'，thisElementDataValue.substring（0，thisElementDataValue.indexOf（“有错误”））；
$（thisElement）.text（thisElementDataValue.replace（'has_errors'，'is invalid'）；
$（thisElement）.css（“颜色”、“红色”）；
}
});
},
/*终审法院*/
栏目：[{
字段：“名称”，
标题：“姓名”，
可编辑：{
键入：“文本”
},
格式化程序：errorFormatter，/*cfa*/
}, {
字段：“天文爱好者计数”，
标题:"明星",，
可编辑：{
键入：“文本”
},
格式化程序：errorFormatter，/*cfa*/
}, {
字段：“forks\u count”，
标题：“叉子”，
可编辑：{
键入：“文本”
},
格式化程序：errorFormatter，/*cfa*/
}, {
字段：“错误”，
标题：“错误”，
}],
数据：数据
});
});


如果bootstrapTable中的字段名等于该行的错误数组中传递的项目之一，则将该行中相应的单元格高亮显示为红色，并显示消息“error:（该单元格的打印值）无效”。当用户单击
项目进行编辑时，他们仍应看到原始文本，并出现验证错误，要求他们进行更改。

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
    });
});