2012-02-29 68 views
0

使用数据表和可插入插件。每当我使用这个选择器时:。$('td [class!=“readonly”]')我无法进行内联编辑。如果我注释掉选择器,那么一切都很好。我不''想要编辑复选框列明显的原因。jquery .make可编辑选择器

有帮助吗?

谢谢!!

这里是我的初始化。

$(document).ready(function() { 
    $('#example').dataTable({ 
     "sAjaxSource": "js/DataTables-1.9.0/scripts/server_processing.php", 
       "aoColumns": [ 
          {"bVisible": false },//id                        
          {},//code 
          {},//project 
          {},//task 
          {},//type 
          {},//description 
          {"fnRender": function (oObj) { 
           return "<input type='checkbox' class='readonly' value='" + oObj.aData[0] + "' name='check'>"; 
           }, 
          "sClass": "readonly", 
          "bSearchable": false, 
          "bSortable": false 
          }//checkbox 
          ] 

       }) 
       .$('td[class!="readonly"]') 
       .makeEditable({ 
        "sUpdateURL": "js/DataTables-1.9.0/scripts/server_editing.php" 
      }) 
     }); 

这里是我的表:

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> 
<thead> 
    <tr> 
     <th width="2%">ID</th>     
     <th width="10%">Code</th> 
     <th width="10%">Project</th> 
     <th width="10%">Task</th> 
     <th width="10%">Type</th> 
     <th width="50%">Description</th> 
     <th width="2%">Delete</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td class="dataTables_empty">Loading data from server</td> 
     <td class="dataTables_empty">Loading data from server</td> 
     <td class="dataTables_empty">Loading data from server</td> 
     <td class="dataTables_empty">Loading data from server</td> 
     <td class="dataTables_empty">Loading data from server</td> 
     <td class="dataTables_empty">Loading data from server</td> 
     <td align="center" class="readonly">Loading data from server</td> 
    </tr> 
</tbody> 
<tfoot> 
    <tr> 
     <th>ID</th>    
     <th>Code</th> 
     <th>Project</th> 
     <th>Task</th> 
     <th>Type</th> 
     <th>Description</th> 
     <th>Delete</th> 
    </tr> 
</tfoot> 

编辑

感谢语法帮助大家。

我改变了它,但仍然没有骰子?再次,删除选择器内联编辑工作。

$(document).ready(function() { 
    $('#example').dataTable({options}); 
    $('td').each(function(){ 
     var self = $(this); 
     if(self.hasClass("readonly") != true){ 
      self.makeEditable({"sUpdateURL": "js/DataTables-1.9.0/scripts/server_editing.php"}) 
     } 
    }); 
}); 

回答

0

尝试使用$().hasClass();

你应该不串在一起的那些,jQuery的元素是不是另一种方法或属性......我很惊讶,它的工作原理与选择删除太...试试这个:

$(document).ready(function() { 
    $('#example').dataTable({ 
     "sAjaxSource": "js/DataTables-1.9.0/scripts/server_processing.php", 
     "aoColumns": [ 
      {"bVisible": false},//id  
      {},//code 
      {},//project 
      {},//task 
      {},//type 
      {},//description 
     {"fnRender": function (oObj) { 
       return "<input type='checkbox' class='readonly' value='" + oObj.aData[0] + "' name='check'>"; 
     }, 
     "sClass": "readonly", 
     "bSearchable": false, 
     "bSortable": false 
     }//checkbox 
    ] 

    }); 
    $('td').each(function(){ 
     var self = $(this); 
     if(self.hasClass("readonly") != true){ 
      self.makeEditable({"sUpdateURL": "js/DataTables-1.9.0/scripts/server_editing.php"}) 
     } 
    }); 
}); 
+0

,感谢语法帮助;我可以接受这些答案。最后,我从来没有获得。(选择器)方法。我甚至不确定这是可能的.makeEditable – dan 2012-03-01 16:10:23

+1

我只是添加aColumns选项.makeEditable并设置'只读'列def为空 – dan 2012-03-01 16:11:12

+0

我很高兴你找到了解决方案......我不确定为什么@Juicy Scripter的解决方案不起作用,但我确定它是情境特定的。 – Relic 2012-03-01 16:51:43

0

您使用在一个错误的马内尔链接:

$('#example').dataTable(options) 
    .find('td[class!="readonly"]') 
    .makeEditable(options); 

// Next code is probably lead to error due to fact that $ isn't exists 
// in result of dataTable function, thus leading to makeEditable not run... 
$('#example').dataTable(options) 
    .$('td[class!="readonly"]') 
    .makeEditable(options); 
+0

这是假设表已经填充所有字段。 – Relic 2012-02-29 21:09:44

+0

@Relic,问题是语法错误(dataTable函数的结果中没有'$'属性),因此代码后面的'。$('td [class!=“readonly”]')'不运行在所有。 – 2012-02-29 21:12:35

+0

我的回答说的是同样的事情......我正在评论你的答案/他的原始代码作为一个前瞻性建议。尽管我们对语法问题达成了一致意见。 – Relic 2012-02-29 21:16:23

0

改变这一点:

$('#example').dataTable(options) 
    .$('td[class!="readonly"]') 
    .makeEditable(options); 

到这一点:

$('#example').dataTable(options) 
    .$('td').not(".readonly") 
    .makeEditable(options); 
再次