làm thế nào để di chuyển một td đầu tiên cuối cùng trong một tr

Question

Tôi có một jqgrid, trên thiết lập multicheck Tôi nhận được hộp kiểm trên cột đầu tiên, tôi muốn cột hộp kiểm đó là cột cuối cùng.

Tôi không tìm thấy tùy chọn, vì vậy tôi đang viết phương pháp jquery tùy chỉnh để di chuyển td đầu tiên của số tr để kết thúc.

tôi thử sử dụng

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 
    } 
} 

Xin vui lòng giúp.

Answer 1

Bất kỳ lý do nào khiến việc này phức tạp đến vậy? Điều này sẽ làm điều đó:

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

Sống dụ: http://jsfiddle.net/QEuxN/1/

Answer 2

tôi tìm thấy bạn câu hỏi thú vị, nhưng câu trả lời là không dễ dàng như vậy. Vấn đề là jqGrid sử dụng chỉ mục của cột colModel ở một số nơi để tìm giá trị cột. Vì vậy, nếu chỉ di chuyển các phần tử <td> bên trong mỗi hàng của lưới, bạn sẽ có thông tin chính xác được hiển thị trong lưới, nhưng lưới sẽ là không thể chỉnh sửa. Không có chế độ chỉnh sửa nào hoạt động với lưới.

Sự cố tiếp theo. Trong ví dụ của bạn, bạn đã sử dụng 'td:first' để lấy ô bằng hộp kiểm. Nó sẽ sai trong trường hợp sử dụng tùy chọn rownumbers: true. Trong trường hợp, hộp kiểm sẽ nằm trong cột thứ hai và không phải là cột đầu tiên.

Cách tốt nhất để sắp xếp lại các cột cùng với colModel sẽ là sử dụng remapColumns phương pháp như

$("#list").jqGrid('remapColumns', [0,2,3,4,...,1], true, false); 

Nó bạn nhìn vào the demo mà sử dụng này, bạn sẽ thấy rằng tất cả mọi thứ là chính xác vào thời điểm đầu tiên, nhưng sau khi thay đổi trang, sắp xếp một cột hoặc bất kỳ việc làm mới nào khác của lưới, lưới sẽ bị điền sai. Lý do của vấn đề là mã hiện tại của jqGrid chỉ hoạt động nếu cột có nhiều hộp kiểm chọn là một từ các cột lưới đầu tiên. Nhìn vào the code fragment ví dụ:

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; 
    ... 
} 

Việc sử dụng gi+si+ni trong chỉ mục của mảng colModel sẽ không hoạt động sau khi sắp xếp lại của colModel. Có các địa điểm mã khác bên trong số addXmlData, addJSONData, addRowData trong số grid.base.js. Vì vậy, để có hỗ trợ đầy đủ của các hộp kiểm nhiều lựa chọn, người ta phải thực hiện thay đổi trong tất cả các chức năng.

Nếu bạn cần chỉ hiển thị dữ liệu trong lưới mà không cần chỉnh sửa Tôi có thể đề xuất giải pháp của bạn có vẻ hoạt động tốt. Xem the demo. Trước khi đăng bất kỳ mã nào tôi giải thích cho bạn những gì nên được thực hiện trong mã.

Thân lưới luôn có một hàng ẩn (tr.jqgfirstrow) sẽ được sử dụng để đặt chiều rộng cột. Người ta phải thay đổi thứ tự trong các cột trong hàng một lần. Ngoài ra, người ta phải thay đổi thứ tự các cột trong các tiêu đề cột (bao gồm the searching toolbar nếu nó tồn tại) và chân trang (tóm tắt) nếu tồn tại.

Tất cả các hàng khác của thân lưới phải được ghi lại trên mỗi ô làm mới. Vì vậy, người ta nên làm điều này bên trong của loadComplete hoặc gridComplete xử lý sự kiện. Chức năng 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; 
    }; 

có thể được sử dụng để lấy chỉ mục của cột 'cb' bằng hộp kiểm.

Để di chuyển cột bên trong bảng tôi đã sử dụng các chức năng sau

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]); 
      } 
     } 
    }; 

mà có thể di chuyển hoặc tất cả các cột của tất cả các hàng của bảng hoặc chỉ có các hàng có lớp học cụ thể. Hàng có lớp "jqgfirstrow" phải được di chuyển một lần và các hàng khác có lớp "jqgrow" phải được di chuyển trên mỗi lưới làm mới. Vì vậy, các mã đầy đủ từ the demo sẽ

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"); 

Trong đoạn code tôi sử dụng một số lớp khác và các công trình lưới điện nội bộ giải thích ví dụ here. Another answer có thể cung cấp thêm thông tin.