एक टीआर

Question

मैं एक jqgrid है में पिछले, multicheck की स्थापना मैं पहले कॉलम पर चेकबॉक्स हो रही है पर पहली बार एक टीडी ले जाने के लिए कैसे, मैं उस चेकबॉक्स स्तंभ अंतिम स्तंभ होना चाहता हूँ।

मुझे इस पर कोई विकल्प नहीं मिला, इसलिए मैं tr के पहले td को अंतिम स्थान पर ले जाने के लिए एक कस्टम jquery विधि लिख रहा हूं।

मैं का उपयोग कर

loadcomplete:function{ 
    var row = $(".cbox"); 
    for (var i = 0; i < row.length; i++) { 
     var tr = $(row[i]).parent().parent().parent(); 
     var td = $(row[i]).parent().parent(); 
     var newtd = $(td).clone(true); 
     $(tr).append($(newtd)); 
     $(tr).remove($(td)); // i am getting exception here 
    } 
} 

कृपया मदद की कोशिश कर रहा हूँ।

Answer 1

किसी भी कारण है कि कि इतने जटिल है? यह यह करना चाहिए:

$('tr').each(function(){ 
    $('td:first',this).remove().insertAfter($('td:last',this)); 
}); 

लाइव उदाहरण: http://jsfiddle.net/QEuxN/1/

Answer 2

मैं तुम्हें दिलचस्प सवाल है, लेकिन इस सवाल का जवाब इतना आसान नहीं है। समस्या यह है कि कॉलम मान खोजने के लिए 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+nicolModel की पुनर्व्यवस्था के बाद काम नहीं करेगा। 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 अतिरिक्त जानकारी दे सकता है।