与YUI的DataTable最接近的jQuery近似是什么?

时间:2009-07-24 11:45:51

标签: jquery html-table yui inline-editing progressive-enhancement

我的两个最高优先级是渐进增强和内联编辑。我发现了渐进增强(DataTables)和内联编辑(jqGrid),但不是两者都有。支持jQuery UI主题会很不错,但优先级较低。

更新:这是我想象的解决方案类似的例子:

<table summary="A table full of example tabular data">
  <caption>My Table to Progressively Enhance</caption>
  <thead>
    <tr>
      <th id="colA">Column A</th>
      <th id="colB">Column B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="colA">foo</td>
      <td headers="colB">bar</td>
    </tr>
    <tr>
      <td headers="colA">argle</td>
      <td headers="colB">bargle</td>
    </tr>
  </tbody>
</table>

… insert jquery datatable stuff here …

<script type="text/javascript">
    progressivelyEnhanceMyTable();
</script>

3 个答案:

答案 0 :(得分:5)

我认为jqGrid非常适合。

更新:

您可以使用此类代码将表格转换为javascript对象

var $table = $('table'); // select your table
var data = []; // instantiate the data array
$('tr', $table).each(function(i, item){ // loop through the table rows
    obj = {} // create the object to append to the data array
    obj.name = $('td:eq(0)',$(this)).text().trim(); 
    obj.desc = $('td:eq(1)',$(this)).text().trim();
    data += obj; // add the object to the array
});

然后像loading array data example

一样加以解决
for(var i=0;i<=data.length;i++) $("#datagrid").addRowData(i+1,data[i]); 

答案 1 :(得分:2)

使用最新版本的jqGrid,我们现在得到tableToGrid,它可以很好地解决网格从标记问题。

答案 2 :(得分:1)

有一个名为jquery-datatables-editable的数据表插件,它添加了内联编辑功能。