Đánh dấu hàng khi hộp kiểm là đúng

Question

Một số người có thể giúp tôi, tôi có một jqgrid và tôi muốn đánh dấu hàng nếu hộp kiểm là đúng, cảm ơn !!

đây là những gì tôi muốn làm trong dự án này ...

function loadjqGrid(jsonGridData){ 
    var xaxis=1300 
    var yaxis = $(document).height(); 
    yaxis = yaxis-500; 
    getGrids();  
    $("#maingrid").jqGrid({ 
     url:'models/mod.quoservicetypedetails.php?ACTION=view', 
     mtype: 'POST', 
     datatype: 'xml', 
     colNames:getColumnNames(jsonGridData), 
     colModel :[ 
      {name:'TypeID', index:'TypeID', width:350,hidden:true, align:'center',sortable:false,editable:true, 
      edittype:"select",editoptions:{value:getTypeID()},editrules: { edithidden: true}}, 
      {name:'Order1', index:'Order1', width:80, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},     
      {name:'Order2', index:'Order2', width:80, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}}, 
      {name:'Order3', index:'Order3', width:80, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},      
      {name:'Description', index:'Description', width:140, align:'center',sortable:false,editable:true, 
      edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},      
      {name:'Notes', index:'Notes', width:120, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}}, 
      {name:'Measure', index:'Measure', width:80, align:'center',sortable:false,editable:true, edittype:"textarea", editoptions:{size:"30",maxlength:"30"}},     
      {name:'UnitPrice', index:'UnitPrice', width:100, align:'center',sortable:false,editable:false,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}}, 
      {name:'Remarks', index:'Remarks', width:140, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}}, 
      {name:'UnitCost', index:'UnitCost', width:100, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},  
      {name:'Service', index:'Service', width:120, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}}, 
      //If the GroupHeader is true the row background is yellow 
      {name:'GroupHeader', index:'GroupHeader', width:100, align:'center',sortable:false,editable:true,formatter:'checkbox', edittype:'checkbox', type:'select', editoptions:{value:"1:0"}}, 
      {name:'IsGroup', index:'IsGroup', width:80, align:'center',sortable:false,editable:true,formatter:'checkbox', edittype:'checkbox', type:'select', editoptions:{value:"1:0"}}, 
     ], 
     viewrecords: true, 
     rowNum:20, 
     sortname: 'id', 
     viewrecords: true, 
     sortorder: "desc", 
     height: yaxis, 
     pager : '#gridpager', 
     recordtext: "View {0} - {1} of {2}", 
     emptyrecords: "No records to view", 
     loadtext: "Loading...", 
     pgtext : "Page {0} of {1}",   
     height: yaxis, 
     width: xaxis, 
     shrinkToFit: false, 
     multiselect: true, 
     editurl:'models/mod.quoservicetypedetails.php?ACTION=edit' 
    }); 
} 

Làm thế nào tôi có thể làm điều này? Ai đó có thể giúp tôi?

Answer 1

Tôi đã mô tả trong the answer một cách tốt để bạn có thể triển khai làm nổi bật.

Phiên bản 4.3.2 của jqGrid có tính năng mới - rowattr gọi lại (xem my original suggestion), được giới thiệu đặc biệt cho các trường hợp như của bạn. Nó cho phép bạn làm nổi bật một số hàng lưới trong khi điền của lưới. Để có lợi thế hiệu suất tốt nhất, bạn nên sử dụng thêm gridview: true. Nhân tiện Tôi khuyên bạn nên sử dụng gridview: true trong tất cả các jqGrids.

Việc sử dụng rowattr callback là rất dễ dàng:

gridview: true, 
rowattr: function (rd) { 
    if (rd.GroupHeader === "1") { // verify that the testing is correct in your case 
     return {"class": "myAltRowClass"}; 
    } 
} 

CSS lớp myAltRowClass cần xác định màu nền của hàng nhấn mạnh.

Bản demo tương ứng bạn có thể tìm here:

Bởi vì trong bản demo của bạn, bạn chỉ cần làm nổi bật và không chọn các hàng tôi đã không được sử dụng multiselect: true trong bản demo của tôi. Trong trường hợp của multiselect: true nó hoạt động chính xác theo cùng một cách.

Khi kết thúc câu trả lời của tôi, tôi muốn giới thiệu bạn sử dụng column templates. Tính năng này sẽ làm cho mã của bạn ngắn hơn, dễ đọc hơn và dễ bảo trì hơn. Những gì bạn cần làm là:

• bạn có thể bao gồm cài đặt phổ biến hoặc thường được sử dụng nhất từ ​​định nghĩa cột trong cmTemplete. Trong trường hợp của bạn nó có thể là

cmTemplate: {align: 'center', sortable: false, editable: true, width: 80} 

• sau đó bạn có thể định nghĩa một số biến trong đó mô tả tài sản chung mà bạn sử dụng thường xuyên trong một số cột. Ví dụ:

var myCheckboxTemplate = {formatter: 'checkbox', edittype: 'checkbox', type: 'select', 
     editoptions: {value: "1:0"}}, 
    myTextareaTemplate = {edittype: "textarea", 
     editoptions: {size: "30", maxlength: "30"}}; 

• sau đó bạn có thể sử dụng myCheckboxTemplate và myTextareaTemplate bên trong colModel mà sẽ giảm trong trường hợp của bạn như sau

colModel: [ 
    {name: 'TypeID', index: 'TypeID', width: 350, hidden: true, edittype: "select", 
     editoptions: {value: getTypeID()}, editrules: { edithidden: true}}, 
    {name: 'Order1', index: 'Order1', template: myTextareaTemplate}, 
    {name: 'Order2', index: 'Order2', template: myTextareaTemplate}, 
    {name: 'Order3', index: 'Order3', template: myTextareaTemplate}, 
    {name: 'Description', index: 'Description', width: 140, template: myTextareaTemplate}, 
    {name: 'Notes', index: 'Notes', width: 120, template: myTextareaTemplate}, 
    {name: 'Measure', index: 'Measure', template: myTextareaTemplate}, 
    {name: 'UnitPrice', index: 'UnitPrice', width: 100, editable: false, template: myTextareaTemplate}, 
    {name: 'Remarks', index: 'Remarks', width: 140, template: myTextareaTemplate}, 
    {name: 'UnitCost', index: 'UnitCost', width: 100, template: myTextareaTemplate}, 
    {name: 'Service', index: 'Service', width: 120, template: myTextareaTemplate}, 
    //If the GroupHeader is true the row background is yellow 
    {name: 'GroupHeader', index: 'GroupHeader', width: 100, template: myCheckboxTemplate}, 
    {name: 'IsGroup', index: 'IsGroup', template: myCheckboxTemplate} 
], 
cmTemplate: {align: 'center', sortable: false, editable: true, width: 80},