使用jQuery DataTable Grid制作只读行

时间:2013-02-04 09:00:22

标签: jquery jquery-datatables

我正在使用Jquery DataTable Grid。 这里我正在编辑单元格,如下所示: this Example

现在如果“引擎版本”列的值为“420”,那么我想将整行设为只读。

请帮帮我。

编辑:

  var oTable;
        $(document).ready(function () {
          oTable=  $('#example').dataTable({
                "bProcessing": false,
                "bJQueryUI": true,
                "sAjaxSource": "GetWebAlerts.aspx",
                "sPaginationType": "full_numbers",
                "aLengthMenu": [ 10,25,50,100,200,500 ],
                 "fnDrawCallback": function (oSettings) {
                   if (oSettings.bSorted || oSettings.bFiltered) {
                    if (oSettings.aoColumns[1].bVisible == true) {
                        for (var i = 0, iLen = oSettings.aiDisplay.length; i < iLen; i++) {
                            $('td:eq(0)', oSettings.aoData[oSettings.aiDisplay[i]].nTr).html(i + 1);
                        }
                    }
                }
            },
                "aaSorting": [[3, "desc"]],
                aoColumns: [
                 { "bVisible": false, "bSortable": false, "aTargets": [0] },
               {"sClass" : "left", "bVisible": true, "bSortable": false, "aTargets": [1] },
                 { "bVisible": true, "bSortable": true, "aTargets": [2] },
                 { "bVisible": true, "bSortable": true, "aTargets": [3] },
                 { "bVisible": true, "sType": "num-html","bSortable": false,
                    "fnRender": function (oData, sVal) {

                        if (sVal.indexOf("OVERSPEED") >= 0) {                            
                       return "<span title='Overspeed = " +  oData.aData[8] + " KM/H'>" + sVal + "(" + oData.aData[8] +" KM/H)</span>";                                                        
                       }
                        else if (sVal.indexOf("IDLING") >= 0) {
                            return "<span title='Idling from = " + oData.aData[8].split(";")[0] + " For "+ oData.aData[8].split(";")[1] + " Mins'>" + sVal + "("+ oData.aData[8].split(";")[1]+  " Mins)</span>";
                            }
                         else if(sVal.indexOf("Geofence In") >= 0)
                         {
                            return "<span>" + oData.aData[8] + "- IN</span>";
                         }
                          else if(sVal.indexOf("Geofence out") >= 0)
                         {
                            return "<span>" + oData.aData[8] + "- OUT</span>";
                         }
                        else { 

                        return sVal;                              
                         }
                    }, "aTargets": [4], "asSorting": ["desc", "asc"] },

               { "bVisible": true, "bSortable": true, "aTargets": [5] },
                 { "bVisible": true, "bSortable": true, "aTargets": [6] },
                   { "bVisible": true, "bSortable": true, "aTargets": [7] }

                     ]

                 }).makeEditable({
                                    sUpdateURL: "UpdateWebData.aspx?i=0",
                                    "aoColumns": [
                                         null,
                                           null,
                                           null,
                                           null,

                                           {
                                             indicator: 'Saving reason...',
                                             tooltip: 'Click to select reason',
                                             loadtext: 'loading...',
                                             type: 'select',
                                             onblur: 'submit',
                                             data: "{'1':'Accident','2':'Battery Taken Out','3':'In Workshop','4':'Not In Operation','5':'Signal Lost','6':'Other'}"                                                

                                           },


                                           {

                                           },
                                            null
                                     ],
                                       sDeleteURL: "UpdateWebData.aspx?i=1",
                                       oDeleteRowButtonOptions: {   label: "Remove", 
                                                icons: {primary:'ui-icon-trash'}
                                    },

                                });
                           });

这是我的代码..如果我的页面GetWebAlerts.aspx中的第5个数字Json数据为“0”,我想只读。

2 个答案:

答案 0 :(得分:1)

看看你的代码,我会试着解释一下如何做到这一点。

在输入值的JS中,检查输入是否为引擎版本,值为420。 如果是,则向该行添加一个名为420row的类。

然后在绑定点击的功能中更改为输入,更改选择器以添加:not('.420row')

同样,如果你发布你的代码,或者更好地制作一个jsfiddle,那么我将能够更好地帮助你。

答案 1 :(得分:0)

我使用下面的代码使行不可编辑.....通过将onclick事件添加到该特定行并添加条件你想要做什么基础不可编辑。请参阅以下代码:

$('#employee tbody tr')
    .live('click', function() {
        var nTds = $('td', this);
        var designation = $(nTds[4]).text();
            if (designation == "****") {
             alert('Employee designation is **** so cannot update now');
            }
    });