मैं तुम्हें दिलचस्प सवाल है, लेकिन इस सवाल का जवाब इतना आसान नहीं है। समस्या यह है कि कॉलम मान खोजने के लिए jqGrid कुछ स्थानों पर colModel
कॉलम की अनुक्रमणिका का उपयोग करता है। इसलिए यदि कोई ग्रिड की प्रत्येक पंक्ति के अंदर <td>
तत्वों को स्थानांतरित करता है तो आपके पास ग्रिड में प्रदर्शित प्रदर्शित होगा, लेकिन ग्रिड संपादन योग्य नहीं होगा। ग्रिड के साथ कोई संपादन मोड काम नहीं करेगा।
अगला समस्या। आपके उदाहरण में आपने चेकबॉक्स के साथ सेल प्राप्त करने के लिए 'td:first'
का उपयोग किया था। rownumbers: true
विकल्प के उपयोग के मामले में यह गलत होगा। मामले में चेकबॉक्स दूसरे में होगा और पहले कॉलम में नहीं होगा।
colModel
के साथ एक साथ स्तंभों को पुन: व्यवस्थित करने के लिए आप the demo पर देखने remapColumns
की तरह विधि
$("#list").jqGrid('remapColumns', [0,2,3,4,...,1], true, false);
यह का उपयोग किया जाएगा सबसे अच्छा तरीका है जो इस का उपयोग आप है कि सब कुछ पहली बार में सही है देखेंगे, लेकिन पृष्ठ को बदलने के बाद, ग्रिड को कॉलम या किसी अन्य रीफ्रेशिंग को सॉर्ट करना ग्रिड गलत हो जाएगा। समस्या का कारण यह है कि jqGrid का वर्तमान कोड केवल तभी काम करता है जब मल्टीइलेक्ट-चेकबॉक्स वाले कॉलम पहले ग्रिड कॉलम में से एक है। उदाहरण के लिए the code fragment को देखो:
refreshIndex = function() {
...
ni = ts.p.rownumbers===true ? 1 :0,
gi = ts.p.multiselect ===true ? 1 :0,
si = ts.p.subGrid===true ? 1 :0;
...
idname = ts.p.colModel[ts.p.keyIndex+gi+si+ni].name;
...
}
colModel
सरणी के सूचकांक में उपयोग gi+si+ni
colModel
की पुनर्व्यवस्था के बाद काम नहीं करेगा। addXmlData
, addJSONData
, grid.base.js
की addRowData
के अंदर कोड के अन्य स्थानों रहे हैं। इसलिए मल्टीइलेक्स्ट-चेकबॉक्स का पूरा समर्थन पाने के लिए सभी को सभी कार्यों में बदलाव करना होगा।
आप की जरूरत है केवल संपादन मैं तुम्हें समाधान जो अच्छा काम करने के लिए लग रहा है कर सकते हैं सुझाव के बिना ग्रिड में डेटा प्रदर्शित करते हैं। the demo देखें। किसी भी कोड को पोस्ट करने से पहले मैं आपको बताता हूं कि कोड में क्या किया जाना चाहिए।
ग्रिड के शरीर हमेशा एक छिपा पंक्ति (tr.jqgfirstrow
) जो स्तंभ चौड़ाई सेट करने के लिए उपयोग किया जाएगा है। पंक्तियों में कॉलम में ऑर्डर को पर एक बार बदलना चाहिए। इसके अतिरिक्त एक (the searching toolbar यदि वह मौजूद सहित) और कॉलम हेडर के कॉलम के क्रम पाद लेख (सारांश) पंक्ति यदि कोई मौजूद बदलना होगा।
ग्रिड निकाय की सभी अन्य पंक्तियां प्रत्येक ग्रिड रीफ्रेशिंग पर दर्ज की जानी चाहिए। इसलिए इसे loadComplete
या gridComplete
ईवेंट हैंडलर के अंदर करना चाहिए। समारोह getColumnIndexByName
var getColumnIndexByName = function ($grid, columnName) {
var colModel = $grid.jqGrid('getGridParam', 'colModel'), i = 0,
cmLength = colModel.length;
for (; i < cmLength; i += 1) {
if (colModel[i].name === columnName) {
return i;
}
}
return -1;
};
चेक बॉक्स के साथ स्तंभ 'सीबी' के सूचकांक प्राप्त करने के लिए इस्तेमाल किया जा सकता।
तालिका के अंदर स्तंभ ले जाने के लिए मैं निम्नलिखित समारोह
var moveTableColumn = function (rows, iCol, className) {
var rowsCount = rows.length, iRow, row, $row;
for (iRow = 0; iRow < rowsCount; iRow += 1) {
row = rows[iRow];
$row = $(row);
if (!className || $row.hasClass(className)) {
$row.append(row.cells[iCol]);
}
}
};
जो या तो तालिका की सभी पंक्तियों या केवल पंक्तियों विशिष्ट वर्ग के होने के सभी स्तंभों स्थानांतरित कर सकते हैं इस्तेमाल किया। "Jqgfirstrow" वर्ग वाली पंक्ति को एक बार स्थानांतरित किया जाना चाहिए और "gqgrow" वर्ग वाली अन्य पंक्तियों को प्रत्येक ग्रिड रीफ्रेशिंग पर स्थानांतरित किया जाना चाहिए। तो the demo से पूर्ण कोड
var $htable, $ftable, iCheckbox, $myGrid = $("#list");
$myGrid.jqGrid({
... // jqGrid definition
loadComplete: function() {
if (typeof(iCheckbox) === "undefined") {
iCheckbox = getColumnIndexByName($(this), 'cb');
}
if (iCheckbox >= 0) {
// first we need to place checkboxes from the table body on the last place
moveTableColumn(this.rows, iCheckbox, "jqgrow");
}
}
});
// if we has not local grid the iCheckbox variable can still uninitialized
if (typeof(iCheckbox) === "undefined") {
iCheckbox = getColumnIndexByName($myGrid, 'cb');
}
// move column with chechboxes in all rows of the header tables
$htable = $($myGrid[0].grid.hDiv).find("table.ui-jqgrid-htable");
if ($htable.length > 0) {
moveTableColumn($htable[0].rows, iCheckbox);
}
// move column with chechboxes in footer (summary)
$ftable = $($myGrid[0].grid.sDiv).find("table.ui-jqgrid-ftable");
if ($ftable.length > 0) {
moveTableColumn($ftable[0].rows, iCheckbox);
}
// move column with chechboxes in footer in the first hidden column of grid
moveTableColumn($myGrid[0].rows, iCheckbox, "jqgfirstrow");
कोड का उपयोग मैं कुछ अन्य वर्गों और आंतरिक ग्रिड संरचनाओं उदाहरण here के लिए समझाया में हो जाएगा। Another answer अतिरिक्त जानकारी दे सकता है।
मैं गलत हो सकता हूं, लेकिन आप '$ (tr) .append ($ (td)) करने का प्रयास कर सकते हैं। आपको टीडी क्लोन करने की ज़रूरत नहीं है - जब आप '.append()' इसे एक नई जगह पर ले जाते हैं तो इसे स्थानांतरित किया जाता है। – Oliver
@Sanchitos - http://stackoverflow.com/questions/7849786/how-to-move-a-first-td-to-last-in-a-tr/7860415#7860415 सथ्य – sathya