मुझे jqgrid सेल में स्पार्कलाइन ग्राफ़ रेंडरिंग प्राप्त करने का उचित तरीका समझने में परेशानी हो रही है और मेरे जीवन के लिए कहीं भी कोई प्रासंगिक नमूना नहीं मिल सकता है।
वैसे भी, कुछ शोध के बाद मैंने फैसला किया कि स्पार्कलाइन ग्राफ को बाद में रोइन्सर्ट पर सेल में इंजेक्ट करने का प्रयास किया गया था। दुर्भाग्य से मैं इसे गलत कर रहा हूँ। यहाँ मैं क्या कर रहा हूँ:
afterInsertRow: function(rowid, rowdata, rowelem) {
var cell = jQuery("#datapointlist").getCell(rowid, "Graph");
$(cell).sparkline([1,34,3,2,1])
},
सम्मिलन पर सेल की सामग्री है"लोड हो रहा है" और घटना के बाद यह अपरिवर्तित रहता है। मुझे वास्तव में यह भी यकीन नहीं है कि यह काम करने का प्रयास करने का यह सबसे अच्छा तरीका है, इसलिए अगर कोई मेरी मदद कर सकता है तो इसकी बहुत सराहना की जाएगी।
उत्तर:
उत्तर № 1 के लिए 7मैंने इसके बारे में पहले नहीं सुना jQuery स्पार्कलाइन, लेकिन इंटरनेट में सरल खोज इसका उत्तर देती है। मुझे ऐसा लगता है कि प्लगइन का उपयोग बहुत आसान है।
पहली समस्या यह है कि हमें डेटा कहां से मिलेगा जिसे हम स्पार्कलाइन के रूप में दिखाएंगे। मैंने सरणी को इस तरह रखा [1,34,3,2,1] जिसका उपयोग हम कॉलम में एक स्ट्रिंग के रूप में स्पार्कलाइन को इनिशियलाइज़ करने के लिए करेंगे जिसमें अंत में लाइनें होंगी। तो मैंने रखा "[1,34,3,2,1]" संबंधित सेल में। फिर अंदर loadComplete मुझे लगता है कि सेल के संबंध में इसे सरणी में परिवर्तित कर दिया गया है jQuery.parseJSON और कॉल करें sparkline. परिणामस्वरूप मुझे निम्नलिखित ग्रिड प्राप्त हुआ:
आप ग्रिड को लाइव देख सकते हैं यहाँ.
नीचे आप वह कोड पा सकते हैं जिसका मैंने उपयोग किया था:
var mydata = [
{id:"1", invdate:"2007-10-01",name:"Microsoft" , sl:"[10,8,5,7,4,4,1]"},
{id:"2", invdate:"2007-10-02",name:"Google", sl:"[1,34,3,2,1]"},
{id:"3", invdate:"2007-09-01",name:"IBM", sl:"[10,8,5,7,4,4,1]"},
{id:"4", invdate:"2007-10-04",name:"Baidu", sl:"[1,34,3,2,1]"},
{id:"5", invdate:"2007-10-31",name:"Apple", sl:"[10,8,5,7,4,4,1]"},
{id:"6", invdate:"2007-09-06",name:"Amazon.com", sl:"[1,34,3,2,1]"},
{id:"7", invdate:"2007-10-04",name:"Nvidia", sl:"[10,8,5,7,4,4,1]"},
{id:"8", invdate:"2007-10-03",name:"Ebay", sl:"[1,34,3,2,1]"},
{id:"9", invdate:"2007-09-01",name:"Adobe", sl:"[10,8,5,7,4,4,1]"},
{id:"10",invdate:"2007-09-08",name:"Yahoo",sl:"[1,34,3,2,1]"},
{id:"11",invdate:"2007-09-08",name:"BMW",sl:"[1,34,3,2,1]"},
{id:"12",invdate:"2007-09-10",name:"Mercedes",sl:"[10,8,5,7,4,4,1]"}
],
grid = $("#list"),
getColumnIndexByName = function(columnName) {
var cm = grid.jqGrid("getGridParam","colModel");
for (var i=0,l=cm.length; i<l; i++) {
if (cm[i].name===columnName) {
return i; // return the index
}
}
return -1;
};
grid.jqGrid({
datatype:"local",
data: mydata,
colNames:["Inv No","Date","Share",""],
colModel:[
{name:"id",index:"id",width:70,align:"center",sorttype: "int"},
{name:"invdate",index:"invdate",width:100, align:"center", sorttype:"date",
formatter:"date", formatoptions: {newformat:"d-M-Y"}, datefmt: "d-M-Y"},
{name:"name",index:"name", width:200},
{name:"sl",index:"sl",width:50,align:"center",sortable:false}
],
rowNum:10,
rowList:[5,10,20],
pager: "#pager",
gridview:true,
rownumbers:true,
sortname: "invdate",
viewrecords: true,
sortorder: "desc",
caption:"Example of usage of jQuery Sparklines",
height: "100%",
loadComplete: function () {
var index = getColumnIndexByName("sl");
$("tr.jqgrow td:nth-child("+(index+1)+")").each(function(index, value) {
var ar;
try {
ar = $.parseJSON($(this).text());
if (ar && ar.length>0) {
$(this).sparkline(ar);
}
} catch(e) {}
});
}
});