2012-06-26 26 views
6

Tôi đang sử dụng jqGrid 4.4.0 với chỉnh sửa nội tuyến. Vì lợi ích của câu hỏi này, lưới của tôi có bốn cột: cột ID (SomeGridRowId), cột văn bản có tự động hoàn thành jQuery (Tự động điền), cột văn bản ký tự đơn (SingleChar) và cột boolean ẩn (CanEditSingleChar). Tôi cần bật hoặc tắt chỉnh sửa cột ký tự đơn dựa trên giá trị của cột CanEditSingleChar. Tôi đã làm việc này trên các hàng hiện có bằng cách sử dụng onSelectRowsetColProp, nhưng vì một lý do nào đó tôi không thể làm cho nó hoạt động chính xác trên các hàng mới được chèn vào. Nếu tôi thêm hàng mới và chọn giá trị từ tự động điền, cột SingleCharluôn là không thể chỉnh sửa. Tôi đã từng bước qua Javascript bằng cách sử dụng các công cụ dành cho nhà phát triển Chrome và IE; các giá trị cột và thuộc tính đang được đặt chính xác, nhưng thuộc tínhcủa cột editable không phản ánh điều này.Thay đổi thuộc tính có thể chỉnh sửa của cột văn bản jqGrid dựa trên kết quả tự động hoàn thành trong một cột khác

Tôi xin lỗi vì đoạn mã khổng lồ, nhưng tôi không muốn để lại bất kỳ thứ gì.

$("#coolGrid").jqGrid({ 
    url: '@Url.Action("GetCoolGridData")', 
    postData: { 
     someId: function() { return $("#someId").val(); }, 
     otherStaticArg: function() { return 1; } 
    }, 
    datatype: 'json', 
    mtype: 'POST', 
    loadonce: true, 
    cellsubmit: 'clientArray', 
    editurl: 'clientArray', 
    scroll: true, 
    pager: $("#coolGridPager"), 
    rowNum: 200, 
    sortname: 'SomeGridRowId', 
    sortorder: 'asc', 
    viewrecords: true, 
    height: '100%', 
    colNames: ['SomeGridRowId', 'CanEditSingleChar', 'Autocomplete', 'SingleChar'], 
    colModel: [ 
     { name: 'SomeGridRowId', index: 'SomeGridRowId', hidden: true }, 
     { name: 'CanEditSingleChar', index: 'CanEditSingleChar', hidden: true }, 
     { 
      name: 'Autocomplete', 
      index: 'Autocomplete', 
      width: 220, 
      editable: true, 
      edittype: 'text', 
      editoptions: { 
       dataInit: function (elem) { 
        $(elem).autocomplete({ 
         source: '@Url.Action("GetSomeGridAutocomplete")', 
         minLength: 2, 
         select: function (event, ui) { 
          var rowId = getRowId($(this)); 
          if (ui.item) { 
           $("#coolGrid").jqGrid('setCell', rowId, 'CanEditSingleChar', ui.item.CanEditSingleChar, '', ''); 
           $("#coolGrid").jqGrid('setCell', rowId, 'Autocomplete', ui.item.label, '', ''); 
           setSingleCharEditMode(rowId); 
          } 
         } 
        }); 
       } 
      } 
     }, 
     { 
      name: 'SingleChar', 
      index: 'SingleChar', 
      width: 10, 
      editable: true,  //default to true, most are editable 
      edittype: 'text' 
     } 
    ], 
    onSelectRow: function (clickedRow) { 
     if (clickedRow && clickedRow != $.coolGridLastSelectedRow) { 
      $("#coolGrid").jqGrid('saveRow', $.coolGridSelectedRow, false, 'clientArray'); 
      $.coolGridLastSelectedRow = clickedRow; 
     } 
     setSingleCharEditMode($.coolGridLastSelectedRow); 
     $("#coolGrid").jqGrid('editRow', $.coolGridLastSelectedRow, true); 
    }, 
    afterInsertRow: function (rowid, rowdata, rowelem) { 
     if (rowid == 'new_row') {  //shown solely for completeness, pretty sure this is not the problem 
      var newRowIndex = $("#coolGridNewRowIndex").val(); 
      if (!newRowIndex) 
       newRowIndex = 1; 
      var newRowId = rowid + "_" + newRowIndex; 
      $("#new_row").attr('id', newRowId); 
      newRowIndex++; 
      $("#coolGrid").val(newRowIndex); 
      $("#coolGrid").jqGrid('setSelection', newRowId, true); 
     } 
    } 
}); 
$("#coolGrid").jqGrid('navGrid', '#coolGridPager', 
{ 
    add: false, 
    del: false, 
    edit: false, 
    search: false, 
    beforeRefresh: function() { 
     $("#coolGrid").jqGrid('setGridParam', { datatype: 'json' }); 
    } 
}); 
$("#coolGrid").jqGrid('inlineNav', '#coolGridPager', 
{ 
    edit: false, 
    add: true, 
    addtext: "Add", 
    save: false, 
    cancel: false, 
    restoreAfterSelect: false, 
    addParams: { 
     position: 'last', 
     addRowParams: { 
      keys: true 
     } 
    } 
}); 

setSingleCharEditMode chức năng:

function setSingleCharEditMode(rowid) { 
    var rowData = $("#coolGrid").jqGrid('getRowData', rowid); 
    if (rowData.CanEditSingleChar === "false") { 
     $("#coolGrid").jqGrid('setColProp', 'SingleChar', { editable: false }); 
    } else { 
     $("#coolGrid").jqGrid('setColProp', 'SingleChar', { editable: true }); 
    } 
} 

