***************************************************************
//[PHP]
$jason = json_encode($data);
$jason = str_replace("[", "", $jason);
$jason = str_replace("]", "", $jason);
echo $jason;
// これで $ary = [{"A":"aaa","B":"bbb","C":"ccc","D":"ddd","E":"eee"}] の”[ ]”がとれます。
//なので、$ary = {"A":"aaa","B":"bbb","C":"ccc","D":"ddd","E":"eee"}になって、jsonのレイヤー[0]がひとつ取れてあとでキーが取り出せます。
***************************************************************
//[Javascript & DOJO]
require(["dojo/request",
"dojo/store/Memory",
"dojo/parser",
"dijit/form/RadioButton",
"dojo/domReady!"],
function(request, Memory, Parser, RadioButton, dom){
request.post("jasondata(上のPHP).php", {
handleAs: "json",
data: {
sendfrom : "table",
}
}).then(function(back_data(上のphpからのもどりデータ)){
//back_data = {"A":"aaa","B":"bbb","C":"ccc","D":"ddd","E":"eee"}
var aryElement = []; // ここに新しくキーのみの配列を挿入します。
for(i in back_data){
var key = i;
var val = back_data[i];
aryElement.push(key);
// ここで $aryKey = ["A","B","C","D","E"]となってのちに、それぞれに＜FORM＞を作成、そのつど後でやってくる「json_data」の数だけラジオボタンを自動生成させていきます。
console.log(key+":"+val);// よーく、確認しましょう！
}
request.post("json_data(ラジオボタンの種類が入ってるリファレンスデータ).php", {
handleAs: "json",
data: {
sendfrom : "table",
}
}).then(function(jsonradio){
// さぁ、ここから、「json_data」で自動的に呼び出した数だけのラジオボタンをそれぞれの行に挿入していきます。
//まずは行作成。キーの数だけ行が欲しいんですよね。$aryElement = ["A","B","C","D","E"]
//一番外のループはキーの数だけ回ります。
for (var i=0;i<aryElement.length;i++){
var vString = String(aryElement[i]);
eval("var vRdoBtn"+vString+";");
eval("var vTxt"+vString+";");
//次にそれぞれのボタンのダミー変数作成。
//二番目のループはラジオボタンの数だけ回ります。でも、ダミーなんで、一応終わらせます。
for (var vI=0;vI<jsonradio.length;vI++){
eval("var rdoBtn"+vString+vI+";");
eval("var txt"+vString+vI+";");
}
//後から呼びだされるファンクションです。ここで一応どんなボタンにもともとの値があるか確認してそれぞれに「checked」の値を受け渡します。もちろん、「back_data」の値ですね。
function fncGetOrg(vI){
if (back_data[vString] === String(vI)){
document.getElementById("Txt"+vString).innerHTML = ""+String(vI)+" = "+jsonradio[vI].Konovalue+"";
return true;
}else{
return false;
}
}
//ここから実際のdijit.form.RadioButtonを作成。
//三番目のループですが、ラジオボタンの数だけ回り、DOJOのウィジットを作っていきます。
for (var vI=0;vI<jsonradio.length;vI++){
vRdoBtn = eval("rdoBtn"+vString+vI+"");
var vRdoBtn = new RadioButton({
id:vRdoBtn,
value: String(vI),
checked: fncGetOrg(vI) ,//ここですよーぉ！ここで上のファンクションにいってvalueとcheckedの確認をさせます。戻り値はそのままつかいましょう。
name: "B_rdo"+vString+"",
onClick: function(evt){
//こうすることでクリックされたときに「Konovalue（jsonradioのリファレンスから）」が確実に選ばれてそれぞれのHTMLのセルに入ることになります。HTMLはこの後に書いときます。
document.getElementById("Txt"+evt.currentTarget.name.substring(5)).innerHTML = ""+jsonradio[evt.currentTarget.value].Konovalue+"";
}
});
vRdoBtn.startup();
var nodeLabel = document.createElement("label");
// CSSだってセットできちゃう。
nodeLabel.id = "cssLabel";
//ここはなぜか苦労した。。。「jsonradio」のvalueをそれぞれのボタンのラベルにします。
var vTxt = dojo.doc.createTextNode(String(vI));
vRdoBtn.placeAt(document.getElementById("FORM"+vString+""));
nodeLabel.appendChild(vTxt);
document.getElementById("FORM"+vString+"").appendChild(nodeLabel);
}
});
***************************************************************
//[HTML]
＜table＞
＜tr＞
＜td＞A＜/td＞
＜td＞＜div＞＜form id="FORMA"＞＜/form＞＜/div＞＜/td＞
＜td＞＜div id="TxtA"＞＜/div＞＜/td＞
＜/tr＞
＜tr＞
＜td＞B＜/td＞
＜td＞＜div＞＜form id="FORMB"＞＜/form＞＜/div＞＜/td＞
＜td＞＜div id="TxtB"＞＜/div＞＜/td＞
＜/tr＞
＜tr＞
＜td＞C＜/td＞
＜td＞＜div＞＜form id="FORMC"＞＜/form＞＜/div＞＜/td＞
＜td＞＜div id="TxtC"＞＜/div＞＜/td＞
＜/tr＞
＜tr＞
＜td＞D＜/td＞
＜td＞＜div＞＜form id="FORMD"＞＜/form＞＜/div＞＜/td＞
＜td＞＜div id="TxtD"＞＜/div＞＜/td＞
＜/tr＞
＜tr＞
＜td＞E＜/td＞
＜td＞＜div＞＜form id="FORME"＞＜/form＞＜/div＞＜/td＞
＜td＞＜div id="TxtE"＞＜/div＞＜/td＞
＜/tr＞
＜/table＞
ってなわけで、さぁ、仕事に戻ろう。。。
このままコピペしてもうごきませんので、あしからずデータをご準備ください。デバッグも忘れずに。
ねこでしたぁ～！