bootstrap-tableとx-editableでロード時にデータエラーを表示する方法

Question

編集可能な（x-editable）拡張を使用していくつかの編集可能なフィールドを持つブートストラップテーブルを設定しようとしています。フィールドはURLから引き込まれます。サーバー側では、いくつかの検証チェックを実行し、どのフィールドにエラーが含まれているかの配列を戻します。

これらのエラーを編集可能なプラグインでページの読み込みに表示するにはどうすればよいですか？ ページが2番目に読み込まれるように、ユーザーは誤っているデータを特定できます。

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'という値を持つものが赤く強調表示され、エラーメッセージに「Error：newNameが無効です。変更してください」というエラーメッセージが表示されます。

誰かが私たちが保存時にデータを検証していない理由を尋ねることがあると知っています。この場合、ユーザーは通常は検証チェックに合格しない不良データを入力することができます（データのドラフトとみなす）。これは別のWebページから実行されます。その後、次回のログイン時に、データのドラフトが完了し、送信準備が整ったと判断します。ユーザーは送信ボタンをクリックし、このページに移動してデータを確認して修正するよう求められます。

Answer 1

ブートストラップテーブルはフォーマッタオプションを提供しますが、編集可能な拡張機能では機能しないようです（詳しくは、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>