Tôi đã thử một loạt toàn bộ công cụ, rifled qua một đống SO câu hỏi khác, googled như điên .... tất cả không có kết quả. Tôi đã dùng để kéo tóc ra. Làm cách nào để kiểm soát thuộc tính editable của một cột sau khi tự động hoàn thành select trên một cột khác, tất cả trên một hàng mới?

CHỈNH SỬA
Cuối cùng, tôi đã nhận được working example up here. Nếu bạn thêm hàng và sau đó chọn một trong hai "Không điển hình *" trong cột Autocomplete, bạn có thể tạo lại hành vi này.

Trả lời

6

Không có ví dụ thực tế, khó có thể biết tại sao hàng mới được thêm vào không thể chỉnh sửa được. Ngoài ra, khá khó để đặt cùng một ví dụ làm việc đơn giản (ví dụ: jsfiddle hoặc jsbin) do jqGrid và các phụ thuộc khác.

Một vài câu hỏi sau khi nhìn qua mã của bạn có thể giúp (hoặc có thể là không có gì mới với những gì bạn đã cố gắng):

  • addRow - Làm thế nào để bạn thêm một hàng, sử dụng addRow function? Có phải mọi thứ khác "jqGrid có liên quan" hoạt động với các hàng mới được thêm vào, tức là nó có được khởi tạo đúng cách không? Tôi đã có một số vấn đề với loại vấn đề đó bằng cách sử dụng datatables.

  • Id hàng chính xác/duy nhất? - Bạn đã kiểm tra rằng rowid là duy nhất cho các hàng mới và mã của bạn được thực thi với mã đúng (tức là id từ hàng mới)? Bạn đã đặt câu hỏi console.log vào setSingleCharEditMode để xem điều gì đang xảy ra (chỉ để chắc chắn, bạn đã nói rằng bạn đã bước qua mã)?

    Bạn có thể thiết lập các editable tài sản của một ô trong hàng khác (Suy nghĩ về nó: đây không thể được nó, như các tế bào nên có thể chỉnh sửa theo mặc định và explicitely thiết lập để không được chỉnh sửa bởi mã của bạn .). Thay đổi màu của hàng cùng với thuộc tính editable để dễ dàng xem ô/hàng đang được xử lý.

  • Làm việc theo mặc định? - Là giá trị mặc định của editabletrue: bạn đã thử tắt setSingleCharEditMode và thấy rằng ô có thể chỉnh sửa theo mặc định? Có lẽ vấn đề không phải là đánh giá của bạn nhưng việc thêm chính hàng đó?

  • Loại chính xác? - Trong setSingleCharEditMode bạn kiểm tra giá trị cột cho strict equality bằng chuỗi "sai". Bạn có chắc chắn rằng các giá trị có cùng loại cho các dòng hiện tại và mới (nên, vì chúng là chuỗi và được phân tích cú pháp thông qua cùng một mã jqGrid: getRowData)? Tôi đoán bạn đã có console.log GED rộng rãi trong chức năng đó để xem những gì đang xảy ra với truyền id và sự so sánh mà đặt editable tài sản

Hope this helps một chút để tìm ra vấn đề. Như tôi đã nói, thật khó để gỡ lỗi mà không có ví dụ làm việc. Bạn có thể muốn đặt nó lên một nơi nào đó.

[Chỉnh sửa sau khi dụ làm việc]

Điều đầu tiên tôi thấy là, nếu bạn chọn "không điển hình Manic Rối loạn" trong một có thể chỉnh sửa hàng hiện có, các hành vi tương tự được áp dụng. Ngoài ra: thêm hàng có thể chỉnh sửa (một số thứ lưỡng cực) hoạt động. Điều này dường như không phải là vấn đề của "hàng mới" so với "hàng hiện tại". Giống như một vấn đề với các hàng có thể chỉnh sửa được thay đổi thành không thể chỉnh sửa được.

tôi đoán là điều này đang xảy ra:

  1. Bạn đang thêm một hàng mới, cột SingleChar là có thể chỉnh sửa theo mặc định, vì vậy <input> được hiển thị.
  2. Bạn đánh giá phản hồi của máy chủ và đặt cột thành editable : false trong trình xử lý tự động hoàn tất select.
  3. Bạn bỏ chọn hàng và jqGrid trở lại trạng tất cả sau đó hàng có thể chỉnh sửa, vì vậy nó không chạm SingleChar, vì nó nghĩ rằng SingleChar không cần phải được đặt lại trạng thái ban đầu của nó ..

Tôi có ý nghĩa không?

Thử đặt editable thành false sau khi jqGrid đặt lại hàng hoặc tự xóa <input>.

+0

Cảm ơn bạn đã trả lời chu đáo. Tôi đang làm việc để lấy ví dụ trực tuyến ngay bây giờ. –

+0

Bạn có tiến bộ không? Và bạn nghĩ gì về việc gán tiền thưởng đó? Tôi nghĩ sẽ không còn câu trả lời nào nữa trước khi thời gian gia hạn kết thúc. – Wolfram

+0

Xin lỗi, Wolfram, tuần bận rộn tuần trước và tôi không có thời gian để lấy mẫu hoàn chỉnh. Tôi hy vọng sẽ làm việc trên nó ngày hôm nay, nhưng tiền thưởng là của bạn (mặc dù tôi không chắc chắn tại sao nó chia nó thành 100). –

Các vấn đề liên quan