/ / तालिका ए - जेसन, वसंत-एमवीसी, डोजो, वसंत-रू, dojox.grid.datagrid पर क्लिक की गई पंक्ति के आधार पर एक तालिका बी को पॉप्युलेट करें

तालिका ए - जेसन, वसंत-एमवीसी, डोजो, वसंत-रू, dojox.grid.datagrid पर क्लिक की गई पंक्ति के आधार पर एक तालिका बी को पॉप्युलेट करें

मेरे पास एक सारणी है कि ए डोजो और मैं से बना हैएक और populate करने की जरूरत है टेबल बी फिर से डोजो का उपयोग कर। यहां मुझे तालिका ए की पंक्ति पर क्लिक करने की आवश्यकता है और उस पंक्ति के आधार पर मुझे अपने वसंत नियंत्रक को कॉल करने की आवश्यकता है साथ ही मैं पंक्ति आईडी या पंक्ति के कुछ मूल्य नियंत्रक को भेज दूंगा और नियंत्रक, मुझे एक मॉडल के जेसन डेटा को वापस करना चाहिए जो मुझे चाहिए टेबल बी के रूप में ऐसा करने के लिए डोजो लौटने के लिए।

नीचे नीचे मैं आपको दिखाता हूं कि मेरे पास क्या है।

एक टेबल को पॉप्युलेट करने के लिए बटन जो मुझे मिला Google खोज में।

<button data-dojo-type="dijit/form/Button" type="button" id="goBtn"  disabled="disabled" >GO
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">

populateTable();
</script>

यह टेबल ए है जो बटन क्लिक पर आबादी वाला है

<div style="width: 800px; height: 200px;">
<div data-dojo-type="dojo/store/Memory" data-dojo-props="data:storeDataForTableA, idProperty:"tableAid"" data-dojo-id="tableADateStore">
</div>

<!-- Create the model bridging the store and the Tree -->
<div data-dojo-type="dojo/data/ObjectStore" data-dojo-id="tableADateStoreForGrid"
data-dojo-props="objectStore: tableADateStore"></div>

<div id="grid"
data-dojo-type="dojox/grid/DataGrid"
data-dojo-props="store:tableADateStoreForGrid,
structure:"layoutGridForTableA",
queryOptions:{deep:true},
query:{},
onRowClick: function(e) {
populateTableB();
},
rowsPerPage:5">
</div>
</div>

यह तालिका बी जिसे ऊपर तालिका के पंक्ति क्लिक पर पॉप्युलेट किया जाना है, वह तालिका ए है

<div style="width: 800px; height: 200px;" class="left-div">
<div data-dojo-type="dojo/store/Memory" data-dojo-props="data:storeDataForTableB, idProperty:"tableBid"" data-dojo-id="tableBDateStore">
</div>
<!-- Create the model bridging the store and the Tree -->
<div data-dojo-type="dojo/data/ObjectStore" data-dojo-id="tableBDateStoreForGrid"
data-dojo-props="objectStore: tableBDateStore"></div>

<div id="dateGrid"
data-dojo-type="dojox/grid/DataGrid"
data-dojo-props="store:tableBDateStoreForGrid,
structure:"layoutGridForTableB",
queryOptions:{deep:true},
query:{},
rowsPerPage:5">
</div>
</div>

और नीचे इस्तेमाल किया डोजो स्क्रिप्ट है

<script>

require(["dojo/parser", "dijit/form/FilteringSelect", "dijit/form/Button", "dojox/data/HtmlTableStore", "dojox/grid/DataGrid"]);
require(["dojo/store/Memory", "dojo/data/ObjectStore", "dojox/grid/DataGrid", "dojo/_base/lang", "dojox/grid/DataGrid",
"dojo/data/ItemFileWriteStore", "dojox/grid/cells/dijit", "dojox/grid/cells/CheckBox", "dojo/dom", "dojo/domReady!"], function () {


layoutGridForTableA = [[
{ field: "nm", name: "Name", width: "auto" },
{ field: "Cod", name: "Code", width: "auto" },
{ field: "startDt", name: "Start Date", width: "auto" },
{ field: "endDt", name: "End Date", width: "auto" }
]];


layoutGridForTableB = [[
{ field: "day", name: "Day", width: "auto" },
{ field: "description", name: "Description", width: "auto" },
{ field: "event", name: "Event", width: "auto" },
{ field: "checkBoxTest", name: "Check Box Test", width: "auto", editable: true, type: dojox.grid.cells.Bool, formatter:formatCell, styles: "text-align: center;" },
{ field: "", name: "", width: "auto", formatter:editButton}

]];

storeDataForTableA = [];
storeDataForTableB = [];

var formatCell = function(){

var checked = val? "checked="checked";" : "<input type="checbox"" +checked+"disabled="disabled"/>";

return checked;

};


function editButton(){
return "<button onclick="" class="editbuttonicon"></button>";

}



});

function populateTableA(){

var addItemToTableA = { name:"Steve", Cod:"007", startDt:"any date", endDt:"any date"};
for (var i=0;i<4;i++)
{
tableADateStoreForGrid.newItem(addItemToTableA );
}
}

function populateTableB(){

var addItemToTableA = { name:"Steve", Cod:"007", startDt:"any date", endDt:"any date"};
for (var i=0;i<4;i++)
{
tableBDateStoreForGrid.newItem(addItemToTableA );
}
}

</script>

उपर्युक्त लिपि में कोई भी ढूंढ सकता है कि मैंने नहीं कियातालिका बी को पॉप्युलेट किया क्योंकि यहां लिखने में समस्या है। मुझे इंटरनेट में कुछ स्क्रिप्ट मिली है जो JSON डेटा भेजने और प्राप्त करने के लिए AJAX अनुरोध करता है। लेकिन यूआरएल के लिए कोई स्पष्टीकरण नहीं है। मैंने उसी नाम की कोशिश की जो अनुरोध में मैप किया गया है। लेकिन इसने अनुरोध नहीं किया। मैं उस स्क्रिप्ट को मिटा दूंगा जिसका मैंने उपयोग किया था।

      dojo.ready(function(){
dojo.xhrGet({
url  : "populateFromSpring",
handleAs: "json",
load: function(Beans) {
//I need to get the Beans object here and populate the Table B
alert("hi");
},
error: function(err) {
alert("err: "+err);
}
});
});

मैंने इस लूप के बजाय फ़ंक्शन populateTableB की कोशिश की, जो स्क्रिप्ट के अंदर है, कोई इसे देख सकता है।

नीचे मैं आपको वसंत नियंत्रक देता हूं

import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;


import com.model.TableBBean;
@Controller
@RequestMapping("/populateFromSpring")
public class PopulateFromSpringCtrl {

@RequestMapping(method = RequestMethod.POST)
public @ResponseBody List<TableBBean> tableBmth(@RequestParam String name) {

//            ModelAndView mv = new ModelAndView("loginsuccess");

List<TableBBean> Beans = new ArrayList<TableBBean>();

TableBBean B1 = new TableBBean();

B1.setDay(1);
B1.setDescription("Desc 1");
B1.setEvent("GS");
B1.setCheckBox("0");


TableBBean B2 = new TableBBean();

B2.setDay(2);
B2.setDescription("Desc 2");
B2.setEvent("GS");
B2.setCheckBox("1");


TableBBean B3 = new TableBBean();

B3.setDay(3);
B3.setDescription("Desc 3");
B3.setEvent("GS");
B3.setCheckBox("1");


Beans.add(B1);
Beans.add(B2);
Beans.add(B3);


//mv.addObject("Beans",Beans);
return Beans;
}

}

मुझे पता है कि यह नियंत्रक पूरी तरह से पूरा नहीं हुआ है और मुझे इस नियंत्रक को पूरा करने और बीन को जेएसओएन में बदलने में मदद की ज़रूरत है।

तो चीजें जो मुझे चाहिए वह है

डोजो को इस नियंत्रक को कॉल करना चाहिए और उदाहरण आईडी के लिए कुछ डेटा कहना चाहिए तालिका ए की पंक्ति के लिए, फिर इसे जेएसओएन के रूप में डेटा वापस लेना चाहिए और तालिका बी को पॉप्युलेट करें

उत्तर:

जवाब के लिए 0 № 1

स्प्रिंग एमवीसी में जेएसओएन वापस करने के लिए, सुनिश्चित करें कि आपके पास जैक्सन पुस्तकालय हैं और कुछ ऐसा करें:

@RequestMapping("myHandler")
public @ResponseBody MyBean myHandlerToGetBean() {
// Do some stuff...
return myBean;  // return instance of MyBean
}

वसंत वस्तु वापस लौटाएगी, MyBean, और जैक्सन का उपयोग कर ऑटो जादुई रूप से इसे परिवर्तित करें। आप जैक्सन एनोटेशन का उपयोग कैसे कर सकते हैं इस पर कुछ नियंत्रण की सुविधा के लिए कर सकते हैं MyBean अगर आपको कुछ भी फैंसी की ज़रूरत नहीं है तो धारावाहिक / मार्शल हो जाता है। अगर आपको कुछ ऐसी चीज चाहिए जो अधिक नियंत्रण देती है, तो आप अपना लौटा सकते हैं MyBean सीधे, और इसके बजाय एक स्ट्रिंग वापस करें और जैक्सन कस्टम serializer का उपयोग करें। आप अपना सेट भी कर सकते हैं Content-Type यह इंगित करने के लिए कि आप JSON लौट रहे हैं।

अपने ग्राहक पक्ष पर, आप कुछ ऐसा उपयोग कर सकते हैंjQuery, या जो कुछ भी, आपकी सेवा में AJAX कॉल करने के लिए, और सीधे जावास्क्रिप्ट में रिटर्न ऑब्जेक्ट का उपयोग करें (ब्राउज़र को JSON को जावास्क्रिप्ट ऑब्जेक्ट में फिर से चालू करना चाहिए, फिर से "ऑटो-जादुई)। आप इसके साथ क्या करते हैं आपका कार्यान्वयन, लेकिन ऐसा प्रतीत होता है कि आप अपनी तालिका या कुछ के डीओएम को संशोधित करना चाहते हैं। आप किसी भी प्रकार की टेबल प्लगइन पर भी मुकदमा कर सकते हैं, और यदि ऐसा है तो आपको यह देखने के लिए दस्तावेज को पढ़ने की आवश्यकता होगी कि JSON को वास्तव में कौन सा प्रारूप चाहिए अंदर रहें और अपडेट कैसे करें।