यह जिसके बारे में आप अपने प्रश्न में लिखा एक्सेल का एक दिलचस्प सुविधा है। मुझे पहले इसके बारे में पता नहीं है।
आपको custom formater फ़ंक्शन को लागू करने की आवश्यकता है। सामान्य में बहुत आसान है। आपको एक छोटा सा फ़ंक्शन लिखना चाहिए जो सेल को मूल्य (रंग बार पर टेक्स्ट) के आधार पर प्रदर्शित करता है। इसके अलावा आपको Unformatting custom function भी परिभाषित करना चाहिए जो आपके मामले में बहुत आसान होगा। अनौपचारिक फ़ंक्शन का उपयोग सॉर्टिंग और अन्य jqGrid ऑपरेशन के दौरान किया जा सकता है जहां किसी को ग्रिड सेल से मूल्य प्राप्त करने की आवश्यकता होती है।
तो आपकी समस्या को रंग बार पर संख्या प्रदर्शित करने के लिए कम किया जा सकता है।
अद्यतन: हालांकि मैं आपके प्रश्न के बारे में बार-बार हूं क्योंकि मुझे लगता है कि संख्याओं के निर्माण के लिए रंगों का उपयोग वास्तव में सहायक हो सकता है। तो मैं कुछ समय बिताने और इसी कोड उदाहरण जो निम्न परिणाम
उत्पादन और जीने here देखा जा सकता है बनाया।
कोड पर छोटी टिप्पणियां।
.cellDiv
{
left: 0px; top:5px; height:22px;
position:relative;padding:0;margin-right:-4px;border:0;
}
.cellTextRight
{
position:relative;
margin-right:4px;
text-align:right;
float:right;
}
.gradient1{
/* fallback (Opera) */
background: #008AEF;
/* Mozilla: https://developer.mozilla.org/en/CSS/-moz-linear-gradient */
background: -moz-linear-gradient(left, #008AEF, white);
/* Chrome, Safari: http://webkit.org/blog/175/introducing-css-gradients/ */
background: -webkit-gradient(linear, left top, right top, from(#008AEF), to(white));
/* MSIE http://msdn.microsoft.com/en-us/library/ms532997(VS.85).aspx */
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#008AEF', EndColorStr='white', GradientType=1);
/*ie8*/
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#008AEF', EndColorStr='white', GradientType=1)";
position: absolute; left: -2px; top:-5px; right: 2px; height:22px; float:left;
}
.gradient2{
background: #63C384;
background: -moz-linear-gradient(left, #63C384 0%, white 100%);
background: -webkit-gradient(linear, left top, right top, from(#63C384), to(white));
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#63C384', EndColorStr='white', GradientType=1);
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#63C384', EndColorStr='white', GradientType=1)";
position: absolute; left: -2px; top:-5px; right: 2px; height:22px; float:left;
}
और jqGrid: मैं कुछ सीएसएस वर्ग है जो ओपेरा को छोड़कर किसी भी वर्तमान ब्राउज़रों में ढाल बार जहां ग्रिड
सीएसएस वर्ग के रूप में देखा जाता है निम्नलिखित के रूप में परिभाषित कर रहे हैं उत्पादन बनाने के लिए किया था $(document).ready(function() {/*code*/}); के अंदर कोड:
var grid = $("#list");
var gradientNumberFormat = function (cellvalue, gradientClass, minDataValue,
maxDataValue, minDisplayValue, maxDisplayValue) {
var dataAsNumber = parseFloat(cellvalue); /* parseInt(cellvalue, 10);*/
if (dataAsNumber > maxDataValue) {
dataAsNumber = maxDataValue;
}
if (dataAsNumber < minDataValue) {
dataAsNumber = minDataValue;
}
var prozentVal = minDisplayValue+(dataAsNumber-minDataValue)*(maxDisplayValue-
minDisplayValue)/(maxDataValue-minDataValue);
return '<div class="cellDiv"><div class="'+gradientClass+'" style="width:'+
prozentVal+'%;"></div><div class="cellTextRight">'+cellvalue +
'</div></div>';
};
var mydata = [
{ id: "1", invdate: "2007-10-01", name: "test", note: "note",
amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "2", invdate: "2007-10-02", name: "test2", note: "note2",
amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "3", invdate: "2007-09-01", name: "test3", note: "note3",
amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "4", invdate: "2007-10-04", name: "test", note: "note",
amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "5", invdate: "2007-10-05", name: "test2", note: "note2",
amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "6", invdate: "2007-09-06", name: "test3", note: "note3",
amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "7", invdate: "2007-10-04", name: "test", note: "note",
amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "8", invdate: "2007-10-03", name: "test2", note: "note2",
amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "9", invdate: "2007-09-01", name: "test3", note: "note3",
amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "10", invdate: "2007-10-01", name: "test", note: "note",
amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "11", invdate: "2007-10-02", name: "test2", note: "note2",
amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "12", invdate: "2007-09-01", name: "test3", note: "note3",
amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "13", invdate: "2007-10-04", name: "test", note: "note",
amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "14", invdate: "2007-10-05", name: "test2", note: "note2",
amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "15", invdate: "2007-09-06", name: "test3", note: "note3",
amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "16", invdate: "2007-10-04", name: "test", note: "note",
amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "17", invdate: "2007-10-03", name: "test2", note: "note2",
amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "18", invdate: "2007-09-01", name: "test3", note: "note3",
amount: "400.00", tax: "30.00", total: "430.00" }
];
grid.jqGrid({
data: mydata,
datatype: "local",
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
colModel: [
{ name:'id', index:'id', key:true, width:70, align:"right", sorttype:"int",
formatter: function (cellvalue) {
// the number 1 will be mapped to no color bar
// the number 18 will be mapped to the color bar with 100% filled
return gradientNumberFormat(cellvalue, "gradient1", 1, 18, 0, 100);
}
},
{ name:'invdate', index:'invdate', width:90, sorttype:"date" },
{ name:'name', index:'name', width:100 },
{ name:'amount', index:'amount', width:80, align:"right", sorttype:"float",
formatter: function (cellvalue) {
// the number 200 will be mapped to the 10% filled color bar
// the number 400 will be mapped to the 90% filled color bar
return gradientNumberFormat(cellvalue,"gradient2",200,400,10,90);
}
},
{ name:'tax', index:'tax', width:80, align:"right", sorttype:"float" },
{ name:'total', index:'total', width:80, align:"right", sorttype:"float" },
{ name:'note', index:'note', width:150, sortable:false }
],
pager: '#pager',
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'id',
sortorder: 'desc',
viewrecords: true,
height: "100%",
caption: "Numbers with gradient color"
});
grid.jqGrid('navGrid', '#pager',
{ add:false, edit:false, del:false, search:false, refresh:true });
UPDATED: डेमो का वास्तविक संस्करण here है।
धन्यवाद, यह सहायक है। मैं अभी भी अनिश्चित हूं हालांकि डेटा बार उत्पन्न करने के लिए वास्तव में स्वरूपण फ़ंक्शन क्या करेगा। –
@ एम। साइफर: शायद मैं थोड़ी देर बाद आपके लिए डेमो उदाहरण तैयार करूंगा। – Oleg
@ एम। साइफर: मेरे पास आपके लिए नया नया है। मेरे अद्यतन उत्तर को देखो। – Oleg