数据表：更改可编辑单元格的外观 [英] DataTables: Changing the appearance of the editable cell

问题描述

有人可以帮助我将可编辑单元格设置为可见，以便可以对其进行编辑吗？现在，它看起来像一个简单的文本，并且在视觉上没有任何暗示，可以对其进行编辑...我想使其看起来像一个标准的文本字段。

解决方案

这应该起作用：

  var oTable = $（'＃example'）。dataTable （{{
 bServerSide：true，
 sAjaxSource： / url /，
 fnDrawCallback：function（）{
 $（'＃example tbody td' ）.editable（'url'，{//简单的可编辑初始化
 height： 14px，
}）; 
 
 $（'＃example tbody tr'） .each（function（）{
 $ .each（this.cells，function（）{
 $（this）.click（）// //默认情况下，所有td都具有click函数绑定，因此我们模拟每个td的点击
}）; 
}）; 
 
 $（'＃example tbody td input'）。live（'click'，function（）{
 $（this）.select（）//选择输入
}）
} 
}）; 
 $ .editable.types.defaults.reset = function（）{//此函数在提交
 
} 
 后将禁用复位输入编辑pre> 
 
 
更新：
 
 
 
我在这里 http://jsfiddle.net/94BZV/31/  
 
 
 
别忘了放正确的可修改init网址，以获取正确的答案并传递回编辑字段。
 
Can someone help me to make editable cell "visible", so it could be clear it can be edited? Right now it looks like a simple text and nothing visually suggests, that it can be edited...I´d like to make it look like a standard text field.
解决方案
This should work:
 var oTable = $('#example').dataTable( {
    "bServerSide": true,
    "sAjaxSource": "/url/",
    "fnDrawCallback": function () {
        $('#example tbody td').editable( 'url', { // simple editable initialization
          "height": "14px",
        }); 

        $('#example tbody tr').each(function() {  
            $.each(this.cells, function(){
                $(this).click()  //by default all td's have bind for click function, so we simulate clicks for every td
            });
        });

        $('#example tbody td input').live('click', function(){
            $(this).select() // to select input
        })
     }
 });
  $.editable.types.defaults.reset = function (){   //this function disables reset input editing after submiting

  }
UPDATE:

I made a test sample here http://jsfiddle.net/94BZV/31/

Don't forget to put correct url in init of editable to get correct answer passed back to edit field.

                        
这篇关于数据表：更改可编辑单元格的外观的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